body{
    background-color: #0253a2;
    color: white;
    margin: 0;
    padding: 0;
}
.navbar-light .navbar-nav .nav-link {
    color: #0253a2;
}
.dropdown-item {
    color: #0253a2;
}
.main-content a, .footer-content a{
    color: #000000;
}
.main-content a:link, .footer-content a:link{
    color: #000000;
}
.main-content a:visited, .footer-content a:visited{
    color: #ababab;
}
.main-content a:hover, .footer-content a:hover{
    color: #0c2d92;
}
.main-content a:active, .footer-content a:active{
    color: #FF0000;
}
.bg-menu-light {
    background-color: #FFFFFF;
}
.index-container a{
    color: #000000;
}
.index-container a:link{
    color: #FFFFFF;
}
.index-container a:visited{
    color: #FFFFFF;
}
.index-container a:hover{
    color: #0c2d92;
}
.index-container a:active{
    color: #FFFFFF;
}
.footer-container{
    margin-top: 50px;
    background-color: white;
    color: #0253a2;
    padding: 20px 0px;
    border-top: solid 6px #001c7d;
    float: none;
}
.underline{
    text-decoration: underline;
}

#navbarSupportedContent {
    border-color: #001c7d;
}
.navbar-toggle {
    border-color: #001c7d;
}
.navbar-spacer{
    height: 60px;
}
.menu-place-holder{
    height: 80px;
}
.brand-image{
    position: fixed;
    left: 0;
    top: 0;
    z-index:2000;
}
.brand-image-background{
    position: absolute;
    left: 0;
    top: 0;
    z-index:-1;
    background-image: url("/img/logo-bg.png");
    background-repeat: repeat-x;
    width: 100%;
    height: 80px;
}
.index-container{
    position: fixed;
    height: 100%;
    width: 100%;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
   /* text-align: center;
    font-size: 18px;
    background: #fff;*/

    /*display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;*/
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next, .swiper-button-prev {
   /* width: calc(var(--swiper-navigation-size)/ 44 * 100);*/
    width: 100px;
}
.swiper-button-prev {
    align-items: center;
    justify-content: flex-start;
}
.swiper-button-next {
    align-items: center;
    justify-content: flex-end;
}
.swiper-button-prev:before {
    content: 'prev';
}
.swiper-button-prev:before {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
}
.swiper-button-prev:after {
    font-family: none;
    font-size: 0;
    text-transform: none!important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
 }
.swiper-pagination-bullet {
    width: 100px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: #fff;
    border-radius: 5px;
}
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
     bottom: 10px;
 }
.hr-cf {
    position: relative;
    border: 0;
    height: 1.5em;
    font-size: 20px;
    margin: 100px 10px;
    opacity: 1;
    background-color: transparent;

 }
.hr-cf:not([size]) {
    height: 1.5em;
}
.hr-cf:before {
    content: '';
    background: linear-gradient(to right, transparent, #b2b2b2, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
}
.hr-cf:after {
    content: url("/img/hr-img.png");
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5em;
    background-color: #0253a2;
    left:50%;
}

.img-float-left{
    float: left;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.img-float-right{
    float: right;
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.swiper-pagination-bullet-active {
    color: #fff;
    background: #3578ff;
}
.p-arrow-white-300, .p-arrow-white-400, .p-arrow-white-500{
    background-image: url("/img/p-arrow-white.png");
    background-size: contain;
    background-repeat: no-repeat;
}
.p-arrow-white-300, .p-arrow-space-300{
    height: 300px;
    width: 228px;
    margin-left: 10px;
}
.p-arrow-300-text {
    display : flex;
    align-items : center;
}
.p-arrow-white-400{
    height: 400px;
    width: 304px;
}
.p-arrow-white-500{
    height: 500px;
    width: 380px;
}
.p-arrow-300-text {
    display : flex;
    align-items : center;
}
.pad-l-50{
    padding-left: 50px;
}
.pad-lr-50{
    padding-left: 50px;
}
.p-text{
    font-size: 1.6em;
}
.text-shadow-1{
    text-shadow: 2px 2px #000;
}
.slide-image{
    background-size: cover;
}
.slide-image1{
    background-image: url("/img/product-rails.jpg");
}
.slide-image2{
    background-image: url("/img/product-stairs.jpg");
}
.slide-image3{
    background-image: url("/img/material.jpg");
}
.slide-image4{
    background-image: url("/img/welding.jpg");
}
.slide-image5{
    background-image: url("/img/project.jpg");
}
.animate__delay-6s
{
    animation-delay: 6s;
}
.animate__delay-7s
{
    animation-delay: 7s;
}
.animate__delay-8s
{
    animation-delay: 8s;
}
.animate__delay-9s
{
    animation-delay: 9s;
}
.animate__delay-10s
{
    animation-delay: 10s;
}
.animate__delay-11s
{
    animation-delay: 11s;
}
.animate__delay-12s
{
    animation-delay: 12s;
}
.animate__delay-13s
{
    animation-delay: 13s;
}
.animate__delay-14s
{
    animation-delay: 14s;
}
.animate__delay-15s
{
    animation-delay: 15s;
}
.table {
    --bs-table-bg: white;
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: #212529;
    --bs-table-striped-bg: rgba(0, 0, 0, 0.05);
    --bs-table-active-color: #212529;
    --bs-table-active-bg: rgba(0, 0, 0, 0.1);
    --bs-table-hover-color: white;
    --bs-table-hover-bg: #3578ff;
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    vertical-align: top;
    border-color: #dee2e6;
}
.experienceCard{
    height: 100%;
    overflow: hidden;
    border-radius: 1em;
}
.experienceCardImage{
    height: 300px;
    width: auto;
    background-color: white;
    padding: 20px 0 0 0;
    background-size: cover;
    background-repeat: no-repeat;
}
.experienceCardText{
    background-color: white;
    color: #3578ff;
    padding: 20px;
    height: 100%;
}
.xi-mb-20{
    margin-bottom: 20px;
}
.font-black{
    color: #000000;
}
.font-white{
    color: #ffffff;
}
.index-about, .index-about2{
    margin-top: 200px;
    width: 500px;
    margin-left: 200px;
    color: white;
    display: inline-block;
    vertical-align: top;
}
.index-experiences, .index-experiences2{
    margin-top: 160px;
    width: 500px;
    margin-left: 300px;
    color: white;
    vertical-align: top;
    display: inline-block;
}
.index-about-header, .index-products-header, .index-materials-header, .index-constructions-header, .index-projects-header, .index-experiences-header{
    color: white;
    font-size: 1.6em;
}
.index-about-body, .index-products-body, .index-materials-body, .index-constructions-body, .index-projects-body, .index-experiences-body{
    color: white;
    font-size: 1.2em;
}
.index-products{
    margin-top: 200px;
    width: 500px;
    margin-left: auto;
    margin-right: 200px;
    color: white;
    vertical-align: top;
}
.index-materials{
    margin-top: 200px;
    width: 500px;
    margin-left: auto;
    margin-right: 200px;
    color: white;
    vertical-align: top;
}
.index-constructions{
    margin-top: 200px;
    width: 500px;
    margin-left: auto;
    margin-right: 200px;
    color: white;
    vertical-align: top;
}
.index-projects{
    margin-top: 200px;
    width: 500px;
    margin-left: auto;
    margin-right: 200px;
    color: white;
    vertical-align: top;
}
#capabilities {
    background-image: url("/img/capabilities.jpg");
}
#engineering {
    background-image: url("/img/engineering.jpg");
}
#product {
    background-image: url("/img/product.jpg");
}
#companyHeader {
    background-image: url("/img/company.jpg");
    background-size: cover;
}
#experience {
    background-image: url("/img/experience2.jpg");
}
#brochure {
    background-image: url("/img/brochure.jpg");
}
#contact {
    background-image: url("/img/contact.jpg");
}
#certificate {
    background-image: url("/img/certificate.jpg");
}
#mapUs {
    background-image: url("/img/map.jpg");
}
#staff {
    background-image: url("/img/staff.jpg");
    background-size: cover;
}
.pageTitleBlock{
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
}

#image-popup, #image-popup2{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: none;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.90);
    color: white;
    font-size: 30px;
}
#image-popup2 a:link, #image-popup a:visited, #image-popup a:hover, #image-popup a:active{
    color: white;
}
#image-area{
    width: 100%;
    height: 100%;
    display: flex;
}
.popup-image, .popup-image2{
    max-width: 90%;
    max-height: 90%;
    margin: auto;
}

.contact-info-bottom{
    margin-top: 40px;
}
#map-container{

}
#map {
    min-width: 330px;
    height: 800px;
    width: 100%;
}
#drivingDirectionContainer{
}
#drivingDirection {
    min-width: 200px;
    height: 800px;
    overflow: auto;
    background-color: white;
}

.map-direction-search {
    padding-bottom: 10px; }

#btnDirections, #btnReset {
    margin-left: 10px; }

.left-arrow-text{
    background-image: url("/img/left-c-arrow.png");
    background-repeat: no-repeat;
    height: 150px;
    width: 100%;
    padding-left: 150px;
    line-height: 140px;
    font-size: 1.6em;
}
.right-arrow-line{
    border-right: solid 8px white;
    padding-bottom: 30px;
    padding-right: 30px;
}
.font-small-info{
    font-style: italic;
    font-size: .75em;
}
.list-none{
    list-style: none; /* Remove HTML bullets */
    padding: 0;
    margin: 0;
}
.xi-name-list {
    list-style: none; /* Remove HTML bullets */
    padding: 0;
    margin: 0;
}

.xi-name-list li {
    padding-left: 16px;
}

.xi-name-list li::before {
    content: "-"; /* Insert content that looks like bullets */
    padding-right: 8px;
}
.engineering-info, .engineering-info-row{
    height: 650px;
    padding: 0;
    margin: 0;
}
.engineering-info-image{
    background-image: url("/img/engineering-info.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.engineering-info-list{
    /*font-size: 3em;
    background-color: #001c7d;*/
    background-color: #fff;
    background-image: url("/img/engineering-info-text.jpg");
    background-repeat: no-repeat;
    background-size: contain;

}
.block-header, .block-header-alt{
    padding-top: 50px;
    padding-bottom: 30px;
    margin: 0;
    text-align: center;
    font-size: 4em;
}
.block-header{
    background-color: #ffffff;
    color: #0253a2;
}
.block-header-alt{
    background-color: #0253a2;
    color: #ffffff;
}
.white-bg{
    background-color: #ffffff;
    color: #0253a2;
}
.blue-bg{
    background-color: #0253a2;
    color: #ffffff;
}
.shadow-bg{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.80);
    width: 100%;
}
.row-card{
    height: 300px;
}
.card{
    border:0 solid white;
    max-width: 416px;
    min-height: 300px;
}

.footer-row-content {
    --bs-gutter-x: 0;
}
.footer-right-top {
    font-size: 3em;
}
.footer-right-center{
    background-color: #ffffff;
    color: #ffffff;
    background-image: url("/img/footer-center-bg.png");
    background-repeat: no-repeat;
    background-position: right;
    font-size: 2em;
}
.footer-right-bottom{
    font-size: 1.8em;
    line-height: normal;
}
.footer-right{
    width: 600px;
}
.footer-left{
    padding-top: 50px;
}
.footer-left a{
    text-decoration: none;
}
.footer-left a:link{
    color: #000000;
}
.footer-left a:visited{
    color: #000000;
}
.footer-left a:active{
    color: red;
}
.footer-left a:hover{
    color: #0382ec;
    text-decoration: underline;
}
.footer-right-top, .footer-right-center, .footer-right-bottom{
    height: 80px;
    line-height: 80px;
}
.prev-arrow{
    margin-left: 20px;
    position: absolute;;
    top: 50%;
    ms-transform: translateY(-50%)
    transform: translateY(-50%);
}
.next-arrow{
    position: absolute;;
    top: 50%;
    right: 20px;
    ms-transform: translateY(-50%)
    transform: translateY(-50%);
    z-index: 1000;
}
.close-popup{
    position: absolute;;
    top: 20px;
    right: 20px;
    ms-transform: translateY(-50%)
    transform: translateY(-50%);
    z-index: 1000;
}


@media only screen and (max-width : 1940px) {
    .pageTitleBlock {
        background-size: 2000px;
    }
}
@media only screen and (max-width : 1600px) {
    .p-text{
        font-size: 1.2em;
    }
    .index-about-header, .index-products-header, .index-materials-header, .index-constructions-header, .index-projects-header, .index-experiences-header{
        color: white;
        font-size: 1.2em;
    }
    .index-about-body, .index-products-body, .index-materials-body, .index-constructions-body, .index-projects-body, .index-experiences-body{
        color: white;
        font-size: 1em;
    }
    .brand-image, .brand-image-background{
        background-size: 6px 100px;
    }
    .brand-image, .brand-image-background{
        top:28px;
        height: 100px;
    }
    #brand-image{
        height: 100px;
    }
}

@media only screen and (max-width : 1400px) {
    .index-about, .index-about2 {
        margin-top: 200px;
    }
    .index-about2 {
         margin-top: 20px;
     }
}
@media only screen and (max-width : 1200px) {
    .p-text{
        font-size: 1.1em;
    }
    .index-about-header, .index-products-header, .index-materials-header, .index-constructions-header, .index-projects-header, .index-experiences-header{
        color: white;
        font-size: 1.1em;
    }
    .index-about-body, .index-products-body, .index-materials-body, .index-constructions-body, .index-projects-body, .index-experiences-body{
        color: white;
        font-size: 0.9em;
    }
    .p-arrow-white-300, .p-arrow-space-300{
        height: 211px;
        width: 160px;
        margin-left: 10px;
    }
}

@media only screen and (max-width : 860px) {
    #drivingDirection {
        min-width: 400px;
    }
    .block-header, .block-header-alt{
        font-size: 3em;
        padding-top: 30px;
        padding-bottom: 20px;
    }
    .footer-right-top, .footer-right-center, .footer-right-bottom{
        height: 40px;
        line-height: 40px;
    }
    .footer-right-top {
        font-size: 1.4em;
    }
    .footer-right-center{
        font-size: 1em;
    }
    .footer-right-bottom{
        font-size: .8em;
        line-height: normal;
    }
    .cfi-footer
    {
        width: 100%;
    }
    .footer-right{
        margin-left: auto;
        margin-right: 0;
    }
    .order-md-1 {
        order: 2 !important;
    }
}
@media only screen and (max-width : 600px) {

    .slide-image1, .slide-image2, .slide-image4, .slide-image5 {
        background-position: -300px 0px;
    }
    .slide-image5 {
        background-position: -400px 0px;
    }
    .p-text{
        font-size: 1em;
    }
    .index-about-header{
        font-size: 0.8em;
    }
    .index-about-body{
        font-size: 0.8em;
    }
    .index-experiences-header{
          font-size: 0.8em;
    }
    .index-experiences-body{
         font-size: 0.6em;
     }
    .index-experiences-body, .index-experiences-header{
        margin-bottom: 6px;
    }
    .index-experiences ul, .index-experiences2 ul{
        margin-left: -16px;
    }
    .index-products-header, .index-materials-header, .index-constructions-header, .index-projects-header{
        font-size: 0.9em;
    }
    .index-products-body, .index-materials-body, .index-constructions-body, .index-projects-body{
        font-size: 0.8em;
    }
    .index-about, .index-about2, .index-experiences, .index-experiences2, .index-products, .index-materials, .index-constructions, .index-projects {
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        margin-top: 130px;
        background-color: rgba(0, 0, 0, 0.37);
        padding-right: 5%;
        padding-left: 5%;
    }
    .index-about2, .index-experiences2{
        margin-top: 20px;
    }
    .brand-image{
        top:40px;
        height: 80px;
    }
    .brand-image-background{
        top:40px;
        background-size: 5px 80px;
    }
    #brand-image{
        height: 80px;
    }

    .p-arrow-white-300, .p-arrow-space-300{
        height: 145px;
        width: 110px;
        margin-left: 10px;
    }
    .table td {
        font-size: 0.8em;
    }
    .table th {
        font-size: 0.8em;
    }
    .contact-info-bottom{
        margin-top: 0;
    }
    .pad-l-50{
        padding-left: 10px;
    }
    .img-float-left{
        margin: 0;
    }
    .img-float-right{
        margin: 0;
    }

    .footer-right-top, .footer-right-center, .footer-right-bottom{
        height: 40px;
        line-height: 40px;
    }
    .footer-right-top {
        font-size: 1.8em;
    }
    .footer-right-center{
        font-size: 1.2em;
    }
    .footer-right-bottom{
        font-size: 1em;
        line-height: normal;
    }
    .footer-right{
        width: 100%;
    }
    .footer-left{
        padding-top: 20px;
    }
    .col-right{
        width: 100%;
    }
}


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

    .p-arrow-white-300, .p-arrow-space-300{
        height: 105px;
        width: 80px;
        margin-left: 10px;
    }
    .pad-l-50{
        padding-left: 10px;
    }

    .block-header, .block-header-alt{
        font-size: 2em;
        padding-top: 20px;
        padding-bottom: 10px;
    }


    .footer-right-top, .footer-right-center, .footer-right-bottom{
        height: 30px;
        line-height: 30px;
    }
    .footer-right-top {
        font-size: 1.2em;
    }
    .footer-right-center{
        font-size: .9em;
    }
    .footer-right-bottom{
        font-size: .8em;
        line-height: normal;
    }
}
@media only screen and (max-width : 450px) {

    .p-arrow-white-300, .p-arrow-space-300{
        visibility: collapse;
        display: none;
    }

    .table>:not(caption)>*>* {
        padding: .1rem .1rem;
    }
}