/* ++++++++++++++++++++++++++++++++++++ main-css ++++++++++++++++++++++++++++++++++++ */
/* #region main-css */

/*======================== Root Variables ========================*/
/*#region------------ root variables ------------*/
:root {
    /*============ COLORS ============*/
    --temp: rgb(225, 226, 226);
    --color-picker: rgb(241, 129, 42);
    --clr-primary: rgba(32, 68, 154, 1);
    --clr-secondary: rgba(255, 255, 255, 1);
    --clr-accent: rgba(33, 32, 31, 1);
    --clr-neutral: rgb(255, 255, 255);
    --clr-text-light: rgba(255, 255, 255, 1);
    --clr-text-dark: rgba(29, 34, 40, 1);

    /*============ FONT VARIABLES & SETTINGS ============*/
    font-size: 16px;
    --ff-primary: sans-serif;
    --ff-serif: Georgia, 'Times New Roman', Times, serif;
    --ff-sans-serif: Verdana, Geneva, Tahoma, sans-serif;
    --ff-monospace: 'Courier New', Courier, monospace;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);
    --ff-button: var(--ff-primary);
    /*---------------------------------------------------*/
    --fw-thin: 100;
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;
    /*---------------------------------------------------*/
    --fs-800: 0.8rem;
    --fs-900: 0.9rem;
    --fs-1000: 1rem;
    --fs-1100: 1.1rem;
    --fs-1200: 1.2rem;
    --fs-1300: 1.3rem;
    --fs-1400: 1.4rem;
    --fs-1500: 1.5rem;
    --fs-1600: 1.6rem;
    --fs-1700: 1.7rem;
    --fs-1800: 1.8rem;
    --fs-1900: 1.9rem;
    --fs-2000: 2rem;
    --fs-2100: 2.1rem;
    --fs-2200: 2.2rem;
    --fs-2300: 2.3rem;
    --fs-2400: 2.4rem;
    --fs-2500: 2.5rem;
    --fs-2600: 2.6rem;
    --fs-2700: 2.7rem;
    --fs-2800: 2.8rem;
    --fs-2900: 2.9rem;
    --fs-3000: 3rem;
    --fs-3100: 3.1rem;
    --fs-3200: 3.2rem;
    --fs-3300: 3.3rem;
    --fs-3400: 3.4rem;
    --fs-3500: 3.5rem;

    --fs-primary-heading: var(--fs-3500);
    --fs-secondary-heading: var(--fs-2000);
    --fs-body: var(--fs-1100);
    --fs-button: var(--fs-1100);

    /*============ PAGE LAYOUT ============*/
    --page-margin: 5vw;
    --section-gap: 0rem;
    --topnav-height: 192px;
}
/* Variables for small screen sizes */
@media only screen and (max-width: 600px) {
  :root {
    --fs-primary-heading: var(--fs-1200);
    --fs-secondary-heading: var(--fs-1000);
  }
}
/*#endregion*/

/*============ UTILLITY CLASSES ============*/
/*#region------------ utillity classes ------------*/
/*------------ Text Utils ------------*/
.text-align-left {
    text-align: left;
}
.text-align-center {
    text-align: center;
}
.text-align-right {
    text-align: right;
}
.fs-800 {
    font-size: var(--fs-800);
}
.fs-900 {
    font-size: var(--fs-900);
}
.fs-1000 {
    font-size: var(--fs-1000);
}
.fs-1100 {
    font-size: var(--fs-1100);
}
.fs-1200 {
    font-size: var(--fs-1200);
}
.fs-1300 {
    font-size: var(--fs-1300);
}
.fs-1400 {
    font-size: var(--fs-1400);
}
.fs-1500 {
    font-size: var(--fs-1500);
}
.fs-1600 {
    font-size: var(--fs-1600);
}
.fs-1700 {
    font-size: var(--fs-1700);
}
.fs-1800 {
    font-size: var(--fs-1800);
}
.fs-1900 {
    font-size: var(--fs-1900);
}
.fs-2000 {
    font-size: var(--fs-2000);
}
.fs-2100 {
    font-size: var(--fs-2100);
}
.fs-2200 {
    font-size: var(--fs-2200);
}
.fs-2300 {
    font-size: var(--fs-2300);
}
.fs-2400 {
    font-size: var(--fs-2400);
}
.fs-2500 {
    font-size: var(--fs-2500);
}
.fs-2600 {
    font-size: var(--fs-2600);
}
.fs-2700 {
    font-size: var(--fs-2700);
}
.fs-2800 {
    font-size: var(--fs-2800);
}
.fs-2900 {
    font-size: var(--fs-2900);
}
.fs-3000 {
    font-size: var(--fs-3000);
}
.fs-3100 {
    font-size: var(--fs-3100);
}
.fs-3200 {
    font-size: var(--fs-3200);
}
.fs-3300 {
    font-size: var(--fs-3300);
}
.fs-3400 {
    font-size: var(--fs-3400);
}
.fs-3500 {
    font-size: var(--fs-3500);
}
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}

/* ---- Strandoo ---- */
html {
	font-size: 100%;
	height: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 140px;
	}

/*------------ Layout Utils ------------*/
.auto-top {
    margin-top: auto;
}
.auto-inline {
    margin-inline: auto;
}
.do-not-display {
    display: none !important;
}
.grid {
    display: grid;
}
.invisible {
    visibility: hidden;
}
/*------------ Transition Utils ------------*/
.slide-from-left-init {
    transform: translate(-100%, 0px);
}
.slide-from-right-init {
    transform: translate(100%, 0px);
}
/*#endregion*/
/* #endregion */

/*++++++++++++++++++++++++ CSS INCLUDES BELOW THIS LINE ++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++ _dev-kit.css ++++++++++++++++++++++++++++++++++++ */
/* #region _dev-kit */
* {
    /* outline: 1px solid red; */
}
.placeholder {
    color: cyan;
    background-color: magenta;
    /*outline: 1px solid yellow;*/
    font-family: 'Courier New', Courier, monospace;
}
.phpdevconsole {
    display: none;
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    overflow-y: scroll;
    padding: 1rem;
    color: green;
    background-color: black;
    /*outline: 1px solid yellow;*/
    font-family: 'Courier New', Courier, monospace;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ _toms-reset.css ++++++++++++++++++++++++++++++++++++ */
/* #region _toms-reset */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--ff-primary);
    text-decoration: none;
}
/*Fixes safari not respecting z-indexes with position sticky*/
section, footer {
    transform: translate3d(0,0,0);
}
img {
    max-width: 100%;
    max-height: 100%;
}
p {
    max-width: 800px;
    line-height: 1.4;
    font-size: 1.1rem;
}
a,
a:visited {
    color: inherit;
}
button {
    all: initial;
}
/*#endregion*//* ++++++++++++++++++++++++++++++++++++ site-styles.css ++++++++++++++++++++++++++++++++++++ */
/* #region site-styles.css */
.button {
    border: 2px solid white;
    padding-block: 0.8rem;
    padding-inline: 1.5rem;
    width: fit-content;
    min-width: 130px;
    background-color: var(--clr-accent);
    color: var(--clr-text-dark);
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-:hover {
    border: 2px solid var(--clr-primary);
    background-color: white;
    color: var(--clr-primary);
}

.button-alt {
    border: 2px solid white;
    padding-block: 0.8rem;
    padding-inline: 1.5rem;
    width: fit-content;
    min-width: 130px;
    background-color: var(--clr-primary);
    color: var(--clr-text-light) !important;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
}
.button-alt:hover {
    border: 2px solid var(--clr-primary);
    background-color: white;
    color: var(--clr-primary)!important;
}
/*#endregion*/


/* ++++++++++++++++++++++++++++++++++++ navbar-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region navbar-custom-css */

#topnav .inner {
    background-color: rgba(255, 255, 255, 1);
    color: ;
}
#topnav .inner a:hover {
    color: ;
}
#topnav .topbar {
    padding-block: px;
    padding-inline: px;
    background-color: ;
    color: ;
}
#topnav .topbar a:hover {
    color: ;
}
#topnav .logo-wrapper {
    padding-block: px;
    padding-inline: px;
}
#topnav .logo-wrapper img {
    width: 260px;
}

.angle-header a:hover {
color: white !important;
text-decoration: underline;
}
.angle-header i::before {
font-weight: 600 !important;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ navbar-css ++++++++++++++++++++++++++++++++++++ */
/* #region navbar-css */

.classic-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
}
.classic-header .inner {
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
    font-size: var(--fs-body);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.classic-header .inner a:hover {
    color: var(--clr-accent);
}
.classic-header .topbar {
    grid-column: span 12;
    padding-block: 0.5rem;
    background-color: var(--clr-accent);
    display: flex;
    justify-content: center;
}
.classic-header .topbar a:hover {
    color: var(--clr-text-dark);
}
.classic-header .logo-wrapper {
    padding-block: 1rem;
    grid-column: span 12;
    display: grid;
    place-content: center;
}
.classic-header .logo-wrapper a {
    display: grid;
    place-content: center;
}
.classic-header .logo-wrapper img {
    width: 150px;
}
.classic-header .nav-toggle-wrapper {
    padding-bottom: 0.5rem;
    grid-column: span 12;
    display: grid;
    place-content: center;
}
.classic-header .nav-toggle-wrapper i {
    font-size: 2rem;
}
.classic-header .nav-toggle-wrapper i:last-child {
    display: none;
}
.classic-header .topnav {
    grid-column: span 12;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s linear;
}
.classic-header .topnav[data-expanded] {
    max-height: 558px;
}
.classic-header .topnav > ul {
    padding-top: 1.3rem;
    margin-inline: auto;
    width: fit-content;
    max-width: 100%;
    list-style: none;
}
.classic-header .topnav > ul li {
    margin-bottom: 1.3rem;
}
.header-spacer {
    position: relative;
    z-index: -1;
    height: var(--topnav-height);
}

@media only screen and (min-width: 1000px) {
    .classic-header .nav-toggle-wrapper {
        display: none;
    }
    .classic-header .logo-wrapper {
        grid-column: span 4;
    }
    .classic-header .topnav {
        grid-column: span 8;
        max-height: fit-content;
        display: flex;
        justify-content: right;
        align-items: center;
    }
    .classic-header .topnav > ul {
        display: flex;
        column-gap: 2.5rem;
    }
}

/* ANGLE HEADER */
.angle-header {
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 7%);
}

.angle-header .topnav {
    background: var(--clr-primary);
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 100%);
}
.angle-header .nav-toggle-wrapper i {
    color: var(--clr-primary);
}

@media only screen and (min-width: 1000px) {
    .classic-header .logo-wrapper {
        grid-column: span 6;
    }
    .angle-header .topnav {
        grid-column: span 6;
        clip-path: polygon(2vw 0, 100% 0, 100% 100%, 0% 100%);
        box-shadow: none;
    }
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ hero-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region hero-custom-css */
#hero {
    min-height: vh;
    background-position: ;
    color: rgba(33, 32, 31, 1);
    justify-content: left;
    align-items: center;
}
#hero .overlay {
    background-color: rgba(255, 0, 0, 0);
    opacity: 1;}
#hero .inner {
    padding-inline: vw;
    align-items: ;
}
#hero .inner h1 {
    font-size: clamp(1.7rem, 5vw, 4rem);
}

/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ hero-css ++++++++++++++++++++++++++++++++++++ */
/* #region hero-css */

.classic-hero {
    overflow-x: hidden;
    position: relative;
    z-index: 100;
    min-height: 60vh;
    background-image: url(/site/assets/files/1025/cnc-lathe-machine-cutting-metal-screw-thread-part-hitechnology-parts-manufacturing-2.jpg);
    background-size: cover;
    background-position: center;
    color: var(--clr-text-light);
    display: flex;
    justify-content: center;
    align-items: center;
}
.classic-hero .overlay {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-color: var(--clr-accent);
    opacity: 0.75;
}
.classic-hero .inner {
    padding-inline: 5vw;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;

   /* max-width: 90%;*/
}
.classic-hero .inner h1 {
    font-size: clamp(1.7rem, 5vw, 4rem);
}

/* ANGLE HERO */
.angle-hero {
    /*margin-top: 1rem;*/
    box-shadow: 0 3px 20px 0px rgb(0 0 0 / 7%);
    overflow: hidden;
    background-size: cover;
    background-position-x: 500px;
}

.angle-hero .inner {
    position: relative;
    /*top: 0;*/
    margin-inline: auto;
    padding-block: 1.5rem;
    padding-inline: 3rem;
    min-width: 50%;
    max-width: 90%;
    height: 101%;
    clip-path: polygon(calc(0px + 7vw) 0, 100% 0, calc(100% - 7vw) 100%, 0% 100%);
    background-color: rgb(255 255 255 / 60%);
    display: flex;
    justify-content: center;
}

@media only screen and (min-width: 795px) {
    .angle-hero .inner {
        position: absolute;
        top: -1px;
        min-width: 50%;
        max-width: 50%;
        height: 101%;
        clip-path: polygon(0 0, 100% 0, calc(100% - 9vw) 100%, 0% 100%);
        background-color: var(--clr-secondary);
        display: flex;
        justify-content: center;
    }
}

@media only screen and (min-width: 1000px) {
    .angle-hero {
        position: sticky;
        z-index: 1;
        top: 170px;
    }
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ grid-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-custom-css */

#about {
    margin-top: 6rem;
    padding-inline: 0vw;
    background-color: rgba(32, 68, 154, 1);
}
#about .inner {
    grid-template-columns: repeat(2, 1fr);
}

#about {
position: relative;
z-index: 2;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ grid-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-css */

.grid-component {
    margin-top: var(--section-gap);
    padding-inline: 5vw;
}
.grid-component > .inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ grid-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-custom-css */

#reliable-quality-competitive {
    margin-top: rem;
    padding-inline: vw;
    background-color: rgba(255, 255, 255, 1);
}
#reliable-quality-competitive .inner {
    grid-template-columns: repeat(3, 1fr);
}

#reliable-quality-competitive {
position: relative;
z-index: 2;
padding-top: 6rem;
}
#reliable-quality-competitive .inner {
    max-width: 1300px;
    margin-inline: auto;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ iframe-embed-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region iframe-embed-custom-css */

#spacer {
    margin-top: 0rem;
}
#spacer .inner {
    margin-inline: 0vw;
}

#spacer {
position: relative;
z-index: 2;
height: 6rem;
background-color: white;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ iframe-embed-css ++++++++++++++++++++++++++++++++++++ */
/* #region iframe-embed-css */

.iframe-embed {
    margin-top: var(--section-gap);
}
.iframe-embed .inner {
    margin-inline: var(--page-margin);
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ hero-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region hero-custom-css */

#call-to-action {
    margin-top: rem;
    padding-block: rem;
    padding-inline: vw;
    background-position: center;
    color: ;
}
#call-to-action::before {
    background-color: ;
    }
#call-to-action .inner {
    column-gap: vw;
    row-gap: rem;
}


/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ banner-css ++++++++++++++++++++++++++++++++++++ */
/* #region banner-css */

.banner {
    position: relative;
    z-index: 100;
    margin-top: var(--section-gap);
    padding-block: 3rem;
    padding-inline: 5vw;
    background-image: url(/site/assets/files/1033/alerkiv-c2s_2gmmqlw-unsplash.jpg);
    background-size: cover;
    background-position: center;
    color: var(--clr-text-light);
}
.banner::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background-color: var(--clr-accent);
    opacity: 0.75;
}
.banner .inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    column-gap: 5vw;
    row-gap: 1.5rem;
}

@media only screen and (min-width: 600px){
    .banner .inner {
        flex-direction: row;
    }
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ grid-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-custom-css */

#services {
    margin-top: rem;
    padding-inline: vw;
    background-color: rgba(255, 255, 255, 1);
}
#services .inner {
    grid-template-columns: repeat(3, 1fr);
}

#services {
position: relative;
z-index: 2;
padding-bottom: 6rem;
}
#services > .inner {
max-width: 1400px;
margin-inline: auto;
}
#services > .inner > .text-block img {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1/1;
}
#services > .inner > .text-block:not(:first-child) {
    padding-block: 0;
    padding-inline: 0;
    padding-bottom: 1.5rem;
}
#services > .inner > .text-block:not(:first-child) > .inner {
    padding-block: 0;
    padding-inline: 0;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ iframe-embed-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region iframe-embed-custom-css */

#spacer2 {
    margin-top: 0rem;
}
#spacer2 .inner {
    margin-inline: 0vw;
}

#spacer2 {
position: relative;
z-index: 2;
height: 6rem;
background-color: white;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ grid-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-custom-css */

#industry {
    margin-top: 0rem;
    padding-inline: 0vw;
    background-color: rgba(32, 68, 154, 1);
}
#industry .inner {
    grid-template-columns: repeat(2, 1fr);
}

#industry {
position: relative;
z-index: 2;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ grid-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region grid-custom-css */

#contact {
    margin-top: rem;
    padding-inline: vw;
    background-color: ;
}
#contact .inner {
    grid-template-columns: repeat(2, 1fr);
}

#contact {
position: relative;
z-index: 2;
padding-bottom: 6rem;
background-color: white;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ footer-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region footer-custom-css */
#footer {
    margin-top: rem;
    padding-top: rem;
    padding-inline: vw;
    background-color:;
    color: ;
}

#footer {
position: relative;
z-index: 2;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ footer-css ++++++++++++++++++++++++++++++++++++ */
/* #region footer-css */

.footer {
    margin-top: var(--section-gap);
    padding-top: 3rem;
    padding-inline: 5vw;
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
}
.footer a:hover {
    text-decoration: underline;
}
.footer .inner {
    margin-inline: auto;
    width: 100%;
    max-width: 1400px;
}
.footer .grid {
    grid-template-columns: repeat(1, 1fr);
    /*row-gap: 1.5rem;*/
    row-gap: min(25vw, 6rem);
    place-items: center;
}
.footer .logo-wrapper {
    display: grid;
    place-items: center;
}
.footer .logo-wrapper img {
    width: 300px;
}
.footer .footer-links {
    display: grid;
    place-content: center;
    row-gap: 0.6rem;
}
.footer .credit-wrapper {
    margin-top: 1.5rem;
    padding-bottom: 0.6rem;
    display: flex;
    justify-content: center;
}
.footer .address-wrapper {
    /*margin-top: 3rem;*/
    align-self: flex-start;
    padding-bottom: 0.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*------ Alt Styles ------*/
@media only screen and (min-width: 1000px) {
    .footer[data-style="2"] .grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer[data-style="3"] .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* #endregion 


/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#terms-of-service {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#terms-of-service .inner {
    padding-block: rem;
    padding-inline: rem;
}

#terms-of-service {
display: flex;
flex-direction: column;
align-items: center;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ text-block-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-css */

.text-block {
margin-top: var(--section-gap);
padding-top: 0;
background-color: var(--clr-secondary);
color: var(--clr-text-dark);
}
.text-block .inner {
    padding-block: 3rem;
    padding-inline: 5vw;
}
.text-block .inner > * {
    margin-inline: auto;
}
.text-block .inner > *:not(:last-child) {
    margin-bottom: 1rem;
}


/* #endregion */



/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#privacy-policy-body {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#privacy-policy-body .inner {
    padding-block: rem;
    padding-inline: rem;
}

#privacy-policy-body .inner > * {
max-width: 800px;
overflow: hidden;
}
/* #endregion */



/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#p404-body {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#p404-body .inner {
    padding-block: rem;
    padding-inline: rem;
}

#p404-body {
min-height: 60vh
}
/* #endregion */


/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#grid-1-heading {
margin-top: 0rem;
padding-top: 0rem;
background-color: rgba(255, 0, 0, 0);
color: ;
}
#grid-1-heading .inner {
    padding-block: 6rem;
    padding-inline: rem;
}

#grid-1-heading {
grid-column: span 3;
}
#grid-1-heading .inner {
padding-bottom: 2rem;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#steels {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#steels .inner {
    padding-block: rem;
    padding-inline: rem;
}

#steels {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#aluminium {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#aluminium .inner {
    padding-block: rem;
    padding-inline: rem;
}

#aluminium {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#brass {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#brass .inner {
    padding-block: rem;
    padding-inline: rem;
}

#brass {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#copper {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#copper .inner {
    padding-block: rem;
    padding-inline: rem;
}

#copper {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#titanium {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#titanium .inner {
    padding-block: rem;
    padding-inline: rem;
}

#titanium {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#plastics {
margin-top: 0rem;
padding-top: rem;
background-color: ;
color: ;
}
#plastics .inner {
    padding-block: rem;
    padding-inline: rem;
}

#plastics {
margin-inline: 2vw;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#about-us {
margin-top: 0rem;
padding-top: rem;
background-color: rgba(32, 68, 154, 1);
color: rgba(255, 255, 255, 1);
}
#about-us .inner {
    padding-block: 6rem;
    padding-inline: rem;
}

#about-us {
position: relative;
z-index: 1;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#about-image {
margin-top: 0rem;
padding-top: rem;
background-color: rgba(32, 68, 154, 1);
color: ;
}
#about-image .inner {
    padding-block: 0rem;
    padding-inline: 0rem;
}

#about-image {
width: 100%;
}
#about-image .inner > p {
max-width: 100%;
margin-left: auto;
margin-right: 0;
display: flex;
justify-content: flex-end;
}
#about-image .inner > p > img {
max-height: 500px;
object-fit: cover;
object-position: top;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#contact-heading {
margin-top: 6rem;
padding-top: rem;
background-color: ;
color: ;
}
#contact-heading .inner {
    padding-block: rem;
    padding-inline: rem;
}

#contact-heading {
    grid-column: span 2;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ iframe-embed-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region iframe-embed-custom-css */

#contact-form {
    margin-top: rem;
}
#contact-form .inner {
    margin-inline: vw;
}

#contact-form {
position: relative;
z-index: 1;
width: 100%;
background-color: white;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ map-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region map-custom-css */

#map {
    margin-top: rem;
}
#map .inner {
    margin-inline: vw;
}
#map .map-wrapper {
    min-height: 500px;
}

#map {
width: 100%;
}
/* #endregion */
/* ++++++++++++++++++++++++++++++++++++ map-css ++++++++++++++++++++++++++++++++++++ */
/* #region map-css */

.map {
    position: relative;
    z-index: 900;
    margin-top: var(--section-gap);
}
.map .inner {
    margin-inline: 0;
}
.map-wrapper {
    min-height: 400px;
}

/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#industry-image {
margin-top: 0rem;
padding-top: rem;
background-color: rgba(32, 68, 154, 1);
color: ;
}
#industry-image .inner {
    padding-block: 0rem;
    padding-inline: 0rem;
}

#industry-image {
width: 100%;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#ind-text {
margin-top: 0rem;
padding-top: rem;
background-color: rgba(32, 68, 154, 1);
color: rgba(255, 255, 255, 1);
}
#ind-text .inner {
    padding-block: 6rem;
    padding-inline: rem;
}

#ind-text {
position: relative;
z-index: 1;
}
/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#reliable {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#reliable .inner {
    padding-block: rem;
    padding-inline: rem;
}


/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#quality {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#quality .inner {
    padding-block: rem;
    padding-inline: rem;
}


/* #endregion */

/* ++++++++++++++++++++++++++++++++++++ text-block-custom-css ++++++++++++++++++++++++++++++++++++ */
/* #region text-block-custom-css */

#competitively-priced {
margin-top: rem;
padding-top: rem;
background-color: ;
color: ;
}
#competitively-priced .inner {
    padding-block: rem;
    padding-inline: rem;
}


/* #endregion */
/** custom css */

#about-image {
    background-image: url(/site/assets/files/1015/machined-parts-4673364_1920.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
#industry-image {
    background-image: url(/site/assets/files/1015/drill-set-444485_1920.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

@media only screen and (max-width: 900px) {
    #reliable-quality-competitive > .inner {
        grid-template-columns: 1fr;
    }
    #services .inner {
        grid-template-columns: 2fr;
    }
    #grid-1-heading {
        grid-column: span 2;
    }
    #about .inner {
        grid-template-columns: 1fr;
    }
    #about-image {
        min-height: 400px;
    }
    #industry .inner {
        grid-template-columns: 1fr;
    }
    #industry-image {
        min-height: 400px;
    }
    #contact .inner {
        grid-template-columns: 1fr;
    }
    #contact-heading {
        grid-column: span 1;
    }

}
@media only screen and (max-width: 600px) {
    #services > .inner > .text-block:not(#grid-1-heading) img {
        max-width: 45vw;
    }
    #services > .inner > .text-block:not(#grid-1-heading) {
        max-width: 40vw;
        min-width: 40vw;
    }
    #services > .inner > .text-block:not(#grid-1-heading) h2 {
        font-size: 1.5rem;
    }
}

/**
* The edit link that appears when you are logged in.
* It is recommended that you implement an edit button 
* in your templates to make it easy to switch to and
* from the admin control panel when editing pages. 
*
*/
#editpage {
	position: fixed;
    z-index: 99999999999;
	bottom: 0;
	left: 0; 
	padding: 5px 6px; 
	background: #db1174; 
	color: #fff; 
	display: block;
	font-weight: bold; 
	}
#editpage a {
    color: #fff;
}
#editpage:hover {
	background: #ffffcc;
	color: #000; 
	}
#editpage:hover a {
    color: #db1174;
}