* {
    font-family: poppins, sans-serif;
    font-weight: 300;
    font-style: normal;
    text-align:left;
}

:root {
    --color2: #ae1917;
    --color1: #1d74ae;
    --color3: #222;
    --color4: #0d4386;
    --colorticker: #0d4386;
    --bottomborder: #1d74ae;
    --headerbackground: #0d4386;
    --footerscrollbackground: #1d74ae;
}

.opensans {
    font-family: open-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
}
.opensans *{
    font-family: open-sans, sans-serif;
    font-weight: 400;
    font-style: normal;
}
    .opensans h1, .opensans h2, .opensans h3, .opensans h4, .opensans h5, .opensans h6 {
        color: var(--color1);
        font-weight: bold
    }


h1, h2, h3, h4, h5, h6 {
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}

h4 {
    font-size: 20px
}

p {
    font-size: 16px
}

.logo {width:100%;max-width:200px}
.restrict {margin:auto;width:100%;max-width:1600px}
.navbkg {background-color:var(--color1)}
.navbkg * {color:#fff}
.h2title {color:rgba(0, 0, 0, 0.80)}
.scrollerarea {width:100%;background-color:#ddd;min-height:200px}
.maincontentarea {width:100%;background-color:#fff;min-height:200px}
    .maincontentarea * {
        font-family: open-sans, sans-serif;
        font-weight: 400;
        font-style: normal;
    }
.footerarea {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.80);
    min-height: 200px;
    border-top: 2px solid var(--color1);
}
.megamenu {width:100%;}

.footerarea img {max-width:100%;}
.categorypicker img {
    max-width: 100%;
}

.cattext {
    color: var(--color1);
    text-decoration: none
}

.cat2 > a  {
    border-right:1px solid #ddd
}

.topbullet > i {
    color: var(--color1);
    font-size:22px
}

.footer {
    background-color: rgba(0,0,0,0.8);
    color: #fff;
    border-top: 4px solid var(--color4);
}

.brandwrapper {
    padding: 0px;
    background-color: #fff
}
    .brandwrapper img {
        width: 100%;
        border-radius: 3px
    }

.brandslide {
    border: 2px solid #ff1a8c;
    border-radius: 5px;
    padding: 0px;
    overflow: hidden;
}

    .brandslide img {
        width: 100%;
        border-radius: 3px
    }


.swiper-container {
    width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: transparent;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.card-horizontal {
    display: flex;
    flex: 1 1 auto;
    border:2px solid var(--color1);overflow:hidden;border-radius:4px
}
.card-horizontal img {border-right:8px solid var(--color1)}

.card-title-up {
    color: var(--color1);font-weight:400
}

.vehicle {width:100%;max-width:230px;opacity:0.8}
.navlinks a {display:block;float:left;margin-right:20px;color:#fff;text-decoration:none}
.navlinks a:hover {text-decoration:none}




.telno {
    color: var(--color1);
    text-align: right;
    font-size: 26px;
    font-weight: bold;
    margin: auto
}

.ticker {
    background-color: var(--colorticker);
    color: #fff;
    font-size: 1rem;
    border-top: 0px solid var(--color1)
}

.marquee {
    width: 100%;
    line-height: 20px;
    text-align: center;
    color: #fff !important;
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

    .marquee span {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 26s linear infinite;
        font-weight: bold;
    }

@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-100%, 0);
    }
}

.catimg {
    text-align: center
}
.catimg img {max-width:80%;text-align:center}


.bigcard {
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    border: 0px;
    background-color:transparent
}

    .bigcard img {
        border-radius: 4px;
        overflow: hidden;
        background-color: transparent
    }

.bigcardbody {
    position: absolute;
    bottom: 0px;
    background-color: rgba(0, 0, 0, 0.80);
    color: #fff;
    width: 100%;
    border-top: 3px solid rgba(0, 0, 0, 0.85);
    padding-top:10px;
    padding-bottom:10px
}

    .bigcardbody h4 {
        font-size: 18px;padding-bottom:5px;margin:0px
    }

    .bigcardbody p {
        font-size: 15px
    }
.card-text {font-size:14px}
.card-body a{
    font-size: 14px!important
}
.scard {color:rgba(0,0,0,0.8)}
.carousel-caption {
    width: 100%;
    height: 100%;
    left: 0 !important;
    bottom:0px!important;
}

    .carousel-caption > div {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        padding-bottom: 20px;
        background-color: rgba(0, 0, 0, 0.80);
        border-top: 3px solid rgba(0, 0, 0, 0.85);
    }


@media only screen and (max-width: 768px) and (min-width: 100px){


    .dales {
        display: inline-block !important;
        position: relative;
        left: unset;
        bottom: unset;
        padding: 0px
    }

        .dales > div {
            position: relative;
            bottom: unset;
            left: unset;
            width: 100%;
            padding-bottom: 20px;
            background-color: rgba(0, 0, 0, 0.80);
            border-top: 3px solid rgba(0, 0, 0, 0.85);
            margin: 0px !important;
            min-height:100px!important
        }
}

.maincontentarea h1 {
    color: var(--color1);
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.maincontentarea h2 {
    color: var(--color1);
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.maincontentarea h3 {
    color: var(--color1);
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.maincontentarea h4 {
    color: var(--color1);
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}
.maincontentarea h5 {
    color: var(--color1);
    font-family: handel-gothic, sans-serif;
    font-weight: 300;
    font-style: normal;
}

.overflow-hidden {
overflow:hidden
}

.cardsaccepted img {margin:3px;max-width:80px}
.footer h4 {padding-bottom:15px}
.sidenav img {border-radius:3px;width:100%}

@media only screen and (max-width: 575px) {
    .cat2 > a {
        border-right: 1px solid #fff !important
    }
    h1 {font-size:22px}
    h2 {font-size:20px}
    h3 {font-size:18px}
    h4 {
        font-size: 18px
    }
    h5 {
        font-size: 18px
    }
    .catimg img {
        max-width: 65%;
        text-align: center
    }
    .cattext {text-align:left}
    .categorypicker > .cat2 a > .card {
        border-radius:0px;padding:0px;margin:0px
    }
        .categorypicker > .cat2 a:nth-child(odd) > .card {
        background-color:rgba(0,0,0,0.05)
    }
    .categorypicker > .cat2 a:nth-child(even) > .card {
        background-color: rgba(0,0,0,0.1)
    }
}
@media only screen and (max-width: 767px) and (min-width: 576px) {
    .cat2 > a:nth-child(4n) {
        border-right: 1px solid #fff;
    }
    h1 {
        font-size: 24px
    }

    h2 {
        font-size: 22px
    }

    h3 {
        font-size: 20px
    }

    h4 {
        font-size: 18px
    }

    h5 {
        font-size: 18px
    }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
    .cat2 > a:nth-child(6n) {
        border-right: 1px solid #fff
    }
    h1 {
        font-size: 24px
    }

    h2 {
        font-size: 22px
    }

    h3 {
        font-size: 20px
    }

    h4 {
        font-size: 18px
    }

    h5 {
        font-size: 18px
    }
    .telno {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1199px) and (min-width: 992px) {
    .cat2 > a:nth-child(6n) {
        border-right: 1px solid #fff
    }
}

@media (min-width: 1200px) {
    .cat2 > a:nth-child(12n) {
        border-right: 1px solid #fff
    }
}
.telno span{white-space:nowrap}




.sidenav2 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 90000000;
    top: 0;
    right: 0;
    background-color: #fff;
    overflow-x: hidden;
    transition: 0.5s;
    color: #fff;
    max-width: 400px
}

    .sidenav2 a {
        text-decoration: none;
        color: #fff;
        display: block;
        transition: 0.3s;
    }


.mobilesocial {
    width: 400px;
    text-align: center
}

    .mobilesocial a {
        display: inline !important;
        font-size: 20px;
        color: var(--color1);
        margin-right: 6px;
        margin-left: 6px;
        text-decoration: none
    }

        .mobilesocial a:hover {
            text-decoration-color: none;
            color: var(--color2)
        }

.sidebar {
    min-height: 100%;
    width: 100%;
    border-left: 3px solid var(--color1);
    padding-top: 20px;
    background-color: #fff
}

    .sidebar h4 {
        font-size: 24px;
        margin-bottom: 0px;
        padding-bottom: 0px
    }

.sidebarsect {
    border-radius: 5px;
}

    .sidebarsect .row {
        padding-top: 7px;
        padding-bottom: 7px
    }

        .sidebarsect .row:first-child {
            border-radius: 5px 5px 0px 0px
        }

        .sidebarsect .row:last-child {
            border-radius: 0px 0px 5px 5px
        }

        .sidebarsect .row:nth-child(odd) {
            background-color: rgba(0,0,0, .80)
        }

        .sidebarsect .row:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.75)
        }


        .brandfooter * {background-color:var(--color1)}
        .brandfooter img{border-radius:4px}