*{
    margin: 0;
    box-sizing: border-box;
}
:root {
    --bodyback: #eee;
    --mainback: #fff;

    --maincolor: #fff;
    --seccolor: #787878;

    --borcolor:#ccc;

    --boxsh:rgba(0,0,0,0.6);
    --links:#fff;

    --bottums:rgba(0,0,0,0.5);
    --botcolor:#fff;
    --botback:#800000;

    --hover:linear-gradient(135deg,#1e1e2f,#2c2c54) !important;
    --overlay:rgba(0,0,0,0.3);

}
/* Hero */
.hero {
    background: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab') center/cover;
    height: 36vh;
    display: flex;
    align-items: center;
    color: white;
}
.hero-overlay {
    background: rgba(0,0,0,0.3);
    width: 100%;
    height: 36vh;
    padding: 40px;
}
.hero-overlay h1
{
    color: var(--seccolor);
    margin-top: 40px;
}
/* Filter */
.nav-pills
{
    width: 100%;

}
.nav-pills li
{
    width: 100px;
    text-align: center;
    display: inline-block;
    margin: 1px 3px;
}
.nav-pills li a
{
    margin: 7px;
   color: #fff;
    border-radius: 7px;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 1px 5px 7px var(--overlay);
    border:1px solid var(--borcolor);
    color: var(--maincolor);
    background: var(--hover);
}

.nav-pills .active 
{   
   
}

/* Cards */
.project-card {
    transition: 0.3s;
    box-shadow: 1px 5px 7px var(--overlay);
}
.project-card img
{
    height: 25vh;
}
.project-card h5
{
    margin:5px 0px 20px 10px;
}
.btn-cio
{
    font-weight: bold;
    color: var(--primary);

}
.project-card:hover {
    transform: scale(1.03);
}
.project-card input{
    width: 96%;
    margin: 1px 2%;
    text-align: center;
    background: var(--botback);
}

/* Map */
.map iframe {
    width: 100%;
    height: 300px;
    border: 0;
    border-radius: 10px;
}

@media(max-width: 767px)
{
    .nav-item {
        width: 100px;
       display: block;
      
    }
    .nav-item a{
        padding: 10px;
        width: 110px;
       display: block;
       color: #fff;
    }
}