/* 
 ------ Color used --------

CWT color:
cwt-red: #900   (darker red for text)
red seperation (header): #c00
blue (dark) : #009 (for text)
blue (semi-dark) #00c (used in footer)

Ideas for blue (from logo)
#000696
Idea for red
#d10f27 - no


Background
Alternates between grey and white
grey: 
background-color: rgba(235, 238, 239, 0.5);
 
*/

@charset "utf-8";


body {
	font-family: "Comic Sans MS", "Artifika", "Helvetica Neue", serif;
    color: #009;
    
}

.row{
    /* to get rid of the padding that makes the rows overflow */
    padding-left!important: 0px;
    padding-right!important: 0px;
    
}

/*------------------------
    REUSABLE COMPONENT
------------------------*/


h5 {
    text-align: center;
} 

a {
    border: none;
}

.phone-link {
    border-bottom: 1px solid;
}

.phone-link:hover {
    text-decoration: none;
}

/*------------------------
    REUSABLE COMPONENT
------------------------*/


.title-underline:after{
    content: " ";
    width: 100px;
    display: block;
    background-color: #009;
    height: 2px;
    margin: 1rem auto 3rem auto;
}

.cwt-red {
    color: #900;
}

.cwt-blue {
    color: #006;
}

.btn-home {
    text-align: center;
    color: #009;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* -----------------------
        NAVIGATION
------------------------*/


.navbar {
    background-color: rgba(235, 238, 239, 0.5);
    /* ---- red line that seperates header and content --- */
    border-bottom: 15px solid #c00;


}

.navbar .nav-link:link,
.navbar .nav-link:visited {

/*    color: #0000bc;*/
    color: #00c;
    transition: all 0.4s ease-in-out;
}

button .navbar-toggler {
/*    border: #900;*/
/*    margin-top: 2.5rem;*/
    margin-top: 5%;
    margin-bottom: 5%;
}

/*
.navbar-toggler-btn {
    color: #009;    
}
*/

@media (min-width:575px) {
    
    .navbar .nav-link:link,
    .navbar .nav-link:visited {
        padding-top: 0; 
        margin-bottom: 1.1rem;
    }
    .navbar .nav-link:hover {
        border-bottom: 1px solid #c00;
        color: #00c;

    }
    
     
}


#navigation {
    padding-top: 20px;
}

.navbar-toggler {
    margin: 27px 0 auto 10px; 
    /* to align with the logo  */
    font-size: 1.5em;
/*
    border: 0.5px solid #00c;
    background-color: #d8d8d8;
*/
}

.navbar-toggler-icon {
    color: #00c;
}

.navbar-toggler-icon:hover {
    color: #a3a3a3;
} 




/*----------------------*/

/*
.page-content {    
    background-image: url(../img/white%20truck%20blue%20globe.png);
    background-repeat: no-repeat;
    background-position: center;
    width: device-width;
}
*/


footer {
/*    background-color: #c00; */
    background-color: #00c;
    text-align: center;
    color: #fff;
    font-size: 0.7em;
    padding: 15px 0;
}

/* ------------------------------------
            ABOUT
-------------------------------------*/
#about {
    background-color: #fff;
    margin-bottom: 1.5rem;
}

#about h5 {
    text-align: center;
    margin: 1.5rem 0;
    
}

 #about .col-text {
        margin-top: 2rem;
}

#about-text {
    padding: 0 2em;
    word-spacing: 0.3em;
}



 #about-text hr  {
    width: 85%;
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 153, 0), rgba(0, 0, 153, 0.75), rgba(0, 0, 153, 0));
    margin-top: 2em; 
} 

#about-text hr:last-child {
    margin-bottom: 2em;
}
     
}

@media (max-width:800px) {
     #about .col-text {
        margin-top: 1rem;
}


}

/* ------------------------------------
            SERVICES
-------------------------------------*/
#services {
    background-color: rgba(235, 238, 239, 0.5);
/*
    background-image: url("img/freight-truck.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
*/
/*
    padding-top: 1.5rem;
    padding-left: 1.5rem;
*/
    padding: 1.5rem;
}

#services ul li {
    list-style: none;
/*    text-transform: capitalize;*/
}


#services ul li:before {
     content: "\2605\00a0\00a0";

}

@media (max-width:767px) {
    #services ul {
    margin-bottom:  40px;

    }

}

#services h4 {
    color: #900;
    font-size: 120%;
    line-height: 2rem;
    
}


/* ------------------------------------
            REQUEST A QUOTE
-------------------------------------*/
#quote {
    text-align: center;
    padding: 1.5rem;
}

.btn-quote {
    background-color: #009;
    color: #fff;
    width: 30%;
    margin: 2em auto;
    transition: background-color 0.3s ease-in-out;
    
}

.btn-quote:hover {
    background-color: #00c;
/*
    color: #009;
    border: #009;
*/
      
}




/* ------------------------------------
            CONTACT
-------------------------------------*/
#contact {
    background-color: rgba(235, 238, 239, 0.5);
/*    padding: 1.5rem;*/
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}


#contact .title-underline {
    text-align: center;
}

#contact li {
    list-style: none;
    margin-top: 1.5rem;
    
}

#contact ul {
    padding-left: 0;
}

#contact p {
/*        padding-left: 40px;*/
    /* to match the padding added to li */
}

#email-list {
    padding-left: 0;
}

        
}

/* -------- Chevron icon ------------ */ 

.fa-chevron-up {
    text-align: center;
    color: #009;
    padding-top: 1rem;
}


/*-- contact us page ------ */

.container #contact-page {
    background-image: url(img/freight-truck5997252);
    height: 100vh; /* this set the height to 100% of the viewport */
    background-size: cover; 
    background-position: center;
    background-attachment: fixed; /* this makes the image fixed when we scroll */ 
    

    
}
/* -------------------------*/


/*--------------------------------------
            MEDIA QUERIES
--------------------------------------*/

@media (max-width: 767px) {
    
    #services {
        text-align: center;
    }
    #services ul {
        padding-left: 35%;
        text-align: left;
    }
    
    #about-text hr  {
        width: 80%;    
    }
    
}

@media (max-width:575px) {
    
    
    #about, #services, #contact, #contact h5 {
        text-align: center;
    }
    
    #about .col-text {
        margin-top: 2.5rem;
    }
    
    .btn-quote {
        width: 60%;
    }

    #contact h5 {
/*        margin-top: 2rem;*/
    }
    #services ul {
        padding-left: 20%;
        text-align: left;
        font-size: 95%;
    }
    
    
    
    
    #navigation {
        padding-top: 0;
    }
    
    #navigation ul li a {
        padding-top: 6px;
    }
    

}

@media (max-width:767px) {
    .img-truck {
        background-color: rgba(235, 238, 239, 0.5);
        
    }
}

/* will target small screen size only */
@media (min-width:576px) and (max-width:767px) {
    #contact .row {
        padding-left: 3%;
        padding-right: 3%;
    }
    
    
    #   services ul {
        padding-left: 40%;
        
    }
    
}

/* the logo and toggle button are too close to each other under 400px */
@media (max-width:400px) {
    .navbar-brand .img-fluid {
        max-width: 90%;
        height: auto;
    }
    
    .navbar-toggler {
        
        font-size: 1.4em;
    }
    
}


/* For large screen */
@media (min-width:992px) {
    #about-text p {
        margin-bottom: 1.5em; 
    }
    
}