body {
    background:url('https://drvodekorenterijer.rs/wp-content/uploads/2021/04/bg-1.jpg');
    overflow-x:hidden !important;
}
a {
    color:#008361;
}
a:hover {
    color:#008361;

}
p a:hover {
    text-decoration:underline !important;
}

	.topbar {
	    padding-left:8%;
	}
	.topbar img {
	    width:10%;
	}

/* header */
header {
    background-color:#2F4858;
    padding-right:8%;
    padding-left:8%;
    color:white;
}
header .header-caption {
    padding-bottom:10%;
    padding-top:10%;
}
.header-caption h1 {
    text-transform:uppercase;
    font-size:200%;
}
hr {
    background-color:#fff;
}
.btn-primary {
    background-color:#AB7442;
    border-color:#AB7442;
    font-size:150%;
}
.btn-primary:hover {
    background-color:white;
    color:#AB7442;
    
}
a:hover {
    text-decoration:none;
}
/* header */

section {
    padding-bottom:2%;
    padding-top:2%;
}
.services-card {
    padding-right:3%;
    padding-left:3%;
}
.zasto {
    background-color:white;
    margin-top:-5%;
    padding:2%;
}
.jumbotron {
    background-color:#008361;
    text-align:center;
    color:white;
    margin:0%;
}
.proces {
    padding:2%;
    background-color:white;
}
.proces span {
    color:#AB7442;
    font-weight:700;
}
.proces img {
    width:100%;
}

 li::after {
content: '';
position: absolute;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' viewBox='0 0 32 32' focusable='false'%3E%3Ccircle stroke='none' fill='brown' cx='16' cy='16' r='10'%3E%3C/circle%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
left: 0;
top: 2px;
width: 12px;
height: 12px;
}

/* No normal bullets please */
ul {
list-style-type: none;
}

.proces li {
/* You need to turn on relative positioning so the line is placed relative to the item rather than absolutely on the page */
position: relative;

/* Use padding to space things out rather than margins as the line would get broken up otherwise */
margin: 0;
padding-bottom: 1em;
padding-left: 20px;
}

/* The actual line being placed before each list item, tweak width and color as appropriate */
.proces li:before {
background-color: #AB7442;
width: 2px;
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 5px;
}

/* Start the line further down on the first list item */
.proces li:first-child:before { top: 15px;  }

/* Stop the line short on the final list item */
.proces li:last-child:before { height: 6px; }

/* Styles for the SVG bullet points */
.proces .bullet { margin-left: -20px; width: 12px; fill: black; float: left; padding-right: 10px }
.proces .bullet.big { width: 16px; margin-left: -22px; padding-right: 8px }

.proces a { color: #06e; }
.services-card {
text-align:center;
padding-top:1%;
}
.card {
background-image: linear-gradient(#008361, #70AC64);
}
.services-card i {
font-size:800%;
color:white;
padding:4%;
}
.services-card .card {
width:17rem;
color:white;
}

footer {
    background-color:#008361;
    margin:0%;
    padding:5px;
    text-align:center;
    color:white;
}
footer a {
    color:#fff;
}
footer a:hover {
    color:#AB7442 !important;
}

@media (max-width: 1600px) {
    .services-card .card {
        width:10rem;
    }
    .services-card i {
        font-size:600%;
        
    }
}
@media (max-width: 1250px) {
    .btn-primary {
        font-size:100%;
    }
    .header-caption h1 {
        font-size:150%;
    }
    .header-caption p {
        font-size:90%;
    }
    body {
        font-size:90%;
    }
}
@media (max-width:1140px) {
    .services-card .card {
        width:17rem;
        margin-bottom:3%;
    }
    	.btn-primary {
	    margin-bottom:10px;
	}
}

@media screen and (max-width: 720px) {
    .topbar img {
	    width:35%;
	}
	header {
        background-image:url('../img/house-mobile.png');
    }
    .proces img {
        width:60%;
    }
    .proces .col-md-4 {
        text-align:center;
        margin-bottom:20px;
    }
}