/* GLOBAL Fonts
-------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@800&display=swap');

/* GLOBAL STYLES
-------------------------------------------------- */
html, body {
  position:relative;
  overflow-x:hidden;
}
body {
  font-family: 'Lato', sans-serif;
}
main {
  background-color: #fff;
}

a {
  color: #c91c1d;
}
a:hover {
  color: #202db8;
  text-decoration: none;
}
a:active, a:hover {
  outline: 0;
  text-decoration: none;
}

a.text-primary:focus, a.text-primary:hover {
  color: #202db8!important;
}

.lead {
  font-size: 21px;
  line-height: 32px;
  color: #181825;
}
.z-index-0 {
  z-index: 0;
}
::selection {
  background: rgba(255, 244, 147, .8);
  color: #272c30;
}
.btn {
  font-size: 16px;
  padding: 11px 21px;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
  transition: .3s ease;
  
}
/*--- btn default --*/
.btn-brand {
  color: #fff;
  background-color: #c91c1d;
  display: block;
  border-color: #c91c1d;
  padding: 7px 10px;
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-brand:hover {
  color: #c91c1d;
  background-color: #fff;
  border-color: #fff;
}

.btn-brand.focus, .btn-brand:focus {
  color: #fff;
  background-color: #c91c1d;
  border-color: #c91c1d;
  box-shadow: none;
}

.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.ytb-overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgb(63,68,68,0.1);
}
header {
position: relative;
background-color: black;
/* height: 75vh; */
min-height: 100vh;
width: 100%;
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

header .container {
position: relative;
z-index: 2;
}

header .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.1;
z-index: 1;
}

.maxW1200 {
  max-width: 1200px;
  margin: 0 auto;
}
/* @media (pointer: coarse) and (hover: none) {
header {
  background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') black no-repeat center center scroll;
}
header video {
  display: none;
}
} */

.progress-preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #c91c1d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.percent { 
  position:absolute; 
  display:inline-block; 
  top:3px; 
  left:48%; 
}
.progress-logo {
  width:100px; 
  overflow: hidden;
  position: relative;
}
.progress-logo-overlay {
  width:100%; 
  height:100%; 
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.progress-logo-overlay img {
  width: 0%; 
  height:100%; 
}

main {
  position: relative;
  z-index: 1;
}
.main-content {
  background-color: #fff;
}

.banner-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}
.banner-item {
  background: #000;
  color: #fff;
  padding: 50px 49px 50px 47px;
  flex: 1;
  transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
}
.banner-block .banner-item:first-child {
  background: #c91c1d;
  color: #fff;
}
.banner-block .banner-item:first-child:hover {
  background: #000;
  color: #fff;
}
.banner-item:hover {
  background: #c91c1d;
  color: #fff;
}

.banner-item:first-child i, .banner-item:first-child h4 {
  position: relative;
  display: block;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(to right, #ff373a, #ff6e71 50%, #ffbfc0 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 100%;
  transition: background-position 275ms ease;
  text-decoration: none;
}
.banner-item:first-child:hover > i, .banner-item:first-child:hover > h4 {
  background-position: 0 100%;
}
.banner-item h4 {
  font-family: 'Montserrat', sans-serif;
}
.banner-item i, .banner-item h4 {
  position: relative;
  display: block;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(to right, #ff373a, #ff6e71 50%, #ffbfc0 50%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 0 100%;
  transition: background-position 275ms ease;
  text-decoration: none;
}
.banner-item:hover > i, .banner-item:hover > h4 {
  background-position: 100%;
}

.emulated-flex-gap {
  --gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}
.emulated-flex-gap-20 {
  --gap: 20px;
  display: flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

.text-brand {
  color: #c91c1d;
}

.bg-brand {
  background-color: #c91c1d;
}

.bg-black {
  background-color: #000;
}

.bg-darkgrey {
  background-color: #27252d;
}

.bg-lightgrey {
  background-color: #f5f5f5;
}
.header-title {
  /* font-family: 'PT Serif', serif; */
  font-family: 'Montserrat', sans-serif;
  text-shadow: 0px 1px 5px #234d3c;
}
.header-page-title {
  min-height: 200px;
}
.bg-space {
  min-height: 350px;
}
.action-text {
  font-family: 'Montserrat', sans-serif;
}
.page-free-quote {
  font-size: 16px;
  padding: 15px 30px;
  line-height: 1;
  display: block;
  color: #fff;
  background-color: #c91c1d;
  transition: background 0.3s;
}
.page-free-quote:hover {
  background-color: #000;
  color: #fff;
}
.contact-iframe {
  width: 100%;
  height: 100%;
}
.block-col {
  padding: 15px;
  height: 100%;
}
.bgColor1 {
  background-color: #c91c1d;
  color: #fff;
}
.bgColor2 {
  background-color: #EFEFEF;
  color: #333;
}
.bgColor3 {
  background-color: #333;
  color: #fff;
}
.bgColor4 {
  background-color: #871314;
  color: #fff;
}
.obj-cover {
  object-fit: cover;
}
.obj-contain {
  object-fit: contain;
}
.block-logo-header-title {
  font-family: 'Nanum Myeongjo', serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.block-logo-header-title span.fl-header {
  /* color: #c91c1d; */
  font-size: 3rem;
}
.block-logo-header-title span.nl-header {
  border-bottom: 3px solid #ccc;
  position: relative;
  top: -5px;
}
.block-header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.brand-header-title {
  /* font-family: 'PT Serif', serif; */
  font-family: 'Montserrat', sans-serif;
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  text-shadow: 0px 1px 5px #234d3c;
}
.block-header-title span.fl-header {
  /* color: #c91c1d; */
  font-size: 3rem;
}
.block-header-title span.nl-header {
  border-bottom: 3px solid #ccc;
  position: relative;
  top: -5px;
}
.heading-fonts {
  font-family: 'Montserrat', sans-serif;
}
.blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #eee;
}
.brand-page-title {
  min-height: 250px;
  background-color: rgba(0,179,224,0);
  background-position: center center;
  background-repeat: no-repeat;
}
.page-title-bg1 {
  background-image: url(../assets/img/img-bg8.jpg);
  background-position: center 24%;
  /* background-attachment: fixed; */
  background-size: cover;
}
.page-title-bg2 {
  background-image: url(../assets/img/Capabilities.jpg);
  /* background-position: center bottom; */
  background-position: center 70%;
  /* background-attachment: fixed; */
  background-size: cover;
}
.page-title-bg3 {
  background-image: url(../assets/img/products-top.jpg);
  /* background-position: center bottom; */
  background-position: center 57%;
  /* background-attachment: fixed; */
  background-size: cover;
}
.page-title-bg4 {
  background-image: url(../assets/img/Capabilites-1.jpg);
  background-attachment: fixed;
}
.page-title-bg5 {
  background-image: url(../assets/img/Home-Bottom-image.jpg);
  /* background-attachment: fixed; */
  background-size: cover;
  background-position: center 30%;
}
.img-thumbnail1 {
  border: 3px solid #fff;
  padding: 5px;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
.img-thumbnail1 img {
  width: 100%;
  box-shadow: 0 10px 20px rgb(0 0 0 / 19%), 0 6px 6px rgb(0 0 0 / 23%);
}
.block2-bg {
  background: linear-gradient(90deg, #000 70%, #c91c1d 30%);
  /* background: linear-gradient(270deg, #000 80%, #c91c1d 20%); */
}
.block-bg {
  background-color: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  opacity: 1;
}
.block1-bg {
  background-color: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  filter: brightness( 100% ) contrast( 100% ) saturate( 48% ) blur( 0px ) hue-rotate( 
0deg
);
  min-height: 250px;
}
.img-bg1 {
  background-image: url(../assets/img/img-bg1.JPG);
}
.img-bg2 {
  background-image: url(../assets/img/img-bg2.JPG);
}
.img-bg3 {
  background-image: url(../assets/img/img-bg3.JPG);
}
.img-bg4 {
  background-image: url(../assets/img/AboutUs-1.jpg);
}
.img-bg5 {
  background-image: url(../assets/img/AboutUS-2.jpg);
}
.img-bg6 {
  background-image: url(../assets/img/img-bg6.JPG);
}
.img-bg7 {
  background-image: url(../assets/img/Capabilities-1.jpg);
}
.img-bg8 {
  background-image: url(../assets/img/Capabilities-2.jpg);
}
.img-bg9 {
  background-image: url(../assets/img/Capabilities-3.jpg);
}
.img-bg10 {
  background-image: url(../assets/img/ProductsAutomotive-1.jpg);
}
.img-bg11 {
  background-image: url(../assets/img/productsTelecom-2.jpg);
}
.img-bg12 {
  background-image: url(../assets/img/Productsothers-3.jpg);
}
.img-bg13 {
  background-image: url(../assets/img/Home-Bottom-image.jpg);
}
.block-bg-color {
  background-color: antiquewhite;
  /* background-image: url(../assets/img/img-bg1.JPG); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  filter: brightness( 100% ) contrast( 100% ) saturate( 48% ) blur( 0px ) hue-rotate( 
0deg
);
}
/* Banner Block2 CONTENT
-------------------------------------------------- */
.banner-block2-bg {
   background-color: #000;
   color: #fff;
   position: relative;
}
.banner-block2-light {
  background-color: #fff;
  position: relative;
}
.banner-block2-overlay {
  background-image: url(../assets/img/pattern-gl.png);
  background-position: center center;
  opacity: 0.15;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.count-text {
  font-size: 50px;
  color: #c91c1d;
  font-weight: 300;
}
.para-white {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.02em
}
.heading-style1 {
  display: flex;
  align-items: center;
}
.heading-s1-icon {
  border: 3px solid #c91c1d;
  padding: 3px 10px;
  font-size: 27px;
  color: #c91c1d;
  margin-right: 15px;
}
.heading-s1-text {
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
}
.white-bg-block .heading-s1-icon {
  border: 3px solid #c91c1d;
  padding: 3px 10px;
  font-size: 27px;
  color: #c91c1d;
  margin-right: 15px;
}
.black-bg-block {
  background-color: #000;
}
.white-bg-block {
  background-color: #fff;
}
.white-bg-block .heading-s1-text {
  color: #000;
}
.white-bg-block .para-white {
  color: #000;
}
.brand-bg-block {
  background-color: #c91c1d;
}
.brand-bg-block .heading-s1-icon {
  border: 3px solid #000;
  color: #000;
}
.brand-bg-block .heading-s1-text {
  color: #fff;
}
.brand-bg-block .para-white {
  color: #fff;
}

/* FOOTER CONTENT
-------------------------------------------------- */
.footer-brand {
  position: sticky;
  bottom: 0;
  z-index: -1;
}
.footer-top {
  border-top: 12px solid #eee;
}
.footer-bottom {
  background-color: #000;
  color: #d4d4d4;
  text-align: center;
  font-size: 12px;
}
.footer-bottom a, .footer-main a {
  color: #ffb1b1;
  text-decoration: none;
}
.footer-bottom a:hover, .footer-main a:hover {
  color: #c91c1d;
  text-decoration: none;
}
.footer-main {
  background-color: #333;
  color: #fff;
}
.footer-mb {
  /* padding-bottom: 12px; */
}
.footer-mb > div {
  flex: 1;
}
.footer-mb > div:not(:first-child) {
  border: 3px solid #ccc;
  padding: 15px;    
  word-break: break-all;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.footer-m-r1, .footer-m-r2 {
  display: flex;
  align-items: center;
}
.footer-m-icon {
  border: 3px solid #c91c1d;
  padding: 3px 10px;
  font-size: 27px;
  color: #c91c1d;
  margin-right: 15px;
}
.footer-m-info {
  display: flex;
  flex-direction: column;
}
.footer-mb1 h4 {
  font-size: 50px;
  letter-spacing: 0.02em;
  font-weight: 300;
  font-family: 'Montserrat', sans-serif;
}
.footer-get-quote {
  background-color: #c91c1d;
  font-size: 25px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -moz-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.footer-get-quote:hover {
  background-color: #000;
  color: #fff;
}
/* @media (max-width: 1024px) {
  .sina-nav .sina-brand {
      float: right;
  }
} */
@media all and (max-width: 991px) {
  .footer-mb > div:first-child {
    width: 100%;
    flex: auto !important;
  }
}
@media all and (max-width: 767px) {
  .footer-mb {
    flex-direction: column;
  }
  .footer-mb > div:not(:first-child) {
    margin-left: 0;
  }
  .footer-mb1 h4 {
    font-size: 40px;
  }
  .brand-header-title {
    font-size: 1.8rem;
  }
  .block-header-title span.fl-header {
    font-size: 2.5rem;
  }
  .block-header-title {
    font-size: 1.4rem;
  }
  .contact-iframe {
    width: 100%;
    height: 400px;
  }
    
  .block2-bg {
    /* background: linear-gradient(270deg, #000 80%, #000 20%); */
    background: linear-gradient(180deg, #000 80%, #c91c1d 20%);
  }
}


/* History Timeline
------------------------- */
/* Timeline */
.main-timeline {
  position: relative
}

.main-timeline:before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: #c6c6c6;
  margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0
}

.main-timeline .timeline {
  margin-bottom: 40px;
  position: relative
}

.main-timeline .timeline:after {
  content: "";
  display: block;
  clear: both
}

.main-timeline .icon {
  width: 18px;
  height: 18px;
  line-height: 18px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}

.main-timeline .icon:before,
.main-timeline .icon:after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.33s ease-out 0s
}

.main-timeline .icon:before {
  background: #fff;
  border: 2px solid #c91c1d;
  left: -3px
}

.main-timeline .icon:after {
  border: 2px solid #c6c6c6;
  left: 3px
}

.main-timeline .timeline:hover .icon:before {
  left: 3px
}

.main-timeline .timeline:hover .icon:after {
  left: -3px
}

.main-timeline .date-content {
  width: 50%;
  float: left;
  margin-top: 10px;
  position: relative
}

.main-timeline .date-content:before {
  content: "";
  width: 36.5%;
  height: 2px;
  background: #c6c6c6;
  margin: auto 0;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0
}

.main-timeline .date-outer {
  width: 125px;
  height: 125px;
  font-size: 16px;
  text-align: center;
  margin: auto;
  z-index: 1
}

.main-timeline .date-outer:before,
.main-timeline .date-outer:after {
  content: "";
  width: 125px;
  height: 125px;
  margin: 0 auto;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.33s ease-out 0s
}

.main-timeline .date-outer:before {
  background: #fff;
  border: 2px solid #c91c1d;
  left: -6px
}

.main-timeline .date-outer:after {
  border: 2px solid #c6c6c6;
  left: 6px
}

.main-timeline .timeline:hover .date-outer:before {
  left: 6px
}

.main-timeline .timeline:hover .date-outer:after {
  left: -6px
}

.main-timeline .date {
  width: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.main-timeline .month {
  font-size: 18px;
  font-weight: 700
}

.main-timeline .year {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: #232323;
  line-height: 36px
}

.main-timeline .timeline-content {
  width: 50%;
  padding: 20px 0 20px 50px;
  float: right
}

.main-timeline .title {
  font-size: 19px;
  font-weight: 700;
  line-height: 24px;
  margin: 0 0 15px 0
}

.main-timeline .description {
  margin-bottom: 0
}

.main-timeline .timeline:nth-child(2n) .date-content {
  float: right
}

.main-timeline .timeline:nth-child(2n) .date-content:before {
  left: 10px
}

.main-timeline .timeline:nth-child(2n) .timeline-content {
  padding: 20px 50px 20px 0;
  text-align: right
}

@media only screen and (max-width: 991px) {
  .main-timeline .date-content {
      margin-top: 5px
  }
  .main-timeline .date-content:before {
      width: 22.5%
  }
  .main-timeline .timeline-content {
      padding: 10px 0 10px 30px
  }
  .main-timeline .title {
      font-size: 17px
  }
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      padding: 10px 30px 10px 0
  }
}

@media only screen and (max-width: 767px) {
  .main-timeline:before {
      margin: 0;
      left: 7px
  }
  .main-timeline .timeline {
      margin-bottom: 20px
  }
  .main-timeline .timeline:last-child {
      margin-bottom: 0
  }
  .main-timeline .icon {
      margin: auto 0
  }
  .main-timeline .date-content {
      width: 95%;
      float: right;
      margin-top: 0
  }
  .main-timeline .date-content:before {
      display: none
  }
  .main-timeline .date-outer {
      width: 110px;
      height: 110px
  }
  .main-timeline .date-outer:before,
  .main-timeline .date-outer:after {
      width: 110px;
      height: 110px
  }
  .main-timeline .date {
      top: 30%
  }
  .main-timeline .year {
      font-size: 24px
  }
  .main-timeline .timeline-content,
  .main-timeline .timeline:nth-child(2n) .timeline-content {
      width: 95%;
      text-align: center;
      padding: 10px 0
  }
  .main-timeline .title {
      margin-bottom: 10px
  }
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: -.05rem;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  .featurette-heading {
    font-size: 50px;
  }
}