* {
    margin: 0;
}

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;

    background-color: #FCFCFC;
}

p, h1, h2, h3, h4, h5, button {
    font-family: "Roboto", sans-serif;
    font-weight: 400;

    margin: 0;

    color: #1E1F22;
}

h3 {
    font-size: 1.2rem;
}

p {
    font-size: 0.9rem;
}

a {
    text-decoration: none;
}

@media only screen and (max-width: 768px) {
    p {
        font-size: 0.85rem;
    }
}

@media only screen and (max-width: 576px) {
    p {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 768px) {
    h1 {
        font-size: 1.5rem;
    }
}

@media only screen and (max-width: 576px) {
    h1 {
        font-size: 1.25rem;
    }
}

.btn-close:focus {
    box-shadow: none !important;
}

.material-symbols-outlined {
    vertical-align: middle;
}

.img-rounded > source {
    border-radius: 10px;
}

.img-rounded > img {
    border-radius: 10px;
}

/* Preloader */

.preloader-wrapper {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;
}

.preloader-wrapper > div {
    position: relative;

    width: 100%;
    height: 100%;
}

.preloader-wrapper > div > div {
    position: absolute;
    z-index: 1000;
    top: 50%;
    left: 50%;

    display: block;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

.spinner-border {
    width: 5rem;
    height: 5rem;
}

.spinner-grow {
    width: 5rem;
    height: 5rem;
}

/* End of preloader */

/* Navbar */

.scroll {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}

.navbar {
    -webkit-transition: all 0.5s;
         -o-transition: all 0.5s;
            transition: all 0.5s;

    background-color: #FCFCFC;
    -webkit-box-shadow: 0 5px 10px -5px rgba(30, 31, 34, 1);
            box-shadow: 0 5px 10px -5px rgba(30, 31, 34, 1);
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.navbar-toggler-icon {
    font-size: 2rem;

    display: inline;

    vertical-align: text-bottom;

    color: #1E1F22;
    /*
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(30,31,34,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
    */
    background-image: none !important;
}

.nav-link:hover > p {
    color: #9E9E9E;
}

.nav-link:hover > span {
    color: #9E9E9E;
}

@media only screen and (max-width: 990px) {
    .nav-link {
        margin-top: 1rem;
        margin-bottom: 1rem;

        border: 2px solid #1E1F22;
    }
}

.nav-link > span {
    font-size: 2rem;

    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    vertical-align: top;

    color: #1E1F22;
}

.nav-link > p {
    font-family: "Roboto", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;

    position: relative;

    display: inline-block;

    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
    text-align: center;

    color: #1E1F22;
}

.nav-link > p::after {
    display: block;

    width: 0;
    height: 2px;

    content: "";
    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;

    background: #9E9E9E;
}

@media only screen and (max-width: 768px) {
    .nav-link > p::after {
        display: none;
    }
}

.nav-link:hover > p::after {
    width: 100%;

    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;
}

/* End of navbar */

/* Hello page */

.hello-page {
    position: relative;

    height: 80vh;
}

@media only screen and (max-width: 768px) {
    .hello-page > div {
        width: 75%;
    }
}

@media only screen and (max-width: 576px) {
    .hello-page > div {
        width: 100%;
    }
}

.no-webp .hello-page {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.png");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.8)), to(rgba(252, 252, 252, 0.8))), url("../img/hello-page.png");
    background:    linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.webp .hello-page {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.webp");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.8)), to(rgba(252, 252, 252, 0.8))), url("../img/hello-page.webp");
    background:    linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.no-js .hello-page {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.png");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.8)), to(rgba(252, 252, 252, 0.8))), url("../img/hello-page.png");
    background:    linear-gradient(rgba(252, 252, 252, 0.8), rgba(252, 252, 252, 0.8)), url("../img/hello-page.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.no-webp .hello-page-form {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.png");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.9)), to(rgba(252, 252, 252, 0.9))), url("../img/hello-page.png");
    background:    linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.webp .hello-page-form {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.webp");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.9)), to(rgba(252, 252, 252, 0.9))), url("../img/hello-page.webp");
    background:    linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.webp");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.no-js .hello-page-form {
    background: -o-linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.png");
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(252, 252, 252, 0.9)), to(rgba(252, 252, 252, 0.9))), url("../img/hello-page.png");
    background:    linear-gradient(rgba(252, 252, 252, 0.9), rgba(252, 252, 252, 0.9)), url("../img/hello-page.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.hello-page > div {
    position: absolute;
    top: 50%;
    left: 50%;

    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}

@media only screen and (max-width: 768px) {
    .hello-page > div > picture > img {
        width: 60vw;
    }
}

@media only screen and (max-width: 576px) {
    .hello-page > div > picture > img {
        width: 80vw;
    }
}

/* End of hello page */

/* About us page */

.about-us-page > div > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* End of about us page */

/* Automation page */

/* End of automation page */

/* Service page */

/* End of service page */

/* Electrotechnology page */

/* End of electrotechnology page */

/* They trusted us page */

/* End of they trusted us page */

/* Contact page */

.contact_p {
    font-size: 1.1rem;
}

@media only screen and (max-width: 768px) {
    .contact_p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .contact_p {
        font-size: 0.95rem;
    }
}

.contact_p_email {
    font-size: 0.9rem;
}

@media only screen and (max-width: 1140px) {
    .contact_p_email {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 768px) {
    .contact_p_email {
        font-size: 1rem;
    }
}

.contact_i {
    font-size: 1.8rem;
}

@media only screen and (max-width: 768px) {
    .contact_i {
        font-size: 1.3rem;
    }
}

@media only screen and (max-width: 576px) {
    .contact_i {
        font-size: 1.2rem;
    }
}

.col {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.contact-page > div > div > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
        flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.captcha_row > .captcha_col_left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    border-right: 1px solid #6C757D;
}

.captcha_row > .captcha_col_right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;

    border-left: 1px solid #6C757D;
}

.captcha_link {
    text-decoration: none;
}

.captcha_link > span {
    position: relative;

    display: inline-block;

    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;

    color: #6C757D;
}

.captcha_link > span::after {
    display: block;

    width: 0;
    height: 2px;

    content: "";
    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;

    background: #6C757D;
}

.captcha_link:hover > span::after {
    width: 100%;

    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;
}

.contact-page > div > div > div > form > div > button {
    font-weight: 500;

    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;

    color: #FCFCFC;
    border: solid 2px #FCFCFC;
    background-color: #1E1F22;
}

.contact-page > div > div > div > form > div > button:hover {
    font-weight: 500;

    color: #1E1F22;
    border: solid 2px #1E1F22;
    background-color: #FCFCFC;
}

@media only screen and (max-width: 768px) {
    .form-control, .form-check-label, small {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .form-control, .form-check-label, small {
        font-size: 0.8rem;
    }
}

/* End of contact page */

/* Footer page */

.footer-page {
    background-color: #1E1F22;
}

.footer-page > p {
    color: #FCFCFC;
}

@media only screen and (max-width: 768px) {
    .footer-page > p {
        font-size: 1rem;
    }
}

@media only screen and (max-width: 576px) {
    .footer-page > p {
        font-size: 0.8rem;
    }
}

.footer-page-royalty {
    background-color: #42444B;
}

.footer-page-royalty > p {
    color: #FCFCFC;
}

@media only screen and (max-width: 768px) {
    .footer-page-royalty > p {
        font-size: 0.8rem;
    }
}

@media only screen and (max-width: 576px) {
    .footer-page-royalty > p {
        font-size: 0.5rem;
    }
}

.footer-page-royalty > p > a {
    text-decoration: none;
}

.footer-page-royalty > p > a > span {
    position: relative;

    display: inline-block;

    -webkit-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;

    color: #D5D5D5;
}

.footer-page-royalty > p > a > span::after {
    display: block;

    width: 0;
    height: 2px;

    content: "";
    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;

    background: #D5D5D5;
}

.footer-page-royalty > p > a:hover > span::after {
    width: 100%;

    -webkit-transition: width 0.3s;
         -o-transition: width 0.3s;
            transition: width 0.3s;
}

/* End of footer page */
