@import url('https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap');

body {font-family: 'Rubik', sans-serif; font-weight: normal; font-style: normal; font-size: 15px; line-height: 1.5; color:#282929;}


/* ------------------------
    Typography
------------------------*/
h1, h2, h3, h4, h5, h6{font-weight:normal; margin-top: 0px; margin-bottom: 0px; text-transform: capitalize;}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 70px; font-style: normal; line-height: 80px; font-weight: 700; text-transform: capitalize; color: #f9a305;}
h2 { font-size: 40px; font-style: normal; line-height: 46px; font-weight: 500; color: #161d3a; text-transform: capitalize; margin-bottom: 10px; position: relative;}
h3 { font-size: 30px; font-style: normal; line-height: 36px; }
h4 { font-size: 24px; font-style: normal; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; line-height: 30px; color: #161d3a;}
h5 { font-size: 20px; font-style: normal; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; line-height: 26px; color: #161d3a;}
h6 { font-size: 18px; font-style: normal; line-height: 24px; }
ul { margin: 0px; padding: 0px; }


/* ------------------------
    Helper class
------------------------*/

.lead{font-weight: normal; font-size: 16px; line-height: 30px;}
.z-index-0{z-index: 0; position: relative;}
.z-index-1{z-index: 1; position: relative;}
section{padding: 80px 0;}
.section-title{margin-bottom:50px;}
.section-title p{font-size: 16px;}
.theme-bg .section-title p, .dark-bg .section-title p{color: rgba(255,255,255,0.8)}

.line-h-2{line-height: 1.6;}
.line-h-3{line-height: 1.7;}
.line-h-4{line-height: 1.8;}
.line-h-5{line-height: 1.9;}

.letter-space-1{letter-spacing: 5px;}
.letter-space-2{letter-spacing: 10px;}
.letter-space-3{letter-spacing: 15px;}


/* ------------------------
    Text color
------------------------*/
.text-theme{color:#f9a305;}
.text-black{color:#161d3a !important;}
.text-grey{color:#aaaaaa;}
.text-yellow{color:#f9a305;}
.text-rgba{color: rgba(255,255,255,0.8);}


/* ------------------------
    Background color
------------------------*/
.white-bg{background-color:#ffffff !important;}
.dark-bg{background-color:#161d3a;}
.grey-bg{background-color:#f8f8f8;}
.theme-bg{background-color:#f9a305;}
.transparent-bg{background-color: inherit !important;}


/* ------------------------
    Pattern
------------------------*/
.pattern{width: 100%; background-size: inherit !important; background-position: 0px 0px; background-repeat: repeat !important; animation: animatedBackground 20s linear infinite;
-ms-animation: animatedBackground 20s linear infinite; -moz-animation: animatedBackground 20s linear infinite; -webkit-animation: animatedBackground 20s linear infinite;}


/* ------------------------
    Banner
------------------------*/
.fullscreen-banner{position: relative; min-height: 800px;}
[data-bg-img]{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.align-center{position: absolute; top: 50%; width: 100%; z-index: 9;}
.align-end{position: absolute; bottom: 0; width: 100%; z-index: 9;}
.fullscreen-banner .btn{color: #ffffff;}
.banner-1::before {border: 10px solid rgba(255,255,255,0.3); content: ""; height: 120%; left: 50%; position: absolute;
  top: -10%; width: 80%; z-index: -1;}
.fullscreen-banner .owl-carousel, .fullscreen-banner .owl-stage-outer, .fullscreen-banner .owl-stage, .fullscreen-banner .owl-item, .fullscreen-banner .item { height: 100%; }
.banner .video-background { position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  object-fit: cover;  z-index: -1; }
 

/* ------------------------
    Countdown
------------------------*/
.countdown{text-align: center; width: 100%}
.countdown > li{margin-bottom: 50px; font-weight: bold; display: block; text-align: center; list-style-type: none;}
.countdown > li:last-child{margin-bottom: 0;}
.countdown > li span{font-size:70px; font-weight:500; line-height:60px; margin-bottom: 20px; display: inline-block;}
.countdown > li p{font-size:20px; text-transform: uppercase; line-height:30px; margin-bottom: 0; color: #f9a305;}
.dark-bg .countdown > li{border-color:rgba(255,255,255,0.2) }

/* ------------------------
    Terms and Conditions
------------------------*/
.terms-and-conditions .title{margin-bottom:10px;} 
.terms-and-conditions p{margin-bottom:25px;}
.terms-and-conditions ul.list{margin-bottom:20px; display:block;}
.terms-and-conditions ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Privacy Policy
------------------------*/
.privacy-policy .title{margin-bottom:10px;} 
.privacy-policy p{margin-bottom:25px;}
.privacy-policy ul.list{margin-bottom:20px; display:block;}
.privacy-policy ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Contact
------------------------*/
.contact-main {/*background: #fff; padding: 30px;*/ border-bottom: 2px solid #f9a305;}
.contact-info li {padding-left: 50px; position: relative;}
.contact-info li i{position: absolute; left: 0; top: 0; line-height: 24px; font-size: 30px; color: #f9a305; text-align: center;}
.contact-info li span{font-size: 16px; color: #161d3a; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 8px;}
.contact-info li p{margin-bottom: 0; line-height: 24px;}
.contact-info li a{color: #555;}
.dark-bg .contact-info li a{color: #ffffff;}
.contact-info li a:hover{color: #f9a305;}
.theme-bg .contact-info span, .dark-bg .contact-info span{color: #ffffff}
.theme-bg .contact-info li i{color: #ffffff;}
.theme-bg .contact-info li a{color: #ffffff;}
.theme-bg .contact-info li a:hover{color: #161d3a;}
.contact-box {position: absolute; top: 50%; z-index: 99; transform: translateY(-50%); width: 100%;}

.form-group{margin-bottom: 20px; position: relative;}
 label{font-size: 14px; color: #333}
.form-control{height: 50px; border-radius: 0; font-size: 13px; background: none; border: none; border-bottom: 2px solid #f5f5f5; box-shadow: none;}
.grey-bg .form-control{background: #ffffff}
textarea.form-control{height: 150px;}
.form-control:focus{box-shadow: none; border-color: #f9a305;}
select.form-control {/*-moz-appearance: none; -webkit-appearance: none; appearance: none;*/ height: 50px !important;}
iframe{width: 100%; border: none; pointer-events: auto;}
.iframe-h{height: 500px !important;}
.iframe-h-2{height: 900px !important;}
.help-block.with-errors {position: absolute; color: red; right: 0; font-size: 10px; line-height: 14px;}
.form-control::-moz-placeholder{color: #555}
.map iframe {border: 0px; width: 100%; height: 100%; z-index: 1;}


.contact-btn {cursor: pointer; display: inline-block; position: fixed; right: -39px; top: 40%; z-index: 99; 
transform: translateY(-50%) rotate(90deg); -webkit-transform: translateY(-50%) rotate(90deg); -o-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); -moz-transform: translateY(-50%) rotate(90deg);}
.contact-bg { background: #ffffff; color: #f9a305; text-transform: uppercase; position: relative; display: block; padding: 10px; font-weight: 500; z-index: 10; -webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 13px 3px rgba(0,0,0,0.1); box-shadow: 0 0 13px 3px rgba(0,0,0,0.1);}
.contact-btn:hover .contact-bg{background: #f9a305; color: #ffffff}
.contact-form {background: #ffffff; height: 100%; border: 1px solid rgba(0, 0, 0, 0.2); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); padding: 80px 30px 30px; width: 450px; position: fixed; right:-600px; top: 0; z-index: 2000;}
.close-btn {background: #f9a305; color: #fff !important; cursor: pointer; font-weight: bold; padding: 7px 15px; position: absolute; right: 20px; top: 10px;}
.header-3 .contact-btn{position: inherit; transform: inherit; top: inherit; right: inherit;}
.header-3 .contact-bg {background: #f9a305; box-shadow: none; color: #fff; padding: 25px 40px;}

/* ------------------------
    About Us
------------------------*/
.about-img{position: relative;}
.about-img::before {border:5px solid rgba(255, 255, 255, 0.2); bottom: 14px; content: ""; left: 14px; position: absolute; right: 14px; top: 14px;}


/* ------------------------
    Video
------------------------*/
.video-btn {display: inline-block;}
.video-btn-pos {left: 50%; position: absolute; top: 50%; margin-top: -22.5px; margin-left: -50px;}
.video-btn .btn-play {background: #f9a305; color: #fff; height: 45px; width: 100px; line-height: 45px; -webkit-border-radius: 50px;
 border-radius: 5px; text-align: center; font-size: 26px; cursor: pointer; display: inline-block;}
.video-btn .btn-play i{line-height: inherit;} 
.theme-bg .video-btn .btn-play, .dark-bg .video-btn .btn-play{background: #ffffff; border-color: #ffffff; color: #f9a305;}
.html5-video {height: 100%; left: 0; opacity: 1; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.html5-video video {width: 100%;}


/* ------------------------
    Side Background
------------------------*/
.img-side img{max-width: 100%}
.img-side.img-right {right: 0;}
.img-side.img-left {left: 0;}
.img-side {padding: 0; position: absolute!important; top: 0px; height: 100%; overflow: hidden; z-index: 9;}
.img-side .owl-carousel, .img-side .owl-stage-outer, .img-side .owl-stage, .img-side .owl-stage, .img-side .owl-item, .img-side .owl-item .item{height: 100%}

/* ------------------------
    Services Section
------------------------*/
.service-flip-images { overflow: hidden; }
.service-bg-video { position: absolute; top: 0; left: 0; width: 460px!important; object-fit: cover; z-index: 0; }



/* ------------------------
    Footer Section
------------------------*/
footer .footer-logo { width: 200px; }

.industries .serve-list li { list-style: none; margin: 1em 0; color: #fff; }
.industries .serve-list li:before { content: '\2713'; display: inline-block; position: relative; top: 0px; width: 20px; height: 20px; margin-right: 8px; padding: 2px;
	font-size: 12px; font-weight: bold; line-height: 14px; color: #f9a305; border: 2px solid #f9a305; border-radius: 50%; text-align: center; }

.industries .btn-hire { border: 1px solid #f9a305; padding: 8px 20px;}


/* ------------------------
    Contact Section
------------------------*/
.contact .info-box { background-color: #161d3a; }
/* #161d3a */
.title-blue { color: #161d3a; }
.title-orange { color: #f9a305; }


/* ===== WHY CHOOSE US SECTION ===== */
.why-choose {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #ffa600 0%50%, #161d3a 50%, #161d3a 100%);
  padding: 0;
}

.why-box {
  width: 100%;
  max-width: 1300px;
  display: flex;
  flex-wrap: wrap;
}

.image-side {
  flex: 0 0 50%;
  background-color: #f9a305;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-side img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.content-side {
  flex: 0 0 50%;
  background-color: #161d3a;
  color: #fff;
  padding: 80px 60px;
}

.content-side .title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
}

.content-side .title span {
  color: #f9a305;
}

.content-side .subtitle {
  font-size: 16px;
  color: #ccc;
  margin: 20px 0;
  line-height: 1.6;
}

.choose-list {
  list-style: none;
  padding: 0;
  margin: 30px 0;
}

.choose-list li {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin: 12px 0;
}

.choose-list li .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: #f9a305;
  border: 2px solid #f9a305;
  border-radius: 50%;
  margin-right: 10px;
}

.btn-contact {
  display: inline-block;
  border: 1px solid #f9a305;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 26px;
  transition: 0.3s ease;
}

.btn-contact:hover {
  background-color: #f9a305;
  color: #0d0f1a;
}

/* Responsive */
@media (max-width: 991px) {
  .why-choose {
    background: #0d0f1a;
  }
  .image-side,
  .content-side {
    flex: 100%;
  }
  .content-side {
    padding: 50px 30px;
    text-align: center;
  }
}


/* Laser Cutting */
.service-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
}

.service-info-list li {
  display: flex;
  align-items: center;
  color: #333;
  font-size: 15px;
  margin: 12px 0;
}

.service-info-list li .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  font-size: 12px;
  color: #f9a305;
  border: 2px solid #f9a305;
  border-radius: 50%;
  margin-right: 10px;
}

.why-service h5
{
  color: #161d3a;
}
.why-service h5>span
{
  color: #f9a305;
}


/* about */
/* ======== GLOBAL ======== */


/* ======== STORY ======== */
/* ======== STORY ======== */
#about-story {
  background: #fff;
  text-align: center;
}

.about-page {
  position: relative;
}

.about-page .title {
  position: relative;
  display: inline-block; /* ensures line centers under text */
}

.about-page .title:before {
  content: "";
  background: #161d3a;
  width: 30px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -30px;
  transform: translateX(-50%); /* centers the line */
}
.about-page .title:after {
  content: "";
  background: #f9a305;
  width: 30px;
  height: 3px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); /* centers the line */
}
/* images/pattern/01.webp */
/* ======== PURPOSE (MISSION + VISION) ======== */
#about-purpose {
  position: relative;
  overflow: hidden;
  background-color: #f9a305;
  min-height: 400px; /* ensures visible area */
}

/* Background image visible and animated */
#about-purpose::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/pattern/02.webp") repeat right center; /* adjust path if needed */
  
  animation: bgScroll 50s linear infinite;
  opacity: 0.7; /* set to 1 temporarily to test visibility */
  z-index: 0;
}

/* animation - slow horizontal scroll */
@keyframes bgScroll {
  0% {
    background-position: left center;
  }
  100% {
    background-position: calc(100% - 200px) center;
  }
}

/* content */
.about-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 1;
  padding: 3rem 0;
}

.about-block {
  flex: 1;
  background: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 6px 12px rgba(0,0,0,0.05);
  transition: transform 0.3s;
}

.about-block:hover {
  transform: translateY(-6px);
}



/* ========== VALUES ========== */
#about-values {
  background: #fff;
  text-align: center;
}
#about-values h4{
  color: #f9a305;
}
#about-values p {
  color: #fff;
}
.about-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.about-value-card {
  background: #161d3a;
  border-top: 4px solid #f9a305;
  border-radius: 8px;
  padding: 1.8rem;
  transition: 0.3s;
  box-shadow: 0 0 5px #999;
}

.about-value-card:hover {
  
  transform: translateY(-3px);
}


/* ======== RESPONSIVE ======== */
@media (max-width: 768px) {
  #about-hero h1 { font-size: 2.2rem; }
  .about-flex { flex-direction: column; }
}