/*
::Table Of Contents

1.) Bootstrap Overwrites And Global Components
2.) Global Typography
3.) Color Theme
4.) Header Section Style
    2.1) Toggle Menu Animation
5.) Content Area Style
6.) Media Query Conditions
=========================================================*/

/*
1.) Bootstrap Overwrites And Global Components
=========================================================*/
html {
    font-size:16px;
}
a {
    color: inherit
}
a, button, input, textarea, a::before, a::after {
    transition: all linear 0.3s;
}
button:focus, input:focus, textarea:focus, .form-control:focus, .btn:focus {
    outline: none;
    box-shadow: none;
}
.container {
    max-width: 1200px;
    width:100%;
}
.btn {
    font-weight: 700;
    text-transform: uppercase;
    padding:0.5rem 1rem;
    border: none;
    color:#fff;
    border-radius: 30px;
}
.hvr-bounce-to-right {
	display: inline-block;
	vertical-align: middle;
	transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
	position: relative;
    transition: color 0.5s;
    overflow: hidden;
}
.hvr-bounce-to-right::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #1b75bc;
	transform: scaleX(0);
	transform-origin: 0 50%;
    transition: transform ease-out 0.5s;
    border-radius: 30px;
}
.hvr-bounce-to-right:hover::before, .hvr-bounce-to-right:focus::before, .hvr-bounce-to-right:active::before {
	transform: scaleX(1);
	transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.form-control {
    border-radius: 0;
}
textarea.form-control {
    height: 105px;
}
.form-control::placeholder {
    color: inherit
}
/*
2.) Global Typography
=========================================================*/
body {
    font-family: 'Roboto', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", sans-serif;
}
#header {
    font-family: 'Open Sans', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji", sans-serif;
}
h1, h2 {
    font-family: 'Libre Baskerville', serif;
    
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 1.5rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 400;
}
h2 {
    font-size:2.25rem;
}
h3 {
    font-size: 2rem;
   
	margin-top:2.5rem;
}
.serviceCategory  h3, .page-template-template-home h3{ margin-top:0px;}
h4 {
    border-bottom:2px solid;
    padding-bottom: 0.5rem;
   }
/*
3.) Color Theme
=========================================================*/
body, .sideBar .latestNews a {
    color:#666;
}
h1, h2 {
    color:#1b75bc;
}
.nav-link:focus, .nav-link:hover, .navbar-nav > li > a.active, h4, .sideBar .latestNews a:hover, .sideBar .latestNews a:focus {
    color:#be1e2d;
}
.btnCustom:hover, .btnCustom:focus, .btnCustom:active, .introText p, .latestNews a {
    color:#fff;
}
.animatedIcon span, .navbar-nav > li > a:hover::after, .navbar-nav > li > a:focus::after, .navbar-nav > li > a.active::after, .btnCustom, .contactInfo {
    background-color: #be1e2d;
}
.serviceCategory, .sideBar {
    background-color:#f2f2f2;
}
.serviceCategory > span, h4 {
    border-color:#be1e2d !important;
}
/*
4.) Header Section Style
=========================================================*/
#header {
    position: relative;
    z-index: 999;
    font-weight: 700;
}
.navbar {
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
.navbar.expanded {
    padding-bottom: 33px;
}
.navbar-brand {
   transform: translateY(42px)
}
.navbar-collapse {
    transform: translateY(33px);
}
.navbar .nav-link {
    position: relative;
    padding:1.25rem 0rem;
}
.navbar .nav-link::after {
    content: '';
    width: 0;
    height: 4px;
    position: absolute;
    left:0;
    bottom: 0;
    background-color: transparent;
}
.navbar-nav > li > a:hover::after, .navbar-nav > li > a:focus::after, .navbar-nav > li > a.active::after {
    width:100%;
}
    /*
    2.1) Toggle Menu Animation
    =====================================================*/
    .animatedIcon {
        width: 30px;
        height: 20px;
        position: relative;
        margin: 0px;
        transform: rotate(0deg);
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    .animatedIcon span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    .animatedIcon span:nth-child(1) {
        top: 0px;
    }
    .animatedIcon span:nth-child(2), .animatedIcon span:nth-child(3) {
        top: 10px;
    }
    .animatedIcon span:nth-child(4) {
        top: 20px;
    }
    .animatedIcon.open span:nth-child(1) {
        top: 11px;
        width: 0%;
        left: 50%;
    }
    .animatedIcon.open span:nth-child(2) {
        transform: rotate(45deg);
    }
    .animatedIcon.open span:nth-child(3) {
        transform: rotate(-45deg);
    }
    .animatedIcon.open span:nth-child(4) {
        top: 11px;
        width: 0%;
        left: 50%;
    }

/*
5.) Content Area Style
=========================================================*/
#content {
    border-bottom: 1px solid #eee;
}
.landingSection {
    position: relative;
}
.landingSection > img {
    min-height: 300px;
    object-fit: cover;
}
.introText {
    position: absolute;
    left:0;
    bottom:20px;
    transform:20px;
    width:100%;
    background:none;
}
.introText p {
    font-size:1.25rem;
    line-height: 1.1;
    margin:0;
 }
.serviceCategory > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 172px;
    height: 172px;
    border:10px solid;
    border-radius:50%;
    padding:0.5rem;
    margin:0 auto 2rem;
}
.featuredContentWrapper {
    align-items: center;
}
.featuredContentWrapper img {
    width:100%;
}
.featuredContentWrapper > div:first-child > div {
    text-align: center;
    padding:0 1rem;
    margin-bottom: 3rem;
}
.featuredContent > div > .featuredContentWrapper:nth-child(odd) > div:first-child > div {
    margin-left: auto;
    margin-right: 0;
}
.featuredContent > div > .featuredContentWrapper:nth-child(even) > div:first-child > div {
    margin-right: auto;
    margin-left: 0;
}
.featuredContent > div > .featuredContentWrapper > div:first-child {
    display: flex;
}
.featuredContent p {
    margin-bottom: 2rem;
}
.latestNews {
    margin:0;
    padding:0;
    list-style: none;
}
.latestNews li {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.sideBar {
    height: 100%;
    padding:1rem;
}
.sideBar .latestNews li {
    border-bottom: 1px solid #999;
}
.sideBar .latestNews a:hover, .sideBar .latestNews a:focus {
    text-decoration: none;
}
.sideBar .latestNews > li:last-child {
    border-bottom: none;
}
.commonBanner > img {
    height: 250px;
    object-fit: cover;
    width:100%;
}
/*
6.) Media Query Conditions
=========================================================*/
@media only screen and (min-width:768px) and (max-width:991px) {
    .introText {
        background: none;
    }
}
@media only screen and (min-width:992px) and (max-width:1199px) {
    .introText {
       background: none;
    }
}
@media only screen and (min-width:768px) {
    .introText p {
        font-size:1.70rem;
		text-align: center;
    }
}
@media only screen and (min-width:1200px) {
    .navbar-expand-xl .navbar-nav .nav-item {
        margin-left:1.5rem;
    }
    .navbar-expand-xl .navbar-nav .nav-link {
        padding:1.25rem 0;
    }
    .introText {
        background:none;
        bottom:70px;
    }
    .featuredContent > div > .featuredContentWrapper:nth-child(even) > div:first-child {
        order: 1;
    }
    .featuredContent > div > .featuredContentWrapper:nth-child(even) > div:last-child {
        order: -1;
    }
    .featuredContentWrapper > div:first-child > div {
        max-width: 600px;
        padding:2.75rem;
        margin-bottom: 0rem;
    }
    .serviceCategory {
        height: 100%;
    }
}
@media only screen and (max-width:767px) {
    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1.25rem;
    }
}