html h1,
h2,
h3 {
    font-family: 'Bebas Neue', sans-serif;
}

p {
    font-family: "Lato", sans-serif;
}


/* Gobal Variables */

.head_btn {
    background-color: rgb(14, 14, 56);
    color: white;
    border-color: rgb(14, 14, 56);
    text-transform: uppercase;
    padding: 15px 30px;
}

.contact_btn {
    cursor: pointer;
    border-color: rgb(14, 14, 56);
    color: white;
    background-color: rgb(14, 14, 56);
}

a:hover.contact_btn {
    color: white;
    background-color: rgb(14, 14, 56);
    border-color: white;
}

.call_us_btn {
    background-color: black;
    border-color: black;
    cursor: pointer;
}

a:hover.call_us_btn {
    background-color: black;
    border-color: white;
}

.col_top_info {
    background-color: black;
    padding: 50px;
}

.row_col_three_middle_header {
    margin: 25px 0px 10px;
    padding: 28.11px 0px 0px;
}

.col_one_faq {
    padding: 74px 85px 74px;
}

.col_one_faq h1,
h2 {
    font-size: 40px;
    margin: 25px 0px;
}

.col_one_faq p {
    margin: 15px 0px;
}

.oil_pic_info h1 {
    font-size: 64px;
    margin: 25px 0px;
}

.oil_pic_info p {
    margin: 15px 0px;
}

/* NavBar */

.navbar {
    width: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5px;
    font-size: x-large;
    font-weight: 600;
    padding: 3px;
}

.active {
    color: red;
}

/* Jumbotron */

.bg-cover {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-attachment: static;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Row 3 Image */

.mask {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

/* Oil Image */

.bg-image {
    position: relative;
}

/* ABOUT_PAGE */

.gears_aboutPage {
    height: 550px;
}

.col_aboutRight {
    background-color: black;

}

.about_container {
    width: 75%;
    padding: 35px;
}

/* ROW 2 */

.img_brake {
    height: 100%;
}

/* 3rd Row */

.about_row_threeRight {
    padding: 100px;
}

/* 4th Row */

.about_forth_col {
    padding: 50px;
}

.oil_image {
    padding: 100px;
}

/* FAQ PAGE */

.col_one_right {
    background-color: black;
}

.col_one_right_inner {
    padding: 50px;
}

.row_two_faq {
    padding: 50px;
}

/* CONTACT PAGE */

.contact_h1 {
    font-weight: 500;
}

.contact_col_left {
    padding: 50px;
}

/* AUTO REPAIR PAGE */

.auto_repair_rowTwo {
    padding: 50px;
}







/* Media Querys */
@media (max-width: 480px) {

    .navbar-nav {
        -webkit-padding-start: 0px;
        -webkit-margin-before: 0px;
        -webkit-margin-after: 0px;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        width: 90%;
        position: relative;
        /* <-- Added */
        z-index: 1;
        /* <-- Added */
    }

    .page-Off {
        display: none !important;
    }

    .phoneTwo-padding {
        padding: 50px;
    }

    .phoneThree-backGroud {
        background-color: lightgray;
        padding: 50px;
    }

    /* Index Page */

    .jumbotron {
        display: none;
    }

    .index-bigScreen {
        display: none;
    }

    .index-deskTop {
        display: none;
    }

    .index-ipad {
        display: none !important;
    }

    .index-lowResolution {
        display: none !important;
    }

    .row_two_index_phone {
        background-color: white;
        padding: 50px;
    }

    .col_two_index_left_phone h1,
    p {
        margin: 10px;
    }

    .row_three_index_phone {
        background-color: black;
        padding: 50px;
    }

    .row_four_index_phone h1 {
        font-size: 45px;
    }

    .navbar {
        width: 100%;
        margin: 0px;
    }

    nav ul li a {
        color: white;
    }

    .navbar-collapse {
        background-color: white;
    }

    .one_rowButton {
        color: white;
        background-color: rgb(14, 14, 56);
        border-radius: 8px;
        border: 0;
        font-size: 1.4rem;
        margin: .7rem 0;
        padding: .7rem .7rem;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
    }

    /* About Page */

    .row_two_about_phone h2 {
        font-size: 40px;
    }

    .row_three_about_phone {
        background-color: black;
    }

    .row_three_about_phone h2 {
        font-size: 30px;
    }

    .row_col_three_middle_header {
        margin: 25px 0px 10px;
        padding: 28.11px 0px 0px;
    }



    /* FAQ */

    .col_one_faq_phone {
        padding: 46px 27px 46px;
    }

    .row_two_faq_phone {
        padding: 46px 28px 46px;
    }

    .row_col_two_faq_phone p {
        margin: 15px 0px;
    }

    .row_three_faq_phone {
        background-color: lightgray;
        padding: 46px 28px 46px;
    }

    .row_col_three_info_faq_phone h1 {
        font-size: 45px;
        margin: 25px 0px;
    }

    .row_col_three_info_faq_phone p {
        margin: 15px 0px;
    }

    /* Gallery */

    .gallery_heading_phone {
        padding: 50px;
    }

    /* Contact */

    .row_one_contact_phone {
        padding: 28px 28px 28px;
    }

    /* body {
        background-color: red;
    } */
}







/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

    .lowResolution-Off {
        display: none !important;
    }

    .lowResTwo-padding {
        padding: 50px;
    }

    .lowRes-background {
        background-color: lightgray;
        padding: 50px;
    }

    /* Index Page */

    .jumbotron {
        display: none;
    }

    .row_three_index_low_resolution {
        background-color: black;
        padding: 50px;
    }

    /* About Page */

    .row_one_about_ipad h1 {
        margin: 25px 0px;
    }

    .row_one_about_ipad p {
        margin: 15px 0px;
    }

    .row_two_about_low_resolution h2 {
        font-size: 40px;
        margin: 25px;
    }

    .row_three_about_low_resolution {
        background-color: black;
    }

    /* FAQ */

    .col_one_faq_low_resolution {
        padding: 46px 31px 46px;
    }

    .row_two_faq_low_resolution {
        background-color: white;
        padding: 46px 30px 46px;
    }

    .row_col_two_faq_low_resolution p {
        margin: 15px 0px;
    }

    .row_col_three_info_faq_low_resolution h1 {
        font-size: 45px;
        margin: 25px 0px;
    }

    .row_col_three_info_faq_low_resolution p {
        margin: 15px 0px;
    }

    /* body {
        background-color: yellow;
    } */
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {

    .ipad-Off {
        display: none !important;
    }

    .ipadTwo-padding {
        background-color: white;
        padding: 50px;
    }

    .ipadThree-backGround {
        background-color: lightgray;
        padding: 50px;
    }

    /* Index Page */

    .jumbotron {
        display: none;
    }

    .navbar {
        width: 100%;
        margin: 0px;
    }

    .col_two_index_left_ipad h1,
    p {
        margin: 15px 0PX;
    }

    .row_three_index_ipad {
        background-color: black;
        padding: 75px;
    }

    .row_four_index_ipad h1 {
        font-size: 45px;
    }

    /* About Page */

    .row_two_about_ipad h2 {
        font-size: 40px;
        margin: 25px;
    }

    .row_three_about_ipad {
        background-color: black;
    }

    .row_three_about_ipad h2 {
        font-size: 30px;
    }

    .row_four_about_ipad h1 {
        font-size: 45px;
        margin: 25px 0px;
    }

    /* FAQ */

    .col_one_faq_ipad {
        padding: 50px;
    }

    .row_col_three_info_faq_ipad h1 {
        font-size: 45px;
        margin: 25px 0px;
    }

    .row_col_three_info_faq_ipad p {
        margin: 15px 0px;
    }

    /* body {

        background-color: blue;
    } */
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {

    /* Index Page*/

    html {
        padding: 0px 10px;
    }

    .desktop-Off {
        display: none !important;
    }

    .col_two_index_left_desktop h1,
    p {
        margin: 10px;
    }

    .col_two_index_left_desktop {
        padding: 25px;
    }

    .col_three_index_desktop {
        padding-top: 80px;
    }

    .row_four_index_desktop h1 {
        font-size: 64px;
        font-weight: 300;
        margin: 25px;
    }

    /* About Page */

    .row_three_info_about_desktop h2 {
        font-size: 30px;
        margin: 25px 0px 10px;
    }

    .row_three_info_about_desktop p {
        margin: 10px 0px;
    }

    .col_row_four_info_desktop h1 {
        font-size: 64px;
        margin: 25px 0px;
    }

    /* FAQ */

    .deskTop-padding {
        padding: 50px;
    }

    .row_col_three_info_faq_desktop h1 {
        font-size: 64px;
        margin: 25px 0px;
    }

    .row_col_three_info_faq_desktop p {
        margin: 15px 0px;
    }

    /* body {
        background-color: green;
    } */
}

/* Media Query for Large screens */
@media (min-width: 1281px) {

    html {
        padding: 0px 10px;
    }

    .bigScreen-Off {
        display: none !important;
    }

    .bigScreen-padding {
        padding: 50px;
    }

    .bigScreen-paddingP p {
        margin: 15px 0px;
    }

    .bigScreen-fontSize h1 {
        font-size: 64px;
        margin: 25px 0px;
    }

    /* Index Page */

    .row_four_index_big_screen h1 {
        font-size: 64px;
        font-weight: 300;
        margin: 25px;
    }

    /* About Page */

    .row_one_about_big_screen h1 {
        margin: 25px 0px;
    }

    .row_two_about_big_screen h2 {
        font-size: 30px;
        margin: 10px;
    }

    .row_two_about_big_screen h2 {
        font-size: 40px;
        margin: 25px 0px;
    }

    .row_three_info_about_big_screen h2 {
        font-size: 30px;
        margin: 25px 0px 10px;
    }

    body {
        background-color: white;
    }
}