:root{
    --primary-color : #3399CC;
    --white : #ffff;
    --gray : #B3C8CF;
    --contrast : #5314e0;
    --accent : #21d13e;
    --black : #000000;
    --dull-blue : #0a4075;
    --white-gray : #f4f6f7;
}

body{
    font-family: "Open Sans", sans-serif;
}

@media only screen and (max-width: 648px) {

    .navbar{
        background-color: var(--primary-color);
        height: auto;

    }
    .navbar .navbar-brand {
        height: 100px;
        width: auto;
    }

    .navbar .navbar-brand img{
        height: 100%;
        width: 150px;
    }

    .navbar .navbar-nav .nav-item{
        margin: 0 40px;
    }

    .navbar .navbar-nav .nav-item .nav-link{
        color: var(--white);
        transition: .5s;
        font-weight: bold;
    }

    .navbar .navbar-nav .nav-item a:hover{
        font-weight: bold;
        color: var(--gray);
    }
    .navbar .navbar-nav .nav-item.find-a-job{
        background: var(--contrast);
        border: 2px solid var(--contrast);
    }

    .banner {
        width: 100%;
        height: calc(100vh - 90px);
        background-image: url("./assets/banner-images/banner-img.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    
    .banner .trasbox{
        height: 100%;
        width: 100%;
        background-color: rgba(94, 158, 222, 0.9);
        z-index: 1;
        color: var(--white);
        z-index: -1;
    }

    .banner .trasbox .banner-inner{
        display: flex;
        height: 100%;
        flex-direction: column;
    }



    .banner .trasbox .banner-inner .banner-item .caption{
        display: flex;
        align-items: baseline;
        justify-content: center;
        align-content: baseline;
        padding: 10px 0;
        flex-direction: column;
    }

    .banner .trasbox .banner-inner .banner-item .caption h3{
        font-weight: bolder;
        font-size: 16px;
    }

    .banner .trasbox .banner-inner .banner-item .caption p{
        font-size: 16px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links a{
        text-decoration: none;
        transition: .5s;
    }
    .banner .trasbox .banner-inner .banner-item .caption .links .first{
        font-size: 16px;
        padding: 6px 12px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        color: var(--white);
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .first:hover{
        border: 2px solid var(--contrast);
        background: none;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last{
        font-size: 16px;
        border: 2px solid var(--contrast);
        color: var(--white);
        padding: 6px 12px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last:hover{
        background: var(--contrast);
    }

    .banner .banner-inner .banner-item .banner-carousel{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 10px;
        height: 100%;
    }

    .banner .banner-item .banner-carousel .carousel{
        box-shadow: -10px 5px 5px var(--contrast);
        rotate: 1deg;
    }

    .job-openings{
        width: 100%;
        margin: 30px 0;
    }

    .job-openings .section-header{
        position: relative;
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .job-openings .section-header h2{
        text-transform: uppercase;
        font-size: 30px;
        margin: 10px 0;
    }

    .job-openings .section-header h2::after{
        content: "";
        height: 7px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: -10px;
        left: 46%;
        right: 40%;
        border-radius: 5px;
    }

    .job-openings .header-text{
        font-size: 18px;
    }



    .job-openings .job-item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;
        width: 100%;
        background: var(--gray);
        padding: 10px 5px;
        margin: 10px 0;
    }

    .job-openings .job-item.electrician{
        background: url("assets/job-openings/electrician.jpg");
        background-size: cover;
    }

    .job-openings .job-item.welder{
        background: url("assets/job-openings/welder.jpeg");
        background-size: cover;
    }
    .job-openings .job-item.painter{
        background: url("assets/job-openings/painter.jpg");
        background-size: cover;
    }
    .job-openings .job-item.iron-worker{
        background: url("assets/job-openings/iron-worker.jpg");
        background-size: cover;
    }

    .job-openings .job-item.cladding{
        background: url("assets/job-openings/caldding.jpg");
        background-size: cover;
    }


    .job-openings .job-item.it-prof{
        background: url("assets/job-openings/info-com.jpg");
        background-size: cover;
    }

    .job-openings .job-item .job-title h3{
        color: var(--black);
        font-weight: normal;
    }

    

    .job-openings .job-item .job-link{
        border-radius: 100%;
        background: var(--white);
        width: 40px;
        height: 40px;
        padding: 10px;
        text-align: center;
    }

    .job-openings .job-item .job-link a .svg{
        color: var(--contrast);
    }

    .job-openings .job-item .job-link:hover{
        background: var(--primary-color);
        color: var(--white);
    }


    .job-openings .more-job-link{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }

    .job-openings .more-job-link a{
        text-decoration: none;
        text-transform: capitalize;
        font-size: 18px;
        border : 2px solid var(--contrast);
        padding: 5px 10px;
        text-align: center;
        color: var(--white);
        background: var(--contrast);
        transition: .5s;
    }


    .values{
        border-bottom: 2px solid var(--contrast);
        margin: 0px 0;
        background: var(--dull-blue);
        padding: 20px 0;
        position: relative;
    }

    .values .section-header{
        text-align: center;
        position: relative;
    }

    .values .section-header h6{
        color: var(--contrast);
        text-transform: uppercase;
        font-weight: bold;
    }
    .values .section-header h2{
        font-size: 45px;
        font-weight: bold;
        color: var(--white);
    }

    .values .section-header h2::after{
        content: "";
        height: 5px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: 0;
        left: 46%;
        right: 40%;
        border-radius: 5px;
    }

    .values .values-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: 0 5px;
        padding: 30px 0;
    }

    .values  .values-item{
        display: flex;
        margin: 10px 0;
    }

    .values .values-item .values-item-icon {
        margin: 0 10px;
    }

    
    .values .values-item .values-item-icon svg, .values .values-item .values-item-icon svg, .values .values-item .values-item-icon .fa-person-circle-exclamation, .values .values-item .values-item-icon svg{
        background: var(--gray);
        color: var(--contrast);
        /* font-size: 20px; */
        height: 20px;
        width: 20px;
        padding: 15px;
        border-radius: 100%;
    }


    .values .values-item .values-item-align{
        padding: 5px 0;
    }
    .values .values-item .values-item-align .values-item-header h3{
        font-size: 30px;
        color: var(--white);
    }

    .values .values-item .values-item-align .values-item-text p{
        font-size: 18px;
        color: var(--gray);
    }


    .values .values-item .values-item-align .values-item-text .list-item{
        color: var(--gray);
    }
/* 
    .values .values-item .values-item-align .values-link a,.footer-item .values-link a{
        color: var(--white);
        text-decoration: none;
        padding: 8px 10px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        text-transform: capitalize;
    } */

    .values .values-item .values-item-align .values-link a,.footer-item .values-link a{

        color: var(--white);
        text-decoration: none;
        padding: 8px 10px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        text-transform: capitalize;
    }

    .values .values-item .values-item-align .values-link a:hover{
        background: none;
    }

    /* .testimonial */
        
    .testimonial{
        position: relative;
        padding: 25px 0;
        background: var(--white-gray);
    }

    .testimonial .testimonial-carousel{
        width: calc(100%);
    }

    .owl-carousel .item{
        padding: 20px;
    }


    .testimonial .testimonial-item{
        position: relative;
        margin: 0 0px;
        padding: 15px;
        overflow: hidden;
        border-radius: 10px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--contrast);
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
        color: var(--sub-text);
        color: var(--neutral);
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 30px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
    }

        /* contact */
        .contact{
            padding: 10px 20px;
            background: var(--white-gray);
            margin: 10px 0;
        }
    
        .contact .contact-item .contact-details{
            padding: 10px 0;
            margin: 10px 0;
            border: 1px solid var(--dull-blue);
            text-align: center;
        }
    
        .contact .contact-item .contact-details a{
            text-decoration: none;
            font-size: 20px;
        }
    
        .contact .contact-item .contact-details svg{
            color: var(--contrast);
            font-size: 25px;
        }
    
        .contact .contact-form{
            padding: 0 0;
            width: 600px;
        }

        .contact .contact-form .name-align{
            display: flex;
            flex-direction: column;
            width: 100%;
        }
    
        .contact .contact-form .name-align input{
            border: 2px solid var(--contrast);
            height: 45px;
            width: 290px;
            padding: 5px;
            margin: 10px 0;
        }
        .contact .contact-form div input{
            width: 288px;
            padding: 5px;
            height: 40px;
            border: 2px solid var(--contrast);
            margin: 10px 0;
            height: 45px;
        }
    
        .contact .contact-form button{
            width: 282px;
            height: 40px;
            padding: 5px;
            border: 2px solid var(--contrast);
            margin: 10px 0;
            font-size: 20px;
            background: var(--primary-color);
            color: var(--white-gray);
        }
        
        .contact .contact-form button:hover{
            background: none;
            color: var(--primary-color);
        }
    

    .footer{
        padding: 30px 0 10px 0;
        background: var(--dull-blue);
        color: var(--white-gray);
    }

    .footer .footer-item h2{
        color: var(--contrast);
    }

    .footer .trade-mark{
        text-align: center;
        margin: 10px 0 0 0;

    }

    .footer .trade-mark h2{
        font-size: 10px;
    }
    .footer .footer-item .footer-contacts{
        margin-top: 10px;
    }

    .footer .footer-item .footer-contacts svg{
        color: var(--contrast);
        font-size: 16px;
        margin-right: 2px;
        padding: 5px;
    }
    .footer .footer-item .footer-contacts a{
        font-size: 16px;
        text-align: center;
        color: var(--white-gray);
    }
    .footer .footer-item .footer-contacts a:hover{
        color: var(--contrast);
    }










}


/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .navbar{
        background-color: var(--primary-color);

    }
    .navbar .navbar-brand {
        height: 100px;
        width: 50%;
    }

    .navbar .navbar-brand img{
        height: 100%;
        width: 150px;
    }

    .navbar .navbar-nav .nav-item{
        margin: 0 40px;
    }

    .navbar .navbar-nav .nav-item .nav-link{
        color: var(--white);
        transition: .5s;
        font-weight: bold;
    }

    .navbar .navbar-nav .nav-item a:hover{
        font-weight: bold;
        color: var(--gray);
    }

    .navbar .navbar-nav .nav-item.find-a-job{
        background: var(--contrast);
        border: 2px solid var(--contrast);
    }
    .navbar .navbar-nav .nav-item.find-a-job:hover{
        background: none;
    }
    .navbar .navbar-nav .nav-item.find-a-job{
        background: var(--contrast);
        border: 2px solid var(--contrast);
    }

    .banner {
        width: 100%;
        height: calc(100vh - 90px);
        background-image: url("./assets/banner-images/banner-img.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    
    .banner .trasbox{
        height: 100%;
        width: 100%;
        background-color: rgba(94, 158, 222, 0.9);
        z-index: 1;
        color: var(--white);
        z-index: -1;
    }

    .banner .trasbox .banner-inner{
        display: flex;
        height: 100%;
    }

    .banner .trasbox .banner-item{
        height: 100%;
        width: 50%;
    }

    .banner .trasbox .banner-inner .banner-item .caption{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        align-content: baseline;
        padding: 30px 10px;
        height: 100%;
    }

    .banner .trasbox .banner-inner .banner-item .caption h3{
        font-weight: bolder;
        font-size: 40px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links a{
        text-decoration: none;
        transition: .5s;
    }
    .banner .trasbox .banner-inner .banner-item .caption .links .first{
        font-size: 16px;
        padding: 6px 12px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        color: var(--white);
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .first:hover{
        border: 2px solid var(--contrast);
        background: none;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last{
        font-size: 16px;
        border: 2px solid var(--contrast);
        color: var(--white);
        padding: 6px 12px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last:hover{
        background: var(--contrast);
    }

    .banner .banner-inner .banner-item .banner-carousel{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 10px;
        height: 100%;
    }

    .banner .banner-item .banner-carousel .carousel{
        box-shadow: -10px 5px 5px var(--contrast);
        rotate: 1deg;
    }

    .job-openings{
        width: 100%;
        margin: 30px 0;
    }

    .job-openings .section-header{
        position: relative;
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .job-openings .section-header h2{
        text-transform: uppercase;
        font-size: 30px;
        margin: 10px 0;
    }

    .job-openings .section-header h2::after{
        content: "";
        height: 7px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: -10px;
        left: 46%;
        right: 40%;
    }

    .job-openings .header-text{
        font-size: 18px;
    }


    .job-openings .job-item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;
        width: 100%;
        background: var(--gray);
        padding: 10px 5px;
    }

    .job-openings .job-item.electrician{
        background: url("assets/job-openings/electrician.jpg");
        background-size: cover;
    }

    .job-openings .job-item.welder{
        background: url("assets/job-openings/welder.jpeg");
        background-size: cover;
    }
    .job-openings .job-item.painter{
        background: url("assets/job-openings/painter.jpg");
        background-size: cover;
    }
    .job-openings .job-item.iron-worker{
        background: url("assets/job-openings/iron-worker.jpg");
        background-size: cover;
    }

    .job-openings .job-item.cladding{
        background: url("assets/job-openings/caldding.jpg");
        background-size: cover;
    }


    .job-openings .job-item.it-prof{
        background: url("assets/job-openings/info-com.jpg");
        background-size: cover;
    }

    .job-openings .job-item .job-title h3{
        color: var(--black);
        font-weight: normal;
    }

    

    .job-openings .job-item .job-link{
        border-radius: 100%;
        background: var(--white);
        width: 40px;
        height: 40px;
        padding: 10px;
        text-align: center;
    }

    .job-openings .job-item .job-link a .fa-arrow-right{
        color: var(--contrast);
    }

    .job-openings .job-item .job-link:hover{
        background: var(--primary-color);
        color: var(--white);
    }


    .job-openings .more-job-link{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }

    .job-openings .more-job-link a{
        text-decoration: none;
        text-transform: capitalize;
        font-size: 18px;
        border : 2px solid var(--contrast);
        padding: 5px 10px;
        text-align: center;
        color: var(--white);
        background: var(--contrast);
        transition: .5s;
    }


    .values{
        margin: 5px 0;
        /* margin-bottom: 2px solid var(--contrast); */
        background: var(--dull-blue);
        padding: 20px 0;
        position: relative;
    }

    .values .section-header{
        text-align: center;
        position: relative;
    }

    .values .section-header h6{
        color: var(--contrast);
        text-transform: uppercase;
        font-weight: bold;
    }
    .values .section-header h2{
        font-size: 45px;
        font-weight: bold;
        color: var(--white);
    }

    .values .section-header h2::after{
        content: "";
        height: 5px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: 0;
        left: 46%;
        right: 40%;
        border-radius: 5px;
    }

    .values .values-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: 0 5px;
        padding: 30px 0;
    }

    .values  .values-item{
        display: flex;
        margin: 10px 0;
    }

    .values .values-item .values-item-icon {
        margin: 0 10px;
    }


    .values .values-item .values-item-icon .fa-people-roof, .values .values-item .values-item-icon .fa-screwdriver-wrench, .values .values-item .values-item-icon .fa-person-circle-exclamation, .values .values-item .values-item-icon .fa-circle-check{
        background: var(--gray);
        color: var(--contrast);
        /* font-size: 20px; */
        height: 20px;
        width: 20px;
        padding: 15px;
        border-radius: 100%;
    }
    
    .values .values-item .values-item-align{
        padding: 5px 0;
    }
    .values .values-item .values-item-align .values-item-header h3{
        font-size: 30px;
        color: var(--white);
    }

    .values .values-item .values-item-align .values-item-text p{
        font-size: 18px;
        color: var(--gray);
    }


    .values .values-item .values-item-align .values-item-text .list-item{
        color: var(--gray);
    }

    .values .values-item .values-item-align .values-link a{
        color: var(--white);
        text-decoration: none;
        padding: 8px 10px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        text-transform: capitalize;
    }

    .values .values-item .values-item-align .values-link a:hover{
        background: none;
    }

     /* testimonials */
    
     .testimonial{
        position: relative;
        padding: 45px 0;
        background: var(--white-gray);
    }

    .testimonial .testimonial-carousel{
        width: calc(100% + 30px);
    }

    .owl-carousel .item{
        padding: 20px;
    }

    .testimonial .section-header{
        position: relative;
    }

    .testimonial .section-header h2::after{
        content: "";
        height: 5px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: 0;
        left: 46%;
        right: 40%;
        border-radius: 5px;

    }

    .testimonial .testimonial-item{
        position: relative;
        margin: 0 15px;
        padding: 20px;
        background: var(--primary);
        overflow: hidden;
        border-radius: 5px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--contrast);
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 60px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
        color: var(--dull-blue);
        margin: 2px;
    }

        /* contact */
        .contact{
            padding: 10px 20px;
            background: var(--white-gray);
        }
    
        .contact .contact-item .contact-details{
            padding: 10px 0;
            margin: 10px 0;
            border: 1px solid var(--dull-blue);
            text-align: center;
        }
    
        .contact .contact-item .contact-details a{
            text-decoration: none;
            font-size: 20px;
        }
    
        .contact .contact-item .contact-details svg{
            color: var(--contrast);
            font-size: 25px;
        }
    
        .contact .contact-form{
            padding: 0 0;
            width: 600px;
        }
    
        .contact .contact-form .name-align input{
            border: 2px solid var(--contrast);
            height: 45px;
            width: 290px;
            padding: 5px;
            margin: 10px 0;
        }
    
        .contact .contact-form input{
            width: 582px;
            padding: 5px;
            height: 40px;
            border: 2px solid var(--contrast);
            margin: 10px 0;
            height: 45px;
        }
    
        .contact .contact-form button{
            width: 582px;
            height: 55px;
            padding: 5px;
            border: 2px solid var(--contrast);
            margin: 2px 0;
            font-size: 20px;
            background: var(--primary-color);
            color: var(--white-gray);
        }
        
        .contact .contact-form button:hover{
            background: none;
            color: var(--primary-color);
        }
    

    /* footer */
    .footer{
        padding: 30px 0 10px 0;
        background: var(--dull-blue);
        color: var(--white-gray);
    }

    .footer .footer-item h2{
        color: var(--contrast);
    }

    .footer .trade-mark{
        text-align: center;
        margin: 10px 0 0 0;

    }

    .footer .trade-mark h2{
        font-size: 10px;
    }
    .footer .footer-item .footer-contacts{
        margin-top: 10px;
    }

    .footer .footer-item .footer-contacts svg{
        color: var(--contrast);
        font-size: 25px;
        margin-right: 2px;
        padding: 5px;
    }
    .footer .footer-item .footer-contacts a{
        font-size: 25px;
        text-align: center;
        color: var(--white-gray);
    }
    .footer .footer-item .footer-contacts a:hover{
        color: var(--contrast);
    }












}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .navbar{
        background-color: var(--primary-color);
    }
    .navbar .navbar-brand {
        height: 100px;
        width: 50%;
    }

    .navbar .collapse{
        width: 50%;

    }

    .navbar .navbar-brand img{
        height: 100%;
        width: 150px;
    }

    .navbar .navbar-nav .nav-item{
        margin: 0 40px;
    }

    .navbar .navbar-nav .nav-item .nav-link{
        color: var(--white);
        transition: .5s;
        font-weight: 700;
    }

    .navbar .navbar-nav .nav-item a.active{
        color: var(--contrast);
    }

    .navbar .navbar-nav .nav-item a:hover{
        font-weight: bold;
        color: var(--gray);
    }

    .banner {
        width: 100%;
        height: calc(100vh - 90px);
        background-image: url("./assets/banner-images/banner-img.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    
    .banner .trasbox{
        height: 100%;
        width: 100%;
        background-color: rgba(94, 158, 222, 0.9);
        z-index: 1;
        color: var(--white);
        z-index: -1;
    }

    .banner .trasbox .banner-inner{
        display: flex;
        height: 100%;
    }

    .banner .trasbox .banner-item{
        height: 100%;
        width: 50%;
    }

    .banner .trasbox .banner-inner .banner-item .caption{
        display: flex;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        align-content: baseline;
        padding: 30px 10px;
        height: 100%;
    }

    .banner .trasbox .banner-inner .banner-item .caption h3{
        font-weight: bolder;
        font-size: 40px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links a{
        text-decoration: none;
        transition: .5s;
    }
    .banner .trasbox .banner-inner .banner-item .caption .links .first{
        font-size: 16px;
        padding: 6px 12px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        color: var(--white);
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .first:hover{
        border: 2px solid var(--contrast);
        background: none;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last{
        font-size: 16px;
        border: 2px solid var(--contrast);
        color: var(--white);
        padding: 6px 12px;
    }

    .banner .trasbox .banner-inner .banner-item .caption .links .last:hover{
        background: var(--contrast);
    }

    .banner .banner-inner .banner-item .banner-carousel{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 10px;
        height: 100%;
    }

    .banner .banner-item .banner-carousel .carousel{
        box-shadow: -10px 5px 5px var(--white);
        rotate: 1deg;
    }

    .job-openings{
        width: 100%;
        margin: 30px 0;
    }

    .job-openings .section-header{
        position: relative;
        width: 100%;
        margin: 20px 0;
        text-align: center;
    }

    .job-openings .section-header h2{
        text-transform: capitalize;
        font-size: 35px;
        margin: 10px 0;
    }

    .job-openings .section-header h2::after{
        content: "";
        height: 7px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: -8px;
        border-radius: 5px;
        left: 46%;
        right: 40%;
    }

    .job-openings .header-text{
        font-size: 20px;
    }



    .job-openings .job-item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 300px;
        width: 100%;
        background: var(--gray);
        padding: 10px 5px;
        margin: 5px 0;
    }

    .job-openings .job-item.electrician{
        background: url("assets/job-openings/electrician.jpg");
        background-size: cover;
    }

    .job-openings .job-item.welder{
        background: url("assets/job-openings/welder.jpeg");
        background-size: cover;
    }
    .job-openings .job-item.painter{
        background: url("assets/job-openings/painter.jpg");
        background-size: cover;
    }
    .job-openings .job-item.iron-worker{
        background: url("assets/job-openings/iron-worker.jpg");
        background-size: cover;
    }

    .job-openings .job-item.cladding{
        background: url("assets/job-openings/caldding.jpg");
        background-size: cover;
    }


    .job-openings .job-item.it-prof{
        background: url("assets/job-openings/info-com.jpg");
        background-size: cover;
    }

    .job-openings .job-item .job-title h3{
        color: var(--primary-color);
        font-weight: 600;
    }

    .job-openings .job-item .job-link{
        border-radius: 100%;
        background: var(--white);
        width: 40px;
        height: 40px;
        padding: 10px;
        text-align: center;
    }

    .job-openings .job-item .job-link a .fa-arrow-right{
        color: var(--contrast);
    }

    .job-openings .job-item .job-link:hover{
        background: var(--primary-color);
        color: var(--white);
    }

    .job-openings .more-job-link{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px 0;
    }

    .job-openings .more-job-link a{
        text-decoration: none;
        text-transform: capitalize;
        font-size: 18px;
        border : 2px solid var(--contrast);
        padding: 5px 10px;
        text-align: center;
        color: var(--white);
        background: var(--contrast);
        transition: .5s;
    }
    .job-openings .more-job-link a:hover{
        color: var(--black);
        background: none;
    }

    .values{
        border-bottom: 2px solid var(--contrast);
        margin: 0 0;
        background: var(--dull-blue);
        padding: 20px 0;
        position: relative;
    }

    .values .section-header, .contact .section-header{
        text-align: center;
        position: relative;
    }

    .values .section-header h6{
        color: var(--contrast);
        text-transform: uppercase;
        font-weight: bold;
    }
    .values .section-header h2,.contact .section-header h2{
        font-size: 45px;
        font-weight: bold;
        color: var(--white);
    }

    .values .section-header h2::after,.contact .section-header h2::after{
        content: "";
        height: 5px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: 0;
        left: 46%;
        right: 40%;
        border-radius: 5px;
    }

    .values .values-inner{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        margin: 0 5px;
        padding: 30px 0;
    }

    .values  .values-item{
        display: flex;
        margin: 10px 0;
    }

    .values .values-item .values-item-icon {
        margin: 0 10px;
    }

    .values .values-item .values-item-icon svg, .values .values-item .values-item-icon svg, .values .values-item .values-item-icon svg{
        background: var(--gray);
        color: var(--contrast);
        /* font-size: 20px; */
        height: 20px;
        width: 20px;
        padding: 15px;
        border-radius: 100%;
    }
    .values .values-item .values-item-align{
        padding: 5px 0;
    }
    .values .values-item .values-item-align .values-item-header h3{
        font-size: 30px;
        color: var(--white);
    }

    .values .values-item .values-item-align .values-item-text p{
        font-size: 18px;
        color: var(--gray);
    }

    .values .values-item .values-item-align .values-item-text .list-item{
        color: var(--gray);
    }

    .values .values-item .values-item-align .values-link a,.footer-item .values-link a{
        color: var(--white);
        text-decoration: none;
        padding: 8px 10px;
        border: 2px solid var(--contrast);
        background: var(--contrast);
        text-transform: capitalize;
    }

    .values .values-item .values-item-align .values-link a:hover,.footer ,.footer-item .values-link a:hover{
        background: none;
    }

    /* testimonials */
    
    .testimonial{
        position: relative;
        padding: 45px 0;
        background: var(--white-gray);
    }

    .testimonial .testimonial-carousel{
        width: calc(100% + 30px);
    }

    .owl-carousel .item{
        padding: 20px;
    }

    .testimonial .section-header{
        position: relative;
    }

    .testimonial .section-header h2::after{
        content: "";
        height: 5px;
        background: var(--contrast);
        position: absolute;
        width: 100px;
        bottom: 0;
        left: 46%;
        right: 40%;
        border-radius: 5px;

    }

    .testimonial .testimonial-item{
        position: relative;
        margin: 0 15px;
        padding: 20px;
        background: var(--primary);
        overflow: hidden;
        border-radius: 5px;
    }
    
    .testimonial .testimonial-item h2{
        color: var(--contrast);
        font-size: 22px;
        font-weight: 600;
        margin-bottom: 5px;
        font-style: italic;
    }

    .owl-carousel .testimonial-item p{
        font-size: 16px;
    }

    .testimonial .testimonial-item .fa-quote-right{
        position: absolute;
        top: 0;
        right: 0;
        font-size: 60px;
        columns: #333333;
        transform: rotate(45deg);
        z-index: 1;
        color: var(--dull-blue);
        margin: 2px;
    }
    /* contact */
    .contact{
        padding: 10px 20px;
        background: var(--white-gray);
    }

    .contact .contact-item .contact-details{
        padding: 10px 0;
        margin: 10px 0;
        border: 1px solid var(--dull-blue);
        text-align: center;
    }

    .contact .contact-item .contact-details a{
        text-decoration: none;
        font-size: 20px;
    }

    .contact .contact-item .contact-details svg{
        color: var(--contrast);
        font-size: 25px;
    }

    .contact .contact-form{
        padding: 0 0;
        width: 600px;
    }

    .contact .contact-form .name-align input{
        border: 2px solid var(--contrast);
        height: 45px;
        width: 290px;
        padding: 5px;
        margin: 10px 0;
    }

    .contact .contact-form input{
        width: 582px;
        padding: 5px;
        height: 40px;
        border: 2px solid var(--contrast);
        margin: 10px 0;
        height: 45px;
    }

    .contact .contact-form button{
        width: 582px;
        height: 55px;
        padding: 5px;
        border: 2px solid var(--contrast);
        margin: 2px 0;
        font-size: 20px;
        background: var(--primary-color);
        color: var(--white-gray);
    }

    .contact .contact-form button:hover{
        background: none;
        color: var(--primary-color);
    }
    /* footer */
    .footer{
        padding: 30px 0 10px 0;
        background: var(--dull-blue);
        color: var(--white-gray);
    }

    .footer .footer-item h2{
        color: var(--contrast);
    }

    .footer .trade-mark{
        text-align: center;
        margin: 10px 0 0 0;

    }

    .footer .trade-mark h2{
        font-size: 10px;
    }
    .footer .footer-item .footer-contacts{
        margin-top: 10px;
    }

    .footer .footer-item .footer-contacts svg{
        color: var(--contrast);
        font-size: 25px;
        margin-right: 2px;
        padding: 5px;
    }
    .footer .footer-item .footer-contacts a{
        font-size: 25px;
        text-align: center;
        color: var(--white-gray);
    }
    .footer .footer-item .footer-contacts a:hover{
        color: var(--contrast);
    }














}