body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height:1.5;
    padding: 0;
    margin: 0;
    background-color: gainsboro;


}

.container{
    width: 80%;
    margin: auto;
    overflow: hidden;
    align-items: center;
}



.slideshow img{
    max-width: 100%;
    background-size: contain;
}

.main-info{
    align-items:center;
    color: white;
    background-color: #f26624;
    justify-content: space-between;
    height: fit-content;
    margin: auto;
    padding-top: 0;

}

.main-info ul {
    list-style: none;
    background: #f26624;
    padding: 0;
    text-align: center;
    margin: 0;
}

.main-info li{
    display: inline-block;
    list-style: none;
}

.main-info img{
    padding-right:10px}
/*header**/

header{
    background: #000000;
    color:#ffffff;
    padding-top: 20px;
    min-height: 50px;
    border-bottom: #f26624 5px solid;
}

p {
    color:black;
}

h3 {
    color:black;
}

header a{
    color:#ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;

}

header ul{
    padding: initial;
    margin: 0 0 auto;
}

header{
    padding-bottom: 5px; }

header li{
    float:left;
    display:block;
    padding: 0 0 0 0;
    margin-top: 20px;
}
.branding img{
    align-items: center;
    float: right;
    margin-bottom: 0;

}
header #branding{
    float: left;
    margin-left: 2px; margin-right: auto;}

header #branding img{
    display:inline-block;
    width: 340px;
}
nav ul{
    display:inline-block;
    float: right;
    margin-right: 20px;
    margin-bottom: 20px;
}

nav ul li {
    display:inline-block;
    line-height: 40px;
    margin: 0 5px}


header nav{
    float: right;
    margin-top: 50px;
}

header .current a{
    color:#f26624;
    font-weight: bold;
}

header a:hover{
    color: gray;
    font-weight: bold;
}

/*services*/

ul#services li{
    list-style: none;
    padding: 0;}

.main-info ul li {
    padding: 0 10px;
}
.main-info ul a{
    text-decoration: none;
    color:white;
}

.success {background-color: darkorange}
/*showcase**/

#showcase{
    min-height: 200px;
    text-align: right;
    color:#ffffff;
}

#showcaseserv{
    min-height: 400px;
}

#showcaseserv{
    background: url("./img/services.jpg") no-repeat 0 -200px;
}

#showcase h1{
    margin-top:100px;
    font-size:55px;
}

.slideshow-container{
    max-height: 400px;
}

.mySlides .fade {
    max-height: 100px;
}


/*boxes*/

#boxes{
    margin-top: 20px;
}

#boxes .box {
    float: left;
    text-align: center;
    width: 30%;
}


/*sidebar*/

aside#sidebar{
    float:right;
    display: block;
}

/*main-col*/
article#main-col{
    float:left;
    width: 75%
}

.area h3{
    text-align: center;
}

aside#sidepic {
    float:right;
    width: 30%;
    margin-top: 10px;
}

aside#sidepic img{
    width: 70%;
}

article#main-col{
    float: left;
    width: 65%;
}

.call {
    background-color: gray;
    padding: 10px;
    text-align: center;
}

.call h1 {
    color:white;

}

.insta{
    background-color: white;
}

footer {
    padding: 20px;
    margin-top: 20px;
    color: red;
    background-color: #f26624;
    text-align: center;
}

footer p{
    color:white;
}

/*meida queries*/
@media(max-width: 768px) {
    header  .container .branding img,
    header nav li,
    #boxes .box,
    .call,
    header nav,
    aside#sidebar,
    article#main-col,
    aside#sidepic img,
    aside#sidepic {
        float:none;
        text-align: center;
        width: 100%;
    }

    {
    width: 50%;}
}