/*
    Overall CSS
 */

h1{
    font-family: 'open_sansextrabold', sans-serif !important;
}
h2, h3, h4, label{
    font-family: 'open_sansbold', sans-serif !important;
}
p{
    font-family: 'open_sansregular', sans-serif !important;
}

h1, h2, h3, h4, h5, p, ul, li{
    color: #3b5ea9;
}

.lightblue p,
.lightblue h1,
.lightblue h2,
.lightblue h3,
.lightblue h4,
.lightblue h5,
.lightblue ul,
.lightblue li,
.services-link h3,
.project h3,
.project p,
.service h2,
.service p,
#about-wpcontent p,
#about-wpcontent h1,
#about-wpcontent h2,
#about-wpcontent h3,
#about-wpcontent h4,
#about-sections .section p,
#about-sections .section h1,
#about-sections .section h2,
#about-sections .section ul li

{
    color: #fff;
}

ul {
    list-style-type: disc;
}


.pad-right-none{
    padding-right: 0;
}

.pad-left-none{
    padding-left: 0;
}

#quickContact {
    background: #3b5ea9;
    text-align: right;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
}

#quickContact h3{
    display: inline-block;
    padding-left: 20px;
    color: #fff;
    font-family: 'open_sansregular', sans-serif !important;
}

#quickContact h3 span{
    font-family: 'open_sansbold', sans-serif !important;
}

#quickContact h3 span{
    font-weight: 700
}

#MainNav {
    background-color: rgb(255, 255, 255) !important;
    border: none;
    box-shadow: none;
    text-transform: uppercase;
    padding-top: 8px;
}

#MainNav li a {
    color: #3b5ea9;
}

#MainNav li.active a {
    font-weight: 600;
}

#banner-bar{
    padding-top: 10px;
    padding-bottom: 10px;
    
    position: fixed;
    width: 100%;
    z-index: 100;
    background: #fff;
    top: 50px;
}

/* Custom CSS for hover dropdowns */
@media (min-width: 768px) { /* Adjust this breakpoint if your mobile menu toggle is at a different width */
    .navbar-nav li.dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0; /* Ensures the dropdown menu is directly below the parent */
    }

    /* Optional: Ensure the main link doesn't look like a button */
    .navbar-nav li.dropdown > a.dropdown-toggle-link {
        cursor: pointer; /* Keep pointer cursor */
    }

    /* Optional: Hide the caret-only-toggle on desktop screens if you only want hover dropdowns 
    .navbar-nav li.dropdown > a.caret-only-toggle {
        display: none;
    }*/

    /* If you still want a visual indicator for dropdown on hover, but no separate click */
    /* You might want to remove the caret-only-toggle entirely from the PHP for desktop */
    /* Or just style it to be less obtrusive, e.g., using a CSS pseudo-element for the caret. */
}

.navbar {
    border: none;
    background: transparent;
}

.navbar-nav{
    float: right;
}

h3.nav-contact-bar{
    font-size: 2.212rem;
}

#MainNav li.active a {
    background: none !important;
}

#MainNav li.active::after {
    content: '';
    display: inline-block;
    width: 100%;
    background: #3b5ea9;
    height: 5px;
    text-align: center;
    left: 0%;
    position: absolute;
    bottom: 2px;
}

#MainNav li:hover::after {
    content: '';
    display: inline-block;
    width: 100%;
    background: #3b5ea9;
    height: 5px;
    text-align: center;
    left: 0%;
    position: absolute;
    bottom: 2px;
}

#page-services {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    text-align: center;
}

#page-services .service {
    width: 16.4%;
    display: inline-block;
    background: #3b5ea9;
    text-align: center;
    padding: 0;
}

#page-services .service .services-link {
    color: #fff;
    text-transform: uppercase;
    height: 100%;
    padding: 10px;
    display: block;
    padding: 40px 0;
}

#page-services .service .services-link h3 {
    padding: 0;
    margin: 0;
}

#page-services .service .services-link:hover{
    color: #fff;
    text-decoration: none;
    padding-top: 50px;
}

#banner-image {
    height: 650px;
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 5px solid #3b5ea9;
}

.container-fluid.lightblue {
    background: #758ec2;
    color: #fff;
}

footer {
    background-color: #3b5ea9;
    color: #fff;
    padding: 30px !important;
    margin: 0 !important;
}

footer a{
    color: #95cdf2;
}

footer a:hover{
    color: #fff
}

body{
    padding: 140px 0 0 0 !important;
}

/*
    HomePage Template
 */

#home-content h1{
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
}

#home-contact {
    background: url('../images/projects-image.jpg');
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center left;
    border-top: 5px solid #3b5ea9;
    border-bottom: 5px solid #3b5ea9;
    position: relative;
}

#contact-form {
    background: #fff;
}

#contact-form input, #contact-form select {
    padding: 20px;
    box-shadow: none;
    border: 1px solid #3b5ea9;
    color: #3b5ea9;
}

#contact-form input[type=submit]{
    padding: 10px 40px;
    background: #3b5ea9;
    color: #fff;
}

#contact-form .gform_body li{
    padding: 10px 0;
}

#contact-form label{
    font-size: 1.2em;
    color: #3b5ea9
}

#home-details #gallery-images .item {
    height: 100px;
    background-size: cover;
    background-position: center;
}

#home-details #gallery-images .row{
    padding-bottom: 20px
}

#home-details h2{
    color: #3b5ea9;
    font-weight: 500;
}

#home-details ul li {
    list-style-type: disc;
    color: #3b5ea9;
}

#home-details ul {
    padding-left: 20px;
}

#home-details #block-details::after {
    content: '';
    height: 100%;
    width: 1px;
    background: #3b5ea9;
    position: absolute;
    top: 40px;
    right: 0;
}

#home-projects{
    position: inherit;
}

#home-projects #content {
    position: absolute;
    bottom: 10px;
}

#home-projects #content h3 {
    color: #3b5ea9;
}

#home-projects #content a {
    background-color: #3b5ea9;
    color: #fff;
    padding: 10px 100px 10px 15px;
    text-align: left;
    position: relative;
    border-radius: 0;
    font-family: 'open_sansbold';
    border: 0;
    transition: ease all 0.5s;
}

#home-projects #content a::after{
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    border: 8px solid transparent;
    border-width: 8px 12px;
    border-left-color: #ffffff;
    margin-top: -8px;
    background: transparent;
}

#home-projects #content a:hover{
    margin-left: 10px;
    transition: ease all 0.5s;
    color: #fff;
    border: 0;
}

/*
    About Page
 */

#about-wpcontent {
    background: rgba(59, 94, 169, 0.7);
    color: #fff;
    padding-bottom: 30px;
}

#about-wpcontent h1{
    text-align: center;
    padding-top: 40px;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 20px;
}

#about-sections .section{
    color: #fff;
    padding: 20px;
}

#about-sections .section .content{
    padding: 30px;
    min-height: 385px;
}

#about-sections .section .content h2{
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5em;
    margin-bottom: 15px;
    font-weight: 700;
}

#about-sections .section.col-md-12 .content h2{
    text-align: left;
}

#about-sections .section:nth-child(1) .content {
    background: #3b5ea9;
}

#about-sections .section:nth-child(2) .content {
    background: rgba(59, 94, 169, 0.8);
}

#about-sections .section:nth-child(3) .content {
    background: rgba(59, 94, 169, 0.6);
}

#about-sections .section .content ul {
    list-style-type: disc;
}

/*
    Services Page
 */

#services-list .content {
    height: 300px;
    background-size: cover;
    position: relative;
    margin-bottom: 20px;
}

#services-list .content h2 {
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: rgba(59, 94, 169, 0.5);
    margin: 0;
    padding:  30px;
}

#services-list .content:hover h2{
    background: #3b5ea9;
    padding: 60px;
}

#services-list .content h2 {
    color: #fff;
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    background: rgba(59, 94, 169, 0.5);
    margin: 0;
    padding: 30px 0;
    transition: ease all 0.5s;
    text-transform: uppercase;
    font-weight: 700;
}

#services-list .content:hover h2{
    background: #3b5ea9;
    padding: 60px 0;
    transition: ease all 0.5s;
}

#services-content h1 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 60px;
    margin-bottom: 15px;
}

#services-content{
    padding-bottom: 50px;
}

/*
    Single Service Page
 */

#single-service hr {
    margin: 40px 0;
    border-top: 4px solid #3b5ea9;
}

#single-service{
    margin-top: 60px;
}

#single-service h2{
    text-align: center;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 15px;
}

#service-content2 {
    position: relative;
}

#service-content2 .container-fluid #cont{
    background: white;
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0 100%);
}

#service-content2 .carousel {
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

#service-content2 .carousel .item{
    height: 100%;
    background-position: right center;
    background-size: 70%;
    background-repeat: no-repeat;
}

#service-content2 .carousel-inner {
    position: relative;
    height: 100%;
}

#service-content2 .container-fluid {
    padding-left: 0;
}

/*
    Projects - Posts
 */

.project{
    height: 250px;
    background-size: cover;
    background-position: center;
}

.project.first{
    height: 500px;
}

.project .right {
    background: rgba(59, 94, 169, 0.7);
    color: #fff;
    height: 250px;
    padding: 20px;
}

.project.first .right {
    height: 500px;
    background: #3b5ea9;
}

.project .button{
    position: absolute;
    bottom: 20px;
}

.project .button .btn {
    background-color: #3b5ea9;
    color: #fff;
    border-radius: 0;
    padding: 3px 60px;
    font-weight: 700;
    transition: ease all 0.5s;
}

.project.first .button .btn {
    background-color: #fff;
    color: #3b5ea9;
    padding: 10px 100px 10px 15px;
    text-align: left;
    position: relative;
}

.project.first .button .btn::after{
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    border: 8px solid transparent;
    border-width: 8px 12px;
    border-left-color: #3b5ea9;
    margin-top: -8px;
    background: transparent;
}

.project .button .btn:hover{
    margin-left: 10px;
    transition: ease all 0.5s;
    color: #fff;
}

.project.first .button .btn:hover{
    color: #3b5ea9;
}

.project #tags a {
    color: #fff;
}

.project.first span {
    font-weight: 600;
}

#projects-list .content {
    height: 300px;
    background-size: cover;
    position: relative;
    margin-bottom: 20px;
}

#projects-list .content .text {
    color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(59, 94, 169, 0.5);
    margin: 0;
    padding: 0 20px;
    transition: ease all 0.5s;
    text-transform: uppercase;
    font-weight: 700;
}

#projects-list .content:hover .text{
    background: #3b5ea9;
    padding: 10px 20px;
    transition: ease all 0.5s;
}

#projects-list .service .content .text h2 {
    margin: 0;
    text-align: left;
    transition: ease all 0.5s;
}

#projects-list .service .content .text span,
#projects-list .service .content .text a{
    opacity: 0;
    transition: ease all 0.5s;
}

#projects-list .service .content:hover .text span,
#projects-list .service .content:hover .text a{
    opacity: 1;
    transition: ease all 0.5s;
}

#projects-list .service .content:hover .text h2 {
    margin: 10px 0;
    transition: ease all 0.5s;
}

#projects-list .service .content .link{
    /*display: block;*/
    color: #fff;
}

#projects-list .content .text .btn {
    background-color: #fff;
    color: #3b5ea9;
    padding: 10px 100px 10px 15px;
    text-align: left;
    border-radius: 0;
    position: relative;
}

#projects-list .content .text .btn::after{
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    border: 8px solid transparent;
    border-width: 8px 12px;
    border-left-color: #3b5ea9;
    margin-top: -8px;
    background: transparent;
}

#projects-list .content .text #tags a {
    color: #fff;
}

#projects-list .content .text #tags a:hover {
    text-decoration: underline;
}

#projects-pagination .nav-next a {
    background-color: #3b5ea9;
    color: #fff;
    padding: 10px 100px 10px 15px;
    text-align: left;
    position: relative;
}

#projects-pagination .nav-next a::after{
    content: '';
    position: absolute;
    right: 0px;
    top: 50%;
    border: 8px solid transparent;
    border-width: 8px 12px;
    border-left-color: #fff;
    margin-top: -8px;
    background: transparent;
}

#projects-pagination .nav-previous a {
    background-color: #3b5ea9;
    color: #fff;
    padding: 10px 20px 10px 96px;;
    text-align: right;
    position: relative;
    width: 100%;
}

#projects-pagination .nav-previous a::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 50%;
    border: 8px solid transparent;
    border-width: 8px 12px;
    border-right-color: #fff;
    margin-top: -8px;
    background: transparent;
}

#projects-pagination{
    margin-top: 30px;
    height: 60px;
}

/*
    Single service - single project
 */

#single-service #project-details {
    background: #3b5ea9;
    padding: 40px 20px;
    float: right;
}

#single-service #project-details p{
    color: #fff;
}

#single-service #project-details span{
    font-family: 'open_sansbold';
}

.hr-style{
    background-color: #3b5ea9;
    height: 3px;
}

.vertical-style{
    display: flex;
    justify-content: center;
    align-items: center;
}
.post-gallery-row{
    margin: 20px 0 0 0;
}

.post-gallery-row :first-of-type{
    padding-left: 0;
}
.post-gallery-row :nth-of-type(2){
    padding-left: 5px;
    padding-right: 5px;
}
.post-gallery-row :nth-of-type(3){
    padding-right: 0;
}

.post-gallery-images{
    height: 40vh;
}

.related-case-studies-container{
    padding-left: 0;
    padding-right: 0;
    padding-top: 25px;

}

.footer-container{
    padding-left: 0;
    padding-right: 0;
}