/* Extra large devices (large desktops, 1200px and up) */

@media only screen and (min-width: 1200px) {

    section.hero.hero-inner {
        margin-top: -.2rem;
    }

    .styled-line {
        display: block;
        border-top: 4px solid;
        width: 160px;
        margin: 20px 0;
        border-color: var(--gray);
    }

    .section-title h2 {
        font-size: 3rem;
    }
    /* #main-nav .nav-div {
        width: 2px;
        height: 1rem;
        background-color: var(--yellow);
    } */
    .logo-top {
        width: 200px;
    }
    #main-nav .active a {
        color: #cccccc;
   }
   #main-nav .active {
    background-color: var(--black);
}

.dropdown:hover .dropdown-menu {
    display: block;
}
#main-nav .dropdown-toggle {
    pointer-events: none;
}
.dropdown-menu {
    margin-top: 0;
    transition: all 0.3s ease;
}
#main-nav .dropdown-menu {
    margin-top: 0;
}
#main-nav .nav-item.dropdown:hover a:not(#main-nav .nav-item.dropdown:hover ul li a) {
    color: #ffffff;
}
#main-nav .nav-item.dropdown ul li a {
    color: #ffffff;
}
#main-nav .nav-item:hover a{
    opacity: .98;
}
#main-nav .nav-item.dropdown ul li a:hover {
    color: rgba(255, 255, 255, .6);
    background-color: transparent!important;
}
#main-nav .dropdown.active {
    color: var(--yellow);
}
#main-nav .dropdown.active ul li a:hover {
    color: var(--yellow)!important;
    background-color: transparent!important;
}
#main-nav .dropdown ul {
    background-color: var(--black);
    padding: .5rem .125rem;
}
#main-nav .dropdown-item {
    padding: .2rem!important;
}
/* #main-nav .dropdown-toggle::after {
    vertical-align: 0;
} */
#main-nav .dropdown:hover .dropdown-toggle::after {
    transform: rotate(-180deg);
     transform-origin: 50% 50%;
    /* vertical-align: -0.1em;
    margin-top: .1em;  */

}






.dropdown:hover .dropdown-menu {
    display: block;
}
.companies-sub-menu .dropdown-toggle {
    /* pointer-events: none; */
}
.dropdown-menu {
    margin-top: 0;
    transition: all 0.3s ease;
}
.companies-sub-menu .dropdown-menu {
    margin-top: 0;
}

.companies-sub-menu .dropdown ul {
    /* background-color: var(--black); */
    padding: .5rem .125rem;
}
.companies-sub-menu .dropdown-item {
    padding: .4rem 1.5rem!important;
}

.companies-sub-menu ul li ul li:not(.companies-sub-menu ul li ul li:last-of-type) {
    border-bottom: 3px solid #ffffff;
}
/* #main-nav .dropdown-toggle::after {
    vertical-align: 0;
} */
.companies-sub-menu ul.dropdown-menu {
    padding-top: 0;
    padding-bottom: 0;
}
.companies-sub-menu .dropdown:hover .dropdown-toggle::after {
    transform: rotate(-180deg);
     transform-origin: 50% 50%;
    /* vertical-align: -0.1em;
    margin-top: .1em;  */

}







.companies-sub-menu {
    background-color: var(--teal);
}
.companies-sub-menu a.home-sub {
    font-size: .875rem;
    text-decoration: none;
    color: #ffffff;
}
.companies-sub-menu .nav-link {
    padding: .5rem 1rem;
    font-size: .875rem;
    color: #ffffff;
}
.companies-sub-menu .nav-item.active {
    background-color: var(--innerColour);
}


.companies-sub-menu ul li ul li {
    background-color: var(--lightGray);
}
.companies-sub-menu .nav-item:not(.companies-sub-menu .nav-item.active):hover .nav-link {
    color: var(--yellow);
}
.companies-sub-menu .nav-item:nth-of-type(1):not(.companies-sub-menu .nav-item.active):hover .nav-link {
    color: var(--blue);
}
.companies-sub-menu .nav-item:nth-of-type(2):not(.companies-sub-menu .nav-item.active):hover .nav-link {
    color: var(--red);
}
.companies-sub-menu .nav-item:nth-of-type(3):not(.companies-sub-menu .nav-item.active):hover .nav-link {
    color: var(--green);
}
.companies-sub-menu .dropdown-toggle {
    pointer-events: none;
}
.companies-sub-menu .dropdown:hover .dropdown-toggle::after {
    transform: rotate(-180deg);
        transform-origin: 50% 50%;
}
.companies-sub-menu .dropdown-menu {
    width: 100%;
    padding-top: 0;
}
.companies-sub-menu ul .active ul.dropdown-menu {
    background-color: var(--innerColour);
}
.companies-sub-menu ul.dropdown-menu {
    padding-top: .5rem;
    background-color: var(--teal);
    margin-top: -.5rem; 
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
}
.companies-sub-menu .nav-item.dropdown {
    /* z-index: 9999999999999; */
}
.companies-sub-menu .dropdown:hover .dropdown-menu, .companies-sub-menu .dropdown .dropdown-toggle:hover, .companies-sub-menu .dropdown .dropdown-toggle::after:hover  {
    display: block;
    position: absolute;
}

.dropdown-menu {
    border-radius: 0;
}
.companies-sub-menu ul li ul li:hover a.dropdown-item {
    background-color: transparent;
}
.companies-sub-menu ul li ul li:hover {
    background-color: var(--innerColour);
}

.companies-sub-menu ul li:nth-of-type(2) ul li:hover {
    background-color: var(--red);
}
.companies-sub-menu ul li:nth-of-type(3) ul li:hover {
    background-color: var(--green);
}
.companies-sub-menu ul .dropdown .dropdown-menu {
    /* padding-top: 0; */
    z-index: 9999999999999;
}

.companies-sub-menu ul .nav-item.active ul li a.active {
    background-color: transparent;
    color: var(--innerColour);
}

.companies-sub-menu .nav-link:last-of-type {
    /* padding-right: 0; */
}
.companies-sub-menu .home-sub:hover {
    color: var(--yellow);
}
.hero .hero2 {
    width: 35%;
    margin-bottom: -5%;
}

.hero .hero3 {
    width: calc((35%/34)*97);
}
.hero-inner p {
    top: 45%;
    font-size: 1.75rem;
    line-height: 2.25rem;
    width: 20%;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
}
.hero-inner .svg-container {
    padding-top: 0;
}
.hero-inner .inner-h1 {
    
    top: calc(-5vh + 50%);
    right: 3rem;
    transform: translateY(-50%);
}
.inner-h1 h1, .inner-h1 p {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    letter-spacing: .2rem;
    margin-bottom: 0;
}
.inner-services .inner-service:nth-of-type(1) .row {
margin-top: 0;
padding-top: 0;
}
.inner-services .inner-service .row {
    padding-top: 1rem;
    margin-top: 4rem;
    justify-content: end;
}

.inner-services .inner-service:nth-child(2n-1) {
    padding-top: 0!important;
    padding-bottom: 3rem!important;
}
.inner-services .inner-service:nth-child(2n-1) .row {
    padding-top: 0;
}
.inner-services .inner-service:nth-child(2n) .row {
    flex-direction: row-reverse !important;
    justify-content: space-between;
    padding-right: 5rem;
}
.inner-services .inner-service .text-col {
    /* margin-bottom: 5rem; */
}
.inner-service .img-col img {
    margin-bottom: -20rem;
}
.inner-services .inner-service:nth-child(2n) .row {

    align-items: center;
    padding-bottom: 3rem;
}

.inner-services .inner-service:nth-child(2n) .row .img-col img {
    margin-bottom: 0;
}
.latest-projects-inner {
    padding-top: 15rem;
}
.loops {
    /* margin-top: 3rem; */
}
.loops a {
   
    width: 33%;
}
.our-companies .loops {
    position: relative;
    width: 75vw;
}


.service-cards .card h3 {
    transition: all .3s ease;
}
.service-cards .card .card-body {
    transition: all .6s ease;
}

.service-cards .card:hover .card-btn, .service-cards .card.active .card-btn {
    visibility: hidden;
}
.service-cards .card:hover h3, .service-cards .card.active h3 {
    color: #ffffff;
}

.service-cards .card .card-body h3 {
    font-size: 1.25rem;
}

.service-cards .card .card-body {
    border: 6px solid var(--lightGray);
    width: 100%;
    padding: 5rem 4rem 2rem 4rem;
    background-color: #ffffff;
}

.quote-image .container-fluid {
    height: 50vh;
}

.quote-image .quote-text p {
    color: #ffffff;
    margin-bottom: 0;
    font-size: 1.75rem;
    font-style: italic;
}


.footer-cutout svg {
    margin-top: -15rem;
    width: 55%;
}
/* Footer - XLarge Devices */
footer, footer a {
    font-size: 1.125rem;
}
.shfooter .collapse {
    display: block;
    }
    footer .fa-chevron-right {
    display: inline-block;
    }
    footer ul li {
    margin-bottom: 10px;
    
    }
    footer ul li span {
        display: inline-block;
    }
    footer ul li a:hover span {
        animation: arrow-right 0.3s linear forwards; 
              
          }
      
      @keyframes arrow-right {
        from {
          transform: translateX(0px); }
        to {
          transform: translateX(2px); } 
          
      }
    
      #footer .footer-title {
        font-size: 1.5rem;
      }
      .footer-logo-desktop {
        margin-top: -1rem;
      }

}