/*====================================================
                DEFAULT VALUES:

                Body Color                  : #35383b;
                
                Greenish Blue               : #34c6d3       (Buttons, Icons, Links, Lines & Backgrounds)
                Steel Gray                  : #41464b       (Headings)
                Blue Bayoux                 : #4b4a4a       (Paragraphs)
                White                       : #fff          (Text With Black Backgrounds)
                Steel blue                  : #224364; color: #1313cc;
                Orange                      : rgba(255, 128, 0, 0.65);
                Orange                        color: rgb(255, 128, 0);

======================================================*/

/* General CSS */

html,
body {
    height: 100%;
}

body {

    color: #373840;
    font-family: 'Roboto', sans-serif;
    font-family: 'Lato', sans-serif;
    font-family: 'Roboto Condensed', sans-serif;
    font-family: 'Open Sans Condensed', sans-serif;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}

h1 {
    font-family: 'Lato', sans-serif, 'Roboto';
    color: #1313cc;
    padding-bottom: 10px;

}

h3 {
    font-family: 'Lato', sans-serif, 'Roboto';
    color: #1313cc;
    padding-top: 10px;

}

.ptext {

    font-family: 'Lato', sans-serif, 'Roboto';
    color: #1313cc;
    margin-left: auto;
    margin-right: auto;
}


.primary-color-background {
    background-color: #fff;
}

/* titles */

.section-titles {

    color: #1313cc;
    text-transform: uppercase;
    font-weight: 400;
    padding-top: 40px;
    font-family: 'Lato', sans-serif, 'Roboto';
}

/* viewport classes */

.max-viewport {
    min-height: 100vh;
}

.viewport-60 {
    min-height: 60vh;
}

/* Header */

.logo {

    height: 45px;
    width: 85px;
    float: left;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
}

.logo1 {

    height: 45px;
    width: 100px;
    float: right;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
}

.height {
    min-height: 100vh;
    overflow: hidden;
}

.header {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
    clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
}

.height-max {

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/header.JPG");
    min-height: calc(100vh - 76px);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    -webkit-animation-name: zoom;
    animation-name: zoom;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;

}

@-webkit-keyframes zoom {

    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2) translateX(-5%);
        transform: scale(1.2) translateX(-5%);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}

@keyframes zoom {

    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2) translateX(-5%);
        transform: scale(1.2) translateX(-5%);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

}


.title-heading {

    border-left: 0.2rem solid #1313cc;
    color: #fff;
    font-weight: 600;
    font-size: 2rem;
    font-family: 'Lato', sans-serif, 'Roboto';
}


.title {

    font-weight: 400;
    font-size: 15px;
    color: #fff;
    font-family: 'Lato', sans-serif, 'Roboto';
}


.title3 {

    font-weight: 400;
    font-size: 22px;
    color: #fff;
    font-family: 'Lato', sans-serif, 'Roboto';
}



.title-icon {

    color: #1313cc;
    text-decoration: none;
}


.title-icon:hover {

    color: rgba(0, 0, 255, 0.67);
    opacity: 0.6;
}


/*====================================================
                       NAVIGATION
======================================================*/

.navbar {

    background: #fff;
}


.crawfordsteel p {

    color: #1313cc;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Lato', sans-serif, 'Roboto';
}


.nav-link {

    color: #1313cc;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Lato', sans-serif, 'Roboto';
}

.nav-link:hover {

    color: rgba(0, 0, 255, 0.78);
}

.navbar-toggler {

    background-color: rgba(0, 0, 255, 0.19);
    border: 1px solid rgba(0, 0, 255, 0.78);
    border-radius: 50px;
    padding: 10px 5px 10px 5px;
    color: white;
}


.navbar-collapse {

    max-height: none !important;
}

.nav-icon {

    color: #1313cc;
    text-decoration: none !important;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    font-size: 1rem;
    letter-spacing: 1rem;
}

.nav-icon:hover {
    color: rgba(0, 0, 255, 0.07);
}


/* COVID */

.covid img {

    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    padding: 0px 0px 0px 0px;
}


/* ABOUT */

.aboutp {

    padding: 10px 10px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    color: #373840;
    font-weight: 500;
}

.img-about {

    display: block;
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: none;
}

.supply {

    color: #1313cc;

}

/* PRODUCTS */


#products img {

    width: 80%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5%;

}

.text12 {

    width: 90%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 15px 20px 15px;
    display: block;
}


.text10 {

    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 25px 20px 25px;
}


/* Power drills */

#powerdrills {

    background: linear-gradient(rgba(224, 225, 239, 0.52), rgba(224, 225, 239, 0.52));

}

#powerdrills img {

    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-radius: 5%;


}

#powerdrills h3 {

    font-size: 20px;
    font-weight: 500;
    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 5px 10px 5px;
    color: #373840;

}

/* brands */

#brands img {

    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
    padding-bottom: 50px;
    padding-top: 50px;

}

/* Industries */



#industries {

    background: linear-gradient(rgba(224, 225, 239, 0.52), rgba(224, 225, 239, 0.52));

}


#industries img {

    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#industries h3 {

    font-size: 22px;
    font-weight: 500;
    color: #1313cc;
}



/* analytics */

#analytics {

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url("../img/building.jpeg");
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/building.jpeg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.seo {

    font-size: 80px;
    font-weight: 300;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Display Section */

#background-photo {

    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/Aspect100.jpg");
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* TEAM */


#team img {

    width: 95%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;

}

.team-member-name {

    color: #1313cc;
    text-transform: uppercase;
    font-weight: 400;
    padding-top: 10px;
    font-family: 'Lato', sans-serif, 'Roboto';
    font-size: 21px;

}

.team-member-designation {

    color: #373840;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Lato', sans-serif, 'Roboto';
    font-size: 18px;
    padding-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;

}

.team-members img {

    width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/*====================================================
                       CONTACT
======================================================*/

#footer-cover {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0.6))), url("../img/header.JPG");
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../img/header.JPG");
    background-color: #fff;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

#contact-left h3,
#contact-right h3 {
    color: #fff;
    font-size: 27px;
    font-weight: 500;
    margin-left: 10px;
    text-transform: uppercase;
    font-family: 'Lato', sans-serif, 'Roboto';
    padding-top: 30px;
}

#contact-right {
    color: #fff;
    padding: 15px 5px 5px 5px;
    margin: 0 auto;
}

#contact-left {
    color: #fff;
    padding: 25px 5px 5px 5px;
    margin: 0 auto;
}

#contact-left p {
    color: #fff;
    display: inline-block;
    font-family: 'Lato', sans-serif, 'Roboto';
}

#contact-info {

    background-repeat: no-repeat;
    background-size: contain;
}

address {
    color: #fff;
    margin-top: 50px;
    font-family: 'Lato';
}

address strong {
    font-size: 16px;
    font-family: 'Lato';
}

address strong,
#phone-fax-email strong {
    letter-spacing: 1px;
    font-family: 'Lato';
}

#phone-fax-email {
    float: right;
}

form .form-control {
    background: transparent;
    border-radius: 0;
    border-color: #fff;
    font-size: 17px;
    font-weight: 300;
    padding: 8px 16px;
    margin-bottom: 20px;
    color: #fff;
    font-family: 'Lato';
}

.name {
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Lato', sans-serif, 'Roboto';
    font-size: 23px;

}


.name2 {

    text-transform: uppercase;
    font-weight: 400;
    font-family: 'Lato', sans-serif, 'Roboto';
    font-size: 17px;
}



/* CONTACT FORM */


.contact-form {
    width: 100%;
    padding-left: 40px;

}

input[type=message],
textarea {

    width: 180%;
    height: 160px;
    padding: 7px;
    border-radius: 4%;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-family: 'Lato', sans-serif, 'Roboto';
}

input[type=text],
input[type=email],
select,
textarea {

    width: 180%;
    padding: 7px;
    border-radius: 4%;
    border: 1px solid rgba(255, 255, 255, 0.59);
    font-family: 'Lato', sans-serif, 'Roboto';
}

*:focus {
    outline: none;
}


#name {
    color: white;
    background-color: rgba(128, 128, 128, 0.4);
}

#place {
    color: Blue;
    background-color: rgba(128, 128, 128, 0.4);
}

#find-us {
    color: white;
    background-color: rgba(128, 128, 128, 0.4);
}

#message {
    color: white;
    background-color: rgba(128, 128, 128, 0.4);
}

.option {
    color: white;
    background-color: #72818A;
}

.buttsend {

    padding: 10px 10px 10px 10px;

}

::placeholder {

    color: #fff;
    font-family: 'Lato', sans-serif, 'Roboto';
}

/*====================================================
                       FOOTER BOTTOM
======================================================*/

#footer-bottom {

    padding: 20px 0;
    background-color: rgba(150, 149, 149, 0.56);
}

#footer-copyrights p {

    margin: 0;
    color: #fff;
    font-family: 'Lato', sans-serif, 'Roboto';
}

#footer-menu {

    float: left;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    font-family: 'Lato', sans-serif, 'Roboto';
}

#footer-menu ul {

    list-style: none;
    padding-left: 0;
    margin: 0;
}

#footer-menu ul li {

    display: inline-block;
}

#footer-menu a {

    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin: 0 10px;
    text-decoration: none;
    font-family: 'Lato', sans-serif, 'Roboto';
}

#footer-menu a:hover {

    color: Blue;
}

/*====================================================
                       SOCIAL
======================================================*/

.social-list {

    padding-left: 0;
}

.social-list li {

    list-style: none;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 16px;
    margin-top: 10px;
}

.social-icon i {

    font-size: 35px;
}

.icon-white i {

    color: #fff;
}

.social-icon i:hover {

    color: #1313cc;
}


/*====================================================
                       SEND BUTTON
======================================================*/

.send {

    border-color: #4a4ad4;
    border-radius: 5px;
    color: #4a4ad4;
    text-align: center;
    padding: 5px 10px 5px 10px;
    font-family: 'Lato', sans-serif, 'Roboto';
    background-color: #1313cc;
    color: #fff;
}

.send:hover,
.send:focus {

    background-color: #fff;
    color: #1313cc;
}

.btn-blue {

    border-color: #1313cc;
    color: #1313cc;
    background-color: #fff;
}


/*====================================================
                       BACK TO TOP BUTTON
======================================================*/

.btn-back-to-top {

    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 20px;
    padding: 3px 12px;
    border-radius: 50%;
    display: none;
    color: #1313cc;
    border-color: #4a4ad4;
    background-color: #fff;
}

.btn-blue:hover,
.btn-blue:focus {
    background-color: #fff;
    color: red;
}


/*====================================================
      CONTACT FORM 
======================================================*/


.success {
    background-color: #fff;
    color: #2f6184;
}


.error {
    background-color: red;
    color: #fff;
}