/*Global----------------------------------------------------------------*/
:root{
    font-size: 18px;
}
html{
    scroll-behavior: smooth;
}
.hidden{
    display: none;
}
.flex{
    display: flex;
}
.text-center{
    text-align: center;
}
h2{
    font-size:2rem;
}
h3{
    font-size: 1.5rem;
}
body{
    padding:0;margin:0;
    font-family: 'Inter', sans-serif;
    color:#002d5d;
}
p{
    line-height: 2em;
}
.sr-only{
    display: none;
}
.img_dropshadow{
    box-shadow:0 0 20px rgba(0, 45, 93,.4);
}
.responsive{
    width:100%;
    height:auto;
}
.primary-header-container{
    position: fixed;
    z-index: 102;
    width: 100vw;
    box-shadow: 0 5px 10px rgba(0, 45, 93,.3);
}
.primary-header-container{
    align-items: center;

    background-color:rgba(255, 250, 250);
}
.primary-navigation-logo{
    align-items: center;

}
.nav-logo{
   width:clamp(10em,25vw,14em);
   padding:.5em 0;
}
.primary-navigation-link{
    list-style: none;
    font-size:clamp(1em,1vw,1.1em);
}
.primary-navigation-link a{
    text-decoration: none;
    color:#002d5d;
}

.mobile-nav-toggle{
    display:none;
}
.bar1, .bar2, .bar3 {
    width: 25px;
    height: 2px;
    background-color:#002d5d;
    margin: 6px 0;
    transition: 0.4s;
}
  
.change .bar1 {
transform: translate(0, 8px) rotate(-45deg);
background-color:#002d5d;
}
  
.change .bar2 {opacity: 0;}

.change .bar3 {
transform: translate(0, -8px) rotate(45deg);
background-color:#002d5d;
}
a.active, a:hover{
    color:#0B2A4F;
    font-weight: 600;
}
nav{
    justify-content: center;
    background-color:rgba(37, 124, 225,.3);
}
.primary-navigation{
   align-items: center;
   padding:0;
   justify-content: space-evenly;
}
.main-container{
    flex-direction: column;
    grid-gap:clamp(6em,12vw,12em);
    background-color: #f0f8ff;
    /*clamp(1em,5vw,7em); clamp(3em,10vw,12em);*/
}
.hero{
    width:100vw;min-height:75vh;
    flex-direction: row;
}
.overlay-content-container{
    flex-direction: column;
    width:100%;
    justify-content: center; 
}  
.overlay-content-main{
    list-style: none;
    text-align: left;
    flex-direction: column;
    align-items: center;
    margin:0;padding:0;
}
.hero_img__container{
    width:100%;
}
.hero_img{
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    background-image: url(../img/hero_img_1.png);
    width:100%;
}
.hero-headline{
    font-size: clamp(1.5rem,4vw,2.75rem);
    font-weight: 600;
    text-align: left;
    letter-spacing: 1.5px;
    width:100%;
    max-width:500px;
    color:#002d5d; 
}
.hero-support-info{
    margin:1em auto;
    font-size:clamp(1.1rem,2.25vw,1.25rem);
    color:#002d5d; 
    padding-bottom: 1em;
    line-height: 1.3em;
    width:100%;
    max-width:500px;
}
.cta-btn{
    background-color:#F46B10;
    border-radius: 5px;
    padding:.5em 1.5em;
    font-size:1.1rem;
    font-weight: 500;
    text-decoration: none;
    color:#fff; 
    filter: drop-shadow(0 18);
    box-shadow: 0 20px 40px -12px rgba(249, 129, 49,.6);
    text-align: center;
    
}

.cta-btn:hover{
    background-color:#b45827;
    border-radius: 5px;
    padding:.5em 1.5em;
    
    font-weight: 500;
    text-decoration: none;
    color:#fff; 
    transition: .3s;
}
.prevent_form-btn, .submit_form{
    border:0;
}
.cta-btn-secondary{
    background-color:rgba(244, 107, 16,0);
    border: solid 2px #F46B10;
    border-radius: 5px;
    padding:.5em 1.5em;
    font-size:1.1rem;
    font-weight: 500;
    text-decoration: none;
    color:#fff; 
}
.cta-btn-secondary:hover{
    background-color:#F46B10;
    border-radius: 5px;
    padding:.5em 1.5em;
    font-size:1.1rem;
    font-weight: 500;
    text-decoration: none;
    color:#fff; 
}
.cta-btn-secondary:hover{
    font-size: 1.1rem;
    transition: .5s ease-in-out;
}
.cta-btn-employment{
    background-color:rgba(244, 107, 16,0);
    border: solid 3px #F46B10;
    border-radius: 5px;
    padding:.5em 1.5em;
    font-size:1.1rem;
    font-weight: 600;
    text-decoration: none;
    color:#F46B10;
    margin: 0 auto;
}
.cta-btn-employment:hover{
    background-color:rgba(244, 107, 16);
    border: solid 2px #F46B10;
    border-radius: 5px;
    padding:.5em 1.5em;
    font-size:1.1rem;
    font-weight: 600;
    text-decoration: none;
    color:#Fff; 
    transition: .3s;
}
.services, .about,.about_careers,.type-service,.prevent_maint-verbage,.maintenance-repair, .mission, .company{
    padding:0 1.5em;
    grid-gap:2.5em;
    justify-content: center;
    align-content: center;
}

.services{
    flex-direction: column;
}
.services-info{
   width:100%;
   max-width: 700px;
   margin:0 auto;
}
.service-title{
    margin:0 auto;
    color:#002d5d;
    font-size: clamp(1.5rem,2.5vw,2.5rem);
}
.sub-text-header{
    font-size: clamp(1.25rem,2.1vw,1.75rem);
    margin:.5em 1em 0 0;
    line-height: 1.8rem;
}
.sub-text-header-hero{
    color:#48b7e3;
}
.service-icon-container{
    flex-wrap: wrap;
    flex-flow: wrap;
    width:100%;
    max-width: 80vw;
    margin:0 auto;
}
.service-icon_list{
    list-style: none;
    flex-wrap: wrap;
    justify-content:space-evenly;
    text-align: center;
    font-weight: 300;
    padding-inline: .5em;
    margin:0 auto;
}
.service-icon{
    margin:1em;
}
.service-icon_img{
    width:100%;
    max-width: 81px;
    min-width: 50px;
}
.service-icon-title{
    font-weight: 500;
    text-align: center;
    width:100%;
}
.about, .about_careers{
    flex-direction: row;
    grid-gap:2.5em;
    margin:0 auto;
}

.about-verbage{
    max-width:600px;
    padding-bottom:1.5em;

}
.about-title,.type-service-content-title,.contact-form_section-title{
   line-height: 1.5em;
   font-size: clamp(1.75rem,2.5vw,2.4rem);
}
.about-image{
    margin:0 auto;
}
.about-image img{
    width:100%;
    max-width: 400px;
    aspect-ratio: 3/4;
}
.about-content{
    justify-items: center;
    flex-direction: column;
    align-items: center;
}
.about-btn{
    margin:0 auto;
}
.type-service{
    flex-direction: column;
}
.type-service-content{
    width:100%;
    max-width: 800px;
    margin:0 auto;
}
.type-service-icons{
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.healthcare-icon{
    flex-direction: column;
    width:100%;
    max-width:350px;
}
.type-service-icon-img{
    width:100%;
    max-width:300px;
    margin:0 auto;
    filter:drop-shadow(rgba(11, 42, 79,.5) 0 5px 5px);
}
.type-service-icon-tag{
    text-align: center;
    margin-bottom: 0;
}
.type-service-icon-ul{
    list-style: none;
    text-align: center;
}
.type-service-icon-ul-li{
    margin-inline: 0 2em;
    line-height: 2.5em;
}
.prevent_maint{
    width:100%;
    max-width: 1200px;
    margin:0 auto;
}
.prevent_maint-container{
    flex-direction: row;
}
.prevent_maint-img{
    padding:1em;
    background-color:rgba(72, 183, 227,.5);
    border-radius: 1.5em;
}
.prevent_maint-ul li{
    padding:.5em;
}
.mid-contact-header{
    font-size: 1.5rem;
    padding:1em 0;
    line-height: 1.7rem;
    margin:0 auto;
}
.maintenance-repair-container {
    flex-direction: column;
}
.maintenance-repair-content{
    width:100%;max-width:1200px;
    flex-direction: row;
    text-align: center;
    justify-content: space-evenly;
    margin:0 auto;
    box-shadow:0 0 10px 15px rgba(255, 255, 255, .25);
    background-color:rgba(255 255 255/.25);
    border-radius: 2em;
    gap:1em;  
}
.maintenance,.repair{
    max-width:750px;
    margin:0 auto;
    padding:1em 2em;
}
.maintenance p,.repair p{
    text-align: left;
}
.maintenance-repair_title{
    margin:0 auto;
    color:#002d5d;
    font-size: clamp(1.5rem,2vw,2rem);
    padding:.5em 0 0 0;
}
.info-hr{
    border:1px solid rgba(0, 45, 93,.25);
    width:8em;
    align-self: center;     
}
.maintenance-btn{
    text-align: center;
    margin:3em auto;
}
.mission{
    flex-direction: column;
    grid-gap:3em;
    margin:0 auto;  
}
.mission-container{
    flex-direction: column;
    grid-gap:2em;
    width:100%;
    max-width: 1200px;
    justify-content: center;
}
.mission-img-container{
    margin:0 auto;
}
.mission-img{
    width:100%;
    max-width:500px;
}
.mission-verbage{
    width:100%;
    max-width: 700px;
    margin:0 auto;
}
.mission-details-container{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap:2em;
    grid-auto-rows: 1fr;
    align-items: flex-start;
    justify-items: center;
}
.professionalism{
    width:100%;
    max-width: 300px;
}
.professionalism h3{
    text-align: center;
    background-color:rgba(72, 183, 227,.1);
    padding:1em;
}
.mission-ul{
    line-height: 1.5em;
    list-style: none;
    margin:0 auto;
    padding:0;
    align-items: center;
    justify-items: center;
}
.mission-ul li{
    font-weight: 500;
    text-align: center;
    margin-bottom:1em;
    padding:1em;
    min-height:2em;
}
.company{
    flex-direction: column;
}
.company-verbage{
    max-width:800px;
    width:100%;
    margin:0 auto;
}
.company-photogrid{
    width:100%;
    max-width:1000px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap:1.5em;
    margin:0 auto;
    filter:drop-shadow(rgba(11, 42, 79,.5) -3px 3px 10px);
}
.company-photogrid_one{
    grid-row:1/2;
    grid-column: 1/2;
}
.company-photogrid_two{
    grid-row:1/2;
    grid-column: 2/3;
}
.company-photogrid_three{
    grid-row:1/2;
    grid-column: 3/4;
}
.company-photogrid_four{
    grid-row:2/3;
    grid-column: 1/3;
}
.company-photogrid_five{
    background-color: #002d5d;
    grid-row:2/3;
    grid-column:3/4;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  
    color:#fff;
    padding:2em;
    text-align:center;
}
.photo-grid-title{  
    margin:0 auto;
}

.contact-form_section{  
    background: linear-gradient(180deg, rgba(193,223,250,0) 0%, rgba(193,223,250,1) 10%, rgba(193,223,250,1) 100%);
    justify-items: center;
    padding:6em 1em 1em 1em;
    flex-direction: column;
}
.form-header{
    margin:0 auto;
    width:100%;max-width: 600px;
    text-align: center;
}
.contact-form{
    margin:1em auto;
}
input, textarea{
    width:100%;
    padding:12px 20px;
    margin:8px 0;
    box-sizing: border-box;
    font-size: 1em;
    margin-bottom: 1em;
    border:none;
    border-radius: .5em;
    border-bottom: .15em solid rgba(11, 42, 79,.6);
    box-shadow: .1em .1em 6px rgba(0,0,0,.2);
    background-color: #FFFAFA;
}
input:focus, textarea:focus{
    border:2px solid #FE7F0A;
}
.form_btn{
    justify-content: center;
}
.submit_form{
    width:fit-content;
}
footer{
    background-color: #0B2A4F;
}
.footer-ul{
    list-style: none;
    width:100%;
    max-width:400px;   
    margin:0 auto;
    padding:0;
    line-height: 1.5;
}
.footer-ul li{
    text-align: center;
}
.footer-navigation-link{
    text-decoration: none;
    color:#FFFAFA;
}
.footer-navigation-link:hover, .footer-active{
    text-decoration: none;
    color:#FE7F0A;
    font-weight: 600;
}
.footer-ul-contact{
    padding-bottom: 2em;
}
.link-ul{
    display: inline-flex;
    gap:2em;
    justify-content: space-between;
    text-align: center;
}
footer h3{
    text-align: center;
}
.footer-content{
    color:#fff;
    padding:2em;
    flex-flow: column wrap;
    justify-content: space-evenly;
    align-content: center;
    align-items:center;
    max-width: 1600px;
    margin:0 auto;
}
.hours, .link, .footer-contact{
    width: 100%;
    max-width:300px;
    text-align:center;
}
.hours_details{
    line-height: 1.3rem;
}
.footer-btn{
    justify-content: center;
    align-content: center;
}



/*Careers Page*/
.hero-careers{
    width:100vw;
    min-height:50dvh;
    background: url(../img/building-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    margin-top:8em;
}
.hero-container_careers{
    align-self:center;
    margin:0 auto; 
}
.hero-img_careers{
    width:100%;
    
}
.hero-img_careers-image{
    width:100%;
    max-width:543px;
    height:auto;
    filter: drop-shadow(2em 0 4em rgba(72, 183, 227,.4));
    margin:0 auto;
}
.hero-headline_careers{
    font-size: clamp(2rem,4vw,2.75rem);
    line-height: 1.3em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1.5px;
    margin:0; 
    color:#002d5d;
}
.hero-support-info_careers{
    color:#002d5d;
}
.overlay-content-container_careers{
    justify-content:left;
    max-width: 750px;
    width:100%;   
}
.overlay-content{
    list-style: none;
    text-align: center;
    padding:2em;
    height:fit-content;
    margin:0 auto;
    background-color: rgba(240, 248, 255,.4);
    border-radius: 2em;
}
.icon_career{
    max-width: 140px;
    width:100%;
}
.career-icon-container{
    flex-wrap: wrap;
    flex-flow: wrap;
    max-width: 1200px;
    margin:0 auto;
}
.career-icon_list{
    list-style: none;
    flex-wrap: wrap;
    justify-content:space-evenly;
    text-align: center;
    font-weight: 300;
    padding-inline: .5em;
    margin:0 auto;
}
.career-icon{
    width:100%;
    max-width: 300px;
    margin:.5em;
}
.career_btn_group{
    width:100%;
    max-width:800px;
    justify-content: space-evenly;
    margin:0 auto;
    padding-bottom:5em;

}
.journeyman_btn, .apprentance_btn{
    padding:1em 2em;
}
.journeyman_btn:hover,.apprentance_btn:hover{
    background-color: #fff;
    border:2px solid #FE7F0A;
    border-radius: 5px;
    padding:1.5em 2.5em;
    text-decoration: none;
    color:#FE7F0A;
    background-color: rgb(255, 255, 255,0); 
}
.apply-btn{
    text-align: center;
} 
/*Apprenticeship*/
.hero-img_apprentice-image{
    width:100%;
    max-width:466px;
    height:auto;
    filter: drop-shadow(2em 0 4em rgba(72, 183, 227,.4));
}



/*success page*/
.success{
    flex-direction: column;
    margin:8em auto;
    padding:0 1em;
    justify-content: center;
    align-content: center;
    height:auto;
    gap:3em;
}
.success-verbage{
    width:100%;
    max-width: 650px;
}
.contact-success-verbage{
    width:100%;
    max-width: 650px;
    text-align: center;
}
.success-header{
    margin:0 auto;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}
.success-title{
    color:#002d5d;
    line-height: 1.75em;
    font-size: clamp(1.75rem,3vw,2.25rem);
    margin:0 auto;
    margin-bottom:0; 
    text-align: center;
}
.success_img{
    width:100%;
    max-width: 100px;
    margin:0 auto;
}
.sub-text-header-success{
    text-align:center;
    margin:0 auto;
}
.success_btn,.success_img-container{
    justify-content: center;
}
.footer-success{
    position: fixed;
    bottom:0;
    width:100%;
}




/*Small Screen*/
@media (max-width:1070px){
    .primary-header-container{
        width:100%;
        position: fixed; 
        z-index: 100;

    }
    #primary_navigation{
        box-shadow: 0 5px 10px rgba(0, 45, 93,.3);
    }
    .primary-navigation{ 
        position: fixed; top:0;margin:0;
        z-index: 0;
        inset:0 0 0 55%;
        flex-direction: column;
    
        height:45vh;
       min-width: 50%;
        background-color:rgb(240, 248, 255);
        border-radius: 1em;
        transform: translateX(200%);
        transition: transform 350ms ease-in;
    }
   .primary-navigation-logo{
        margin-left:.5rem;
   }
    .mobile-nav-toggle{
        display: block;

        position: absolute;
        top:.75em;
        right:1em;
        z-index: 9999;

        border:0;

        border: 1px sild red;;
    }
    .primary-navigation[data-visable='true']{
        transform: translateX(0%);
    }
    .hero{
        flex-direction: column;
        justify-content:baseline;
        position: relative;
        min-height:100vh;
        max-height: 100dvh;
    }
    .hero_img{
        background-image: url(../img/hero_img_small.png);
        background-repeat: no-repeat;
        background-position:center;
        background-size: cover;
        margin-top:2.5em;
        min-height:75vh;
        width:100vw;
    }
    .overlay-content-container{
        width:100vw;
        background-color:#002d5d;
        position: absolute;
        bottom: 0;
    }
    .overlay-content-main{
        margin:1.7em;
    }
   
    .hero-headline{
        margin:0 auto;
        width:100%;max-width: 800px;
        color: #fff;
    }
    .hero-support-info{
        margin:1em auto;
        width:100%;max-width: 800px;
        color: #fff;
    }
    .services-info{
        width:100%;max-width: 650px;
    }
    .services{
        grid-gap:0;
    }
    .service-icon{
        width:30%;
    }
    .services-verbage,.about-verbage,.type-service-content,.prevent_maint-verbage,.mission-verbage,.company-verbage{
        max-width:650px;
    }
    .prevent_maint-verbage{
        margin:0 auto;
    }
    .type-service-icon-ul-li{
        margin-inline: 0 2em;
        line-height: 1.5em;
    }
    .healthcare-icon{
        margin-bottom: 4em;
    }
    .about-image{
        margin-top:2em;
        max-width:50vh;
    }
    .about{
        flex-direction: column-reverse;
    }
    .type-service-icons{
        padding:0;
    }
    .healthcare-icon{
        margin:1em;
    }
    .prevent_maint{
        flex-direction: column;
    }
   .prevent_maint-img{
        margin:0 auto;
        max-width:600px;
   }
   .prevent_maint-container{
        padding:1em;
   }
   .maintenance-repair-container {
    align-content: baseline;
   }
   .maintenance-repair{
        background: url(../img/building-bg.png), linear-gradient(180deg, rgba(193,223,250,0) 0%, rgba(193,223,250,1) 5%, rgba(193,223,250,1) 75%, rgba(193,223,250,0) 100%);
        background-size:100vw;
        background-repeat: no-repeat;
        background-position: bottom;
        min-height: 70vh;
   }
   .maintenance-repair-content{
        flex-direction: column;
        padding-top:1em;
        align-content: baseline;
   }
   .maintenance,.repair{
        width:100%;
        margin:0 auto;
        padding:0;
   }
   .maintenance-btn{
        padding-bottom:3em;
   }   
    .mission-details-container{
        grid-template-columns: 1fr;
        gap:0;
    }
    .mission-container{
        flex-direction: column-reverse;
    }
    .mission-ul li{
        font-weight: 500;
        text-align: center;
        margin-bottom:1em;
        padding:0em;
        min-height:2em;
    }
    .company-photogrid{
        width:100%;
        max-width: 700px;;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap:1em;
        margin:0 auto;
        filter:drop-shadow(rgba(11, 42, 79,.5) -3px 3px 10px);
    }
    .company-photogrid_one{
        grid-row:1/2;
        grid-column: 1/2;
    }
    .company-photogrid_two{
        grid-row:1/2;
        grid-column: 2/3;
    }
    .company-photogrid_three{
        display: none;
    }
    .company-photogrid_four{
        grid-row:2/3;
        grid-column: 1/3;
    }
    .company-photogrid_five{
        background-color: #002d5d;
        grid-row:3/4;
        grid-column:1/3;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        gap:.5em;
        color:#fff;
        padding:2em;
        text-align:center;
    }
    .footer-title{
        margin:0;
        line-height: 2.5rem;
    }
    .footer-content{
        gap:1.5em;
        align-content: space-evenly;
    }
    .footer_ul{
        flex-wrap: wrap;
    }
    .hero-container_careers{
        flex-direction: column;  
    }
    .overlay-content-container_careers, .hero-img_careers{
        margin:0 auto;
    }
    .about_careers{
        flex-direction: column-reverse;
    }
    .hero-careers{
        min-height: 100vh;
        min-height:100svh;
        margin-bottom:0;
        margin-top:2em;
    }
    .hero-img_careers-image{
        width:100%;
        max-width:443px;
        height:auto;
        filter: drop-shadow(2em 0 4em rgba(72, 183, 227,.4));
        margin:0 auto;
    }
    .success{
        margin:5em auto;
        padding:0 1em;
    }
    .footer-success{
        position:static;
    }
    .footer-ul{
        flex-wrap: wrap;
        justify-content: center;
    }
}
@media (max-width:310px) {
    .service-icon{
        width:100%;
    }
}
/*Max size*/
@media (min-width:1070px) {
    nav{
        width:30vw;
        background-color:rgba(255, 255, 255);
    }
    .primary-header-container{
        justify-content: space-between;
       
    }
    .primary-navigation-logo{
        margin-left:2em;
    }
    .hero{
        margin-top:3em;
    }
    .about{
        flex-direction: row;    
    }
    .maintenance-repair{
        padding:7vw;
        background: rgb(193,223,250);
        background: url(../img/building-bg.png), linear-gradient(180deg, rgba(193,223,250,0) 0%, rgba(193,223,250,1) 15%, rgba(193,223,250,1) 75%, rgba(193,223,250,0) 100%);
        background-size:100vw;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .info-hr{
        transform: rotate(90deg);
    }

    .mission-container, .mission-details-container{
        flex-direction: row;
    }
    .mission-ul{
        max-width: 242px;
        text-align: left;
    }
    .contact-form{
        flex-direction: row;
        flex-wrap: wrap;
        width:100%;max-width: 1200px;
    }
    .contact-form{
        width:80%;
        margin:1em auto;
    }
    .form-left{
        float:left;
        width:47.5%;
    }
    .form-right{
        float:right;
        width:47.5%;
    }
    .form-bottom{
       clear:both;
    }
    .footer-content{
        flex-direction: row;
        justify-content: space-around;
        align-items: flex-start;
    }
    .footer-ul{
        display: inline-block;
        text-align: left;
    }   
}