body, 
    h4
    {
        font-family: "Lato", sans-serif;
        background-color: #EFEAE7;
    }

    body,
    html {
        height: 100%;
        color: #777;
        line-height: 1.8;
    }

    a {
        font-size: 1em;
    }
    p {
        font-size: 1.2em;
    }

    h3 {
        font-family: "Lato", sans-serif;
        font-size: 2.5em;
        font-weight: bolder;
        color: #A73957;
    }
    h1 {
        font-family: "Lato", sans-serif;
        font-size: 1.8em;
        font-weight: bolder;
    }
    h2 {
        font-family: "Lato", sans-serif;
        color: black;
        font-weight: bold;
    }

    h5 {
        font-family: "Lato", sans-serif;
        font-size: 1.4em;
        color: darkred;
    }
    h6 {
        font-family: "Lato", sans-serif;
        font-size: 1.6em;
        color: black;
        font-weight: 800;
        text-decoration: underline;
    }
    hr {
        height:0.2rem;
        border-width:0;
        color:red;
        background-color:darkgrey;
        margin-bottom: 5px;
        margin-top: 5px;
    }
    .txtctr {
        text-align: center;
    }

    .blk-high{
        color: black; 
        font-weight: bold;
    }
    .sml-bl{
        font-size: .8rem; 
        font-weight: bold;
    }


    .card-head {
        background-color: darkred;
        color: white;
        text-align: center;
        height: 100%;
    }
    .card-head2 {
        background-color: darkred;
        color: white;
        text-align: center;
        
    }
    

    .card-foot{
        background-color: #403d39;
        color: white;
        text-align: center;
    }
    .card-body {
        background: rgb(252,48,48);
        background: linear-gradient(0deg, rgba(150,20,20,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 40%, rgba(150,20,20,1) 100%); 
        color: black;
        margin-right: .8rem;
        margin-bottom: .8rem;
        

    }
    .card-b{
        background-color: #F9ECDC;
        color: black;
        text-align: left;
        margin-right: 3rem;
        margin-bottom: 20px;
        height: 25rem;
        


    }
    .card-d{
        background-color: #white;
        text-align: left;
        margin-right: 3rem;
        
    }

    .logo {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.6rem; 
        padding: 0.7rem; 
        color: darkred; 
        background-color: white;
        position: absolute;
        opacity: 1;
            bottom: 60%;
            left: 1.6%;
            border-radius: 1.5rem;
            border: solid;
            border-color: darkred;}
    
    .logo:hover {
        background-color: darkred;
        color: white;


    }

    .big_button {
        font-family: 'Abril Fatface', cursive;
        font-size: 1.6rem; 
        padding: 1%; 
        color: darkred; 
        background-color: whitesmoke;
        position: absolute;
        margin-left: 20%;
        opacity: 1;

            border-radius: 1.5rem;
            border: solid;
            border-color: darkred;}
    
    .big_button:hover {
        background-color: darkred;
        color: white;


    }

    .logo2 {
        background-color: white;
        opacity: .6;
        position: absolute;
            bottom: 5%;
            left: 1%;}
                    
    .red {
        color: darkred;
    }
    .top {
        margin-top: 4em;
    }

    .list {
        display: inline-flex;
        text-align: left;
    }
    /* Create a Parallax Effect */
    .bgimg-1,
    .bgimg-2,
    .bgimg-3 {
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('pics/para01.jpg');
        min-height: 100%;
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("pics/map.jpg");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("pics/learnerdriver.jpg");
        min-height: 400px;
    }

    .w3-wide {
        letter-spacing: 10px;
    }

    .w3-hover-opacity {
        cursor: pointer;
    }

    /* Turn off parallax scrolling for tablets and phones */
    @media only screen and (max-device-width: 1600px) {

        .bgimg-1,
        .bgimg-2,
        .bgimg-3 {
            background-attachment: scroll;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        }
    }


    .paycard {
        border-color: darkred; 
        border: dashed;
        width: 28rem;
        border-radius: 1rem; 
        border-width: .3rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
    }

    .paycard:hover { 
        border: solid;
        width: 28rem;
        border-radius: 1rem;
        border-width: .4rem; 
    }
    @media (max-width: 600px) {
        .paycard { 
        border: dashed;
        width: 22rem;
        border-radius: 1rem; 
        border-width: .3rem;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
    }
        .paycard:hover { 
            border: solid;
            width: 22rem;
            border-radius: 1rem;
            border-width: .4rem;
        }
    }

/* Form CSS starts form here */



/* Contact form style - Style inputs with type="text", select elements and textareas */
input[type=text], input[type=tel], select, textarea {
  width: 100%; /* Full width */
  padding: 1.2rem; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 0.25rem; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 0.3rem; /* Add a top margin */
  margin-bottom: 2rem; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: darkred;
  color: white;
  padding: 0.8rem 1.2rem;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: orangered;
}

/* Add a background color and some padding around the form */
.form {
  border-radius: 0.5rem;
  background-color: #e9d7c4;
  padding: 1.8rem;
  margin-bottom: 2rem;
}