@charset "UTF-8";

:root { 
    --primary: darkorange;
    --shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --text-shadow: 2px 3px 4px rgba(0,0,0,.5);
    --bg1: rgba(250,250,250, .5);
    --nav-height: 82px;
    --border-color: #dadce0;
}

.primary { color: var(--primary); }
.bg2 { background-color: rgba(249,249,246, 1); }
.bg1 { background-color: var(--bg1); }
.bi { margin-top: -3px; }


html, * { 
    -webkit-text-size-adjust: 100%; 
}

section { 
    border-bottom: 1px solid var(--border-color);
    padding-top: 4rem;
    padding-bottom: 4rem; 
}

h1, h2, h3, h4, h5, h6 { 
    color: var(--primary); 
}

a, a:hover, a:visited, a:active, a:focus, input, input:focus, input:active, textarea, textarea:focus, textarea:active, button:focus, button:active { 
    text-decoration: none; 
}

a { 
    transition: all .25s ease; 
}
    
a:hover { 
    
 }
 
 .bg-body-tertiary { background-color: transparent !important; }

li { list-style-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-check2-circle mr-1' fill='%23158364' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M15.354 2.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L8 9.293l6.646-6.647a.5.5 0 0 1 .708 0z'/><path fill-rule='evenodd' d='M8 2.5A5.5 5.5 0 1 0 13.5 8a.5.5 0 0 1 1 0 6.5 6.5 0 1 1-3.25-5.63.5.5 0 1 1-.5.865A5.472 5.472 0 0 0 8 2.5z'/></svg>"); }

.list-style-none { list-style: none; }

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center; }

/* ******************************************** Navigation ******************************************** */

header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: var(--bg1);
}

nav {
    display: flex;
    justify-content: space-between;
}

nav ul {
    display: flex;
}

.navbar-brand {
    margin-bottom: 0;
}

.nav-item { 
    list-style: none; 
}

.nav-link {
    display: inline;
    margin-left: 1rem;
    text-transform: uppercase;
}

.nav-link .bi { 
    width: 20px;
    height: 20px
 }

/* ******************************************** Content ******************************************** */

    
/* Landing */
#landing {
	background-image: url(../images/landing.jpg);
	background-position: center;
	background-size: cover;
}

#landing h2 { 
    text-align: center;
    text-transform: uppercase;
    font-weight: 400;
	margin-top: 0;
}

.logo-inner { max-width: 500px; }

.logo {
	width: 300px;
	height: auto;
}


.lic {
	text-align: center;
	max-width: 500px;
}

/* About*/
#about-pic {
	background-image: url(../images/about-pic.jpg);
	background-size: cover;
	background-position: center;
}


/* Services */
#services-pic {
	background-image: url(../images/services-pic.jpg);
	background-size: cover;
	background-position: center;
}

/* Slideshow */
.bd-placeholder-img {
	font-size: calc(1.475rem + 2.7vw);
	text-anchor: middle;
}

/* Contact */
#contact img {
	border-radius: .35rem;
}


/* Footer */
footer {
    padding-top: 2rem;
    padding-bottom: 2rem; 
}

footer h2 {
    font-size: 1rem;
    font-weight: normal;
    color: #000;
}


/* ******************************************** REPONSIVE ******************************************** */

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (max-width: 767px) { 
	.order2 { order: 2; }
	
	section {
        padding-top: 2rem;
        padding-bottom: 2rem; 
    }
    
    nav {
        flex-direction: column;
        justify-content: center;
    }
    
    nav ul {
        padding: 0;
    }
    
    .nav-item  { 
        text-align: center;
        margin-top: 1rem;
        margin-left: 0;
    }
    
    .nav-link .bi { 
        width: 26px;
        height: 26px
     }
	 
	 .logo {
		width: 300px !important;
		height: 336px !important;
	 }
	 
	 #about-pic { 
		order: 1;
		height: 200px;
		margin-top: -2rem;
	 }
	 
	 #about h2, #services h2 { margin-top: 1rem; }
	 
	 #services-pic {
		height: 200px;
		margin-top: -2rem;
	 }
}