/*
::Table Of Contents

1.) Global Settings And Bootstrap Overwrite
    1.1) Global Typography
    1.2) Bootstrap Overwrites
    1.3) Color Theme
2.) Header Section Style
    2.1) Main Navigation
    2.2) Sub Menu Implementation
    2.3) Toggle Menu Animation
3.) Footer Section Style
4.) Content Area Style
5.) Media Query Conditions
=========================================================*/

/*
1.) Global Settings And Bootstrap Overwrite
=========================================================*/
a {color:#04b46d}
*:focus {
    outline: none;
}
#header *, #header *::after, #header *::before {
    transition: all 0.3s;
}
    /*
    1.1) Global Typography
    =====================================================*/
    html {
        font-size:18px;
    }
    body {
        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;
        color: #999;
    }
    h1, h2, h3, h4, h5, h6, #header, .commonBannerContent p, .btn {
        font-family: 'Quicksand', sans-serif;
    }
    .subMenu a {
        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, h3, h4, h5, h6, #header, .commonBannerContent p, .btn {
        font-weight: 700;
    }
    h1, h2, h3, h4, h5, h6, p {
        margin-bottom: 1.8rem;
    }
    #header, blockquote {
        font-size: 1.33rem;
    }
    .commonBannerContent p {
        font-size:1.5rem;
    }
    /*
    1.2) Bootstrap Overwrites
    =====================================================*/
    .container {
        max-width: 1200px;
        width:100%;
    }
    .btn {
        display: inline-block;
        vertical-align: middle;
        border:2px solid;
        border-radius:50rem;
        text-transform: uppercase;
        padding:0.5rem 2rem;
        position: relative;
        overflow: hidden;
        transition: color 0.3s;
        transform: perspective(1px) translateZ(0);
    }
    .btn::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: scaleX(0);
        transform-origin: 0 50%;
        transition: transform ease-out 0.3s;
    }
    .btn:hover::before, .btn:focus::before, .btn:active::before {
        transform: scaleX(1);
    }
    #header ul, .list-unstyled {
        list-style: none;
        margin:0;
        padding:0;
    }
    #header a, #footer a {
        text-decoration: none;
    }
    /*
    1.3) Color Theme
    =====================================================*/
    .navbar, .subMenu {
        background-color:#fff;
    }
    .animatedIcon span, .navbar-nav >li:hover > a::after, .navbar-nav > li > a.active::after, .btn::before, .navbar-nav > li.current-menu-item page_item > a::after {
        background-color: #04b46d !important;
    }
    #footer {
        background-color:#e8e8e8;
    }
    .subMenu a, #footer a {
        color: #999;
    }
    h1, h2, h3, h4, h5, h6, .btn, .navbar-nav > li > a, .subMenu a:hover, .navbar-nav > li > i, #footer a:hover, .testimonialWrapper i {
        color: #04b46d;
    }
    .commonBannerContent p, .btn:hover, .btn:focus {
        color:#fff;
    }
    .navbar-nav > li > i, .navbar-nav, #footer, .commonBanner,  .img-rounded, .btn {
        border-color: #04b46d !important;
    }
/*
2.) Header Section Style
=========================================================*/
#header {
    text-transform: uppercase;
    position: relative;
    z-index: 10;
}
.navbar {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    padding-bottom: 0;
    width:100%;
    position: fixed;
    left:0;
    top:0;
}
.navbar-brand img {
    width: 208px;
    margin-bottom: 0.5rem;
}
.stickyHeader .navbar-brand img {
    width: 104px;
}
    /*
    2.1.) Main Navigation
    =====================================================*/
    .navbar-toggler {
        border: none;
        padding:0;
    }
    .navbar-nav {
        border-top:3px solid;
    }
    .navbar-collapse {
        align-self: flex-end;
    }
    .navbar-nav > li, .navbar-nav > li > a {
        position: relative;
    }
    .navbar-nav > li > a {
        padding:0.5rem 0rem;
        display: block;
    }
    .navbar-nav > li > a::after {
        content: '';
        width: 0;
        height: 3px;
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .navbar-nav > li:hover > a::after, .navbar-nav > li > a.active::after {
        width: 100%;
    }
    .navbar-nav > li > i {
        font-size: 1rem;
        width: 25px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 15px;
        cursor: pointer;
        border: 3px solid;
    }
    .navbar-nav > li > i.active {
        transform: rotate(-225deg);
    }
    /*
    2.2) Sub Menu Implementation
    =====================================================*/
    .subMenu {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 0;
    }
    .subMenu a {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #f0f0f0;
        display: block;
        white-space: nowrap;
        font-weight: 400;
        text-transform: uppercase;
    }
    .subMenu.expanded {
        height: 108px;
    }
    /*
    2.3) 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%;
    }
/*
3.) Footer Section Style
=========================================================*/
#footer {
    border-top:7px solid;
    text-align: center;
}
/*
4.) Content Area Style
=========================================================*/
main {
    padding-top:168px;
}
.commonBanner {
    border-top:7px solid;
    border-bottom:7px solid;
    position: relative;
}
.commonBanner img {
    object-fit: cover;
    min-height: 200px;
}
.commonBannerContent {
    position: absolute;
    top:70%;
  left:50%;
  transform: translate(-50%,-70%);
  text-align:center;  
}
.commonBannerContent p {
    text-shadow:0 0 2px rgba(0, 0, 0, 0.9);
    line-height: 1;
}
.commonBannerContent span {
    font-size: 1.2rem;
    display: block;
}
/* Home Page Content */
.introContentWrapper {
    width: 100%;
    max-width: 800px;
    margin:0 auto;
}
.captionContent {
    width:100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    padding:1rem;
    backface-visibility: hidden;
    opacity: 0;
    transition: all ease-in-out 0.35s;
    transform: translateX(100%);
    cursor: pointer;
}
.owl-item > div:hover > .captionContent {
    transform: translateX(0);
    opacity: 1;
}
.captionContent * {
    color:#fff !important;
}
.captionContent .btn {
    width:212px;
    margin-bottom: 1rem;
    border-color:#fff !important;
}
.captionContent .btn:hover, .captionContent .btn:focus, .captionContent .btn:active {
    border-color:#04b46d !important;
}
.testimonial {
    text-align: center;
}
.testimonial img {
    width:142px;
    height: 142px;
}
.testimonialWrapper {
    max-width: 800px;
    width:100%;
    margin:0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-style: italic;
}
.testimonialWrapper i {
    font-size:3rem;
}
.testimonialWrapper p {
    font-size: 1.4rem;
    margin-bottom: 1rem;
}
.testimonialWrapper footer {
    font-style: normal;
    font-weight: 700;
}
/* About Us Content */
.aboutContent {
    text-align: center;
}
.img-rounded {
    border:7px solid;
    margin-bottom: 1.8rem;
}
/*
5.) Media Query Conditions
=========================================================*/
@media only screen and (min-width:768px) {
    .commonBannerContent p {
        font-size:3.33rem;
    }
    .commonBannerContent span {
        font-size:2.65rem;
    }
    .aboutContent {
        text-align: left;
    }
    .featuredImageWrapper {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
    }
}
@media only screen and (min-width:992px) {
    .navbar-nav {
        border-top: none;
    }
    .navbar-nav > li {
        margin-left: 1.5rem;
        padding-bottom: 15px;
    }
    .navbar-nav > li > a {
        text-transform: lowercase;
    }
    .navbar-nav > li > i {
        display: none;
    }
    .subMenu {
        position: absolute;
        top:65px;
        left: 0;
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
        margin-top: 10px;
        border-radius: 0.25rem;
        opacity: 0;
        height: auto;
        overflow: visible;
        transform: translateY(80px);
    }
    .navbar-nav > li:hover > .subMenu {
        transform: translateY(0);
        opacity: 1;
    }
    .subMenu > li:first-child {
        border-radius: 0.25rem 0.25rem 0 0;
    }
    .subMenu > li:last-child {
        border-radius: 0 0 0.25rem 0.25rem;
    }
    .subMenu::after, .subMenu::before {
        content: '';
        position: absolute;
        pointer-events: none;
        display: block;
    }
    .subMenu::after {
        width: 0;
        height: 0;
        top: -19px;
        left: 20px;
        border: 10px solid;
        border-color: transparent transparent white transparent;
        margin-left: -10px;
        z-index: 100;
    }
    .subMenu::before {
        width: 10px;
        height: 10px;
        top: -20px;
        left: 14px;
        top: -6px;
        z-index: -1;
        transform: rotate(-45deg);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.3);
    }
    .subMenu li {
        background-color: #fff;
    }
    .subMenu>li:last-child > a {
        border-bottom: none;
    }
}
@media only screen and (min-width:1200px) {
    .testimonialWrapper blockquote {
        width:79%;
    }
}
@media only screen and (max-width:767px) {
.commonBannerContent {
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%,-78%);
    min-width: 320px;
 }
}