/*

TemplateMo 591 villa agency

https://templatemo.com/tm-591-villa-agency

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'SVN-Poppins';
  src: url('../fonts/svn-poppins/SVN-Poppins-Medium.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../fonts/svn-gilroy/SVN-Gilroy-Regular.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'SVN-Gilroy';
  src: url('../fonts/svn-gilroy/SVN-Gilroy-Bold.otf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'SVN-Gilroy Bold';
  src: url('../fonts/svn-gilroy/SVN-Gilroy-Bold.otf');
  font-weight: normal;
  font-style: normal;
}
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

:root {
    --primary: #FC7310;
    --secondary: #003D65;
    --dark: #242A2E;
    --gray: #787878;
    --light: #E8E8E8;
}

html, body {
  font-family: 'SVN-Gilroy';
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 16px;
  line-height: 28px;
}

a {
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'SVN-Gilroy Bold';
  margin: 0;
  font-weight: 700;
}

p {
  
  letter-spacing: .16px;
}

img {
  max-width: 100%;
  height: auto;
}

.gap-21 {
  gap: 21px;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7,
}

@media (min-width: 1200px) {
  .col-20 {
     flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) {
  
  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .pl-40 {
    padding-left: 40px;
  }
}

.back-to-top {
  background: var(--primary);
  border-color: var(--primary);
  position: fixed;
  display: none;
  right: 20px;
  bottom: 45px;
  z-index: 99;
}

.back-to-top:hover {
  border-color: var(--dark);
  background: var(--dark);
  color: white;
}

.back-to-top:active,
.back-to-top:focus-visible {
  box-shadow: none !important;
  border-color: var(--dark) !important;
  background-color: var(--dark) !important;
}

.btn-lg-square {
  width: 48px;
  height: 48px;
}

.btn-square, 
.btn-sm-square, 
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/

.section-title h6 {
  color: var(--primary);
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: 1.92px;
  margin-bottom: 8px;
}

.section-title h2 {
  line-height: 40px;
  text-transform: uppercase;
  letter-spacing: .96px;
  margin-bottom: 16px;
}

/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.language-menu a {
  color: var(--gray);
}

.language-menu a.active {
  color: var(--primary);
}

.header-area {
  padding: 4px 0;
  background: white;
  box-shadow: 0px 4px 22.1px 0px #0000000D;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area img {
  height: 92px;
}

.navbar-light .navbar-nav {
  align-items: center;
  gap: 24px;
}

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

.navbar-light .navbar-nav .nav-link {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 24px;
  letter-spacing: .16px;
  border-bottom: 1px solid transparent;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.box-search a {
  display: inline-block;
  color: var(--dark);
  background: #F7F7F7;
  padding: 10px;
  border-radius: 23px;
  width: 44px;
  text-align: center;
}

.content-form {
  background-color: transparent;
  border: none;
}

.searchform {
  position: relative;
}

.searchform-wrapper form {
  margin-bottom: 0;
}

.flex-row {
  -js-display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  width: 100%;
}

.flex-row {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flex-grow {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -ms-flex-negative: 1;
  -ms-flex-preferred-size: auto;
}

.flex-row .flex-col {
  padding-right: 4px;
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.searchform-wrapper input[type=search] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, .09);
  padding: 0 0.75em;
  height: 67px;
  font-size: .97em;
  border-radius: 0;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  background-color: rgba(255, 255, 255, .2);
  color: #ffffff;
  -webkit-box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 10%);
  -webkit-transition: color .3s, border .3s, background .3s, opacity .3s;
  -o-transition: color .3s,border .3s,background .3s,opacity .3s;
  transition: color .3s, border .3s, background .3s, opacity .3s;
  border-radius: 99px;
  padding: 0 20px;
}

.searchform input[type=search] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.searchform input[type=search]::placeholder {
  color: #ffffff;
  font-size: 20px;
}

.searchform input[type=search]:focus, 
.searchform input[type=search]:focus-visible {
  outline: none;
}

.searchform-wrapper .flex-col:last-of-type {
  margin-left: -2.9em;
}

.searchform .icon {
  color: currentColor;
  border-color: transparent;
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.searchform .icon i {
  color: white;
}

.btn-custom {
  border: 1px solid var(--primary);
  background: var(--primary);
  padding: 10px 26px;
  color: white;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: .16px;
}

.btn-custom:hover {
  background: var(--primary);
  color: white;
}

.content-bottom__offcanvas {
  margin: 12px 0 0;
  padding: 16px;
  background: white;
}

.content-bottom__offcanvas h3 {
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: black;
}

.content-bottom__offcanvas ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content-bottom__offcanvas li a {
  color: black;
}

.m-menu-item {
  display: none;
  margin-top: 10px;
}

@media (min-width: 992px) and (max-width: 1399px) {

  .gap-21 {
    gap: 12px;
  }

  .topper a {
    font-size: 14px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {

  .topper a {
    font-size: 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .navbar-light .navbar-nav {
    gap: 16px;
  }

  .navbar-light .navbar-nav .nav-link,
  .language-menu {
    font-size: 12px;
  }

}

@media (min-width: 992px) {

  .navbar-light .navbar-nav ul.sub-menu {
    list-style: none;
    padding: 0;
    position: absolute;
    top: 65px;
    left: 0;
    transition: all .4s ease-in-out;
    overflow: hidden;
    width: 100%;
    height: 0;
    background: white;
  }

  .navbar-light .navbar-nav .nav-item:hover ul.sub-menu {
    display: flex;
    height: 81px;
    box-shadow: 0 2px 2px 0 #0000003b;
  }

  .sub-menu a {
    font-size: 16px;
    padding: 0 20px;
    height: 80px;
    color: var(--dark);
    font-weight: 600;
    text-transform: capitalize;
    display: flex;
    align-items: center;
  }
}

@media (max-width: 991px) {

  .toggle-language {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .navbar .offcanvas {
    border: 0;
    background: #ececec;
    max-width: 80%;
    z-index: 1200;
  }

  .offcanvas-header {
    padding: 5px;
    background: white;
    align-items: center;
  }

  .offcanvas-header .btn-close {
    opacity: 1;
    padding: 10px 20px;
  }

  .m-menu-item {
    display: block;
  }

  .m-menu-customer a {
    width: 100%;
  }

  .search-project-frm {
    padding: 1px 10px;
    margin: 10px 0;
    width: 100%;
  }

  .search-project-frm input[type="text"] {
    border: 0;
  }

  .navbar .offcanvas-body {
      padding: 0;
  }

  .navbar .navbar-nav {
    gap: 12px;
    padding: 16px;
    background: white;
    border-top: 1px solid #EEEEEE;
    align-items: flex-start;
  }

  .nav-item-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  ul.sub-menu {
    padding-top: 8px;
    padding-left: 0;
    list-style: none;
    /*display: none;*/
  }

  ul.sub-menu li:not(:last-child) {
    margin-bottom: 8px;
  }

  .sub-menu a {
    display: block;
    color: var(--dark);
    font-weight: 600;
    text-transform: capitalize;
  }
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.banner-item .hs-item {
  height: 100%;
  min-height: 630px;
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.header-text {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  color: white;
}

.header-text h5 {
  font-size: 32px;
  line-height: 40px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.header-text h3 {
  color: var(--primary);
  font-size: 48px;
  line-height: 60px;
  letter-spacing: .16px;
  margin: 12px 0;
}

.main-banner .header-text img {
  width: auto;
  display: inline-block;
}

.owl-banner .owl-dots {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.owl-banner .owl-dots span {
  width: 8px;
  height: 8px;
  background: #FFFFFF5C;
  border-radius: 4px;
  display: block;
}

.owl-banner .owl-dot.active span {
  background: var(--primary);
  width: 31px;
}

@media (max-width: 991px) {

  .banner-item .hs-item {
    min-height: 470px;
  }

  .main-banner .header-text img {
    width: 50px;
  }

  .header-text h3 {
    font-size: 40px;
    line-height: 50px;
  }

}

@media (max-width: 767px) {

  .banner-item .hs-item {
    min-height: 395px;
  }

  /*.set-bg {
    background-position: left;
  }*/
  
  .header-text h3 {
    font-size: 28px;
    line-height: 36px;
  }

  .owl-banner .owl-dots {
    bottom: 24px;
  }
}

/* 
---------------------------------------------
Stats Style
--------------------------------------------- 
*/

.stats {
  background: url('../img/bg-stats.jpg') center no-repeat;
  background-size: cover;
}

.intro-text h5 {
  font-size: 18px;
  line-height: 28px;
  text-transform: uppercase;
  letter-spacing: 1.92px;
}

.intro-text h2 {
  line-height: 40px;
  text-transform: uppercase;
  margin: 8px 0 18px;
}

.intro-text p {
  margin-bottom: 0;
}

.stats-box {
  background: var(--secondary);
  padding: 44px 24px;
  position: relative;
  z-index: 2;
}

.stats-box h3 {
  font-size: 40px;
  line-height: 40px;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.stats-box h5 {
  color: var(--primary);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: 1.92px;
  text-transform: uppercase;
}

.stats-box h5:last-child {
  color: white;
  font-weight: 700;
  letter-spacing: .36px;
}

.stats-list {
  display: flex;
  flex-wrap: wrap;
}
.stats-list .stats-item {
  flex: 0 0 33%;
  padding: 10px;
}

@media (min-width: 991px) {

  .stats-box {
    margin-right: -55px;
  }

  .stats-box::before {
    content: '';
    border-top: 90px solid transparent;
    border-left: 90px solid var(--secondary);
    position: absolute;
    top: 0;
    right: -90px;
    transform: rotate(90deg);
  }

  .stats-list .stats-item:nth-child(1) {
    flex: 0 0 40%;
  }
  .stats-list .stats-item:nth-child(2) {
    flex: 0 0 60%;
  }
}
@media(max-width: 990px) {
  .stats-list .stats-item {
    flex: 0 0 100%;
  }
}

@media (max-width: 767px) {

  .stats-box h5 {
    font-size: 18px;
    line-height: 28px;
  }
}

/* 
---------------------------------------------
Machinery Style
--------------------------------------------- 
*/

.machinery {
  background: url('../img/bg-machine.jpg') center no-repeat;
  background-size: cover;
}

.machine-item a {
  display: block;
}

.machine-images {
  position: relative;
  margin-bottom: 16px;
}

.machine-number {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 58px;
  border-radius: 15px;
  background: var(--primary);
  color: white;
  text-align: center;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}

.machine-content {
  text-align: center;
}

.machine-content h3 {
  color: white;
  font-size: 16px;
  line-height: 24px;
  text-transform: capitalize;
}

.machine-item a:hover h3 {
  color: var(--primary);
}

.machine-control {
  position: relative;
}

.machine-control .swiper-button-next,
.machine-control .swiper-button-prev {
  top: -200px;
}

.machine-control .swiper-button-next::after,
.machine-control .swiper-button-prev::after {
  color: white;
}

.machine-control .swiper-button-next {
  right: -50px;
}

.machine-control .swiper-button-prev {
  left: -50px;
}

@media (max-width: 991px) {

  .machine-control .swiper-button-next, 
  .machine-control .swiper-button-prev {
    top: -150px;
  }

  .machine-control .swiper-button-next {
    right: -40px;
  }

  .machine-control .swiper-button-prev {
    left: -40px;
  }
}

@media (max-width: 767px) {

  .machine-control {
    display: none;
  }

  .machine-number {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured {
  overflow: hidden;
}

.featured-content a {
  background: transparent;
  color: var(--primary);
}

.featured-bottom {
  margin-top: 50px;
}

@media (min-width: 1400px) {
  .featured-content {
    width: 50%;
  }
}

@media (min-width: 992px) and (max-width: 1399px) {

  .featured-content {
    width: 70%;
  }
}

@media (min-width: 992px) {

  .featured-content::before {
    content: '';
    background: #EFF5F9;
    width: 105px;
    height: 234px;
    display: block;
    transform: skewY(20deg);
    position: absolute;
    top: -50px;
    z-index: -1;
  }
}

/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.products {
  background: url('../img/bg-product.jpg') center no-repeat;
  background-size: cover;
}

.products .section-heading h6,
.partner .section-heading h6 {
  color: var(--secondary);
  font-weight: 400;
}

.products .section-heading h2,
.partner .section-heading h2 {
  color: white;
}

.products .right-content p,
.partner .right-content p {
  margin-bottom: 0;
  color: white;
}

.products .item a {
  display: block;
  color: white;
}


.images-box {
  position: relative;
  overflow: hidden;
}

.images-box::before {
  content: '';
  display: block;
  padding-top: 90%;
}

.images-box a,
.images-box .img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.images-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.products .content {
  padding: 21px 20px;
  text-align: center;
}

.products a:hover .content {
  background: var(--secondary);
  color: var(--dark);
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video-large a {
  display: block;
  position: relative;
  overflow: hidden;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-item a > img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.video-item a:hover > img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.video-item .video-play {
  top: inherit;
  left: 0;
  bottom: 0;
  transform: inherit;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-item a:hover .video-play {
  height: 100%;
}

@media (max-width: 767px) {

  .video-play {
    width: 50px;
    height: 50px;
  }
}

/* 
---------------------------------------------
News Style
--------------------------------------------- 
*/


.new-images {
  border-top-left-radius: 88px;
}

.new-images::before {
  padding-top: 65%;
}

.cate-date {
  color: var(--primary);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  margin-bottom: 8px;
}

.cate-date span {
  position: relative;
}

.cate-date span:first-child::after {
  content: '\f111';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 900;
  font-size: 6px;
  display: inline-block;
  vertical-align: middle;
  padding-left: 6px;
}

.new-content {
  position: relative;
  background: white;
  padding: 26px 24px;
  border-bottom-right-radius: 62px;
  box-shadow: 0px 3px 11.1px 0px #0000001C;
  width: 85%;
  margin-left: auto;
  margin-top: -50px;
}

.new-content h3 {
  font-size: 16px;
  line-height: 24px;
  color: black;
}

.new-item a:hover .new-content {
  background: var(--secondary);
}

.new-item a:hover .cate-date,
.new-item a:hover h3 {
  color: white;
}


.info-cate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

.category-name,
.published,
.hits {
  font-size: 12px;
  color: #909090;
}

.content-toc {
  border: 1px solid #000;
  border-radius: 16px;
  padding: 10px;
  margin-bottom: 10px;
  display: inline-block;
}

.content-toc p.toc_title {
  letter-spacing: -0.5px;
  margin: 0px 0px 10px 0;
  font-weight: 700;
  cursor: pointer;
}

.content-toc .toc-menu ol {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
  font-weight: 500;
}

.toc-menu a {
  color: #000;
}

.toc-menu a:hover {
  color: var(--primary);
}

@media (max-width: 991px) {

  .new-content {
    padding: 16px;
  }
}

/*social*/
.share-box>a {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #ccc;
    margin-right: 5px;
    border-radius: 3px;
    line-height: 30px;
    font-size: 14px;
    color: #000
}

.share-box .share-box-social {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    bottom: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #000;
    padding: 3px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 3px;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0)
}

.quick-alo-phone,.quick-alo-phone.quick-alo-show {
    visibility: visible
}

.share-box .share-box-social li {
    background: #ea6e26;
    margin: 0 1px
}

.share-box .share-box-social li a {
    padding: 10px;
    color: #fff;
    font-size: 13px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px
}

.share-box .share-box-social li a:hover {
    color: #001935
}

.share-box .share-box-social:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #0c4556 transparent transparent;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 99;
    margin-left: -3px
}

.share-box:hover .share-box-social {
    opacity: 1;
    visibility: visible;
    margin-bottom: 6px
}

/*social*/


/* 
---------------------------------------------
Partner Style
--------------------------------------------- 
*/

.partner-item {
  text-align: center;
}

.partner-item img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.partner-item img:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  background: var(--primary);
}

.contact-content {
  padding-left: 40px;
  padding-right: 40px;
}

.contact-content h3 {
  font-size: 24px;
  line-height: 32px;
  text-transform: capitalize;
  margin-bottom: 16px;
}

.contact-content a.btn-custom {
  background: white;
  border-color: white;
  color: var(--primary);
  font-weight: 700;
}

@media (max-width: 991px) {

  .contact img {
    height: 100%;
    object-fit: cover;
  }

  .contact-content {
    padding: 24px;
  }

  .contact-content h3 {
    font-size: 20px;
    line-height: 24px;
  }
}

@media (max-width: 767px) {

  .contact-content {
    padding: 16px;
  }

  .contact-content h3 {
    font-size: 24px;
    line-height: 32px;
  }
}
/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

.footer-main {
  background: var(--secondary);
  padding: 55px 0 65px;
}

.footer-item h3 {
  color: var(--primary);
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  margin-bottom: 21px;
}

.footer-title h3 {
  font-family: 'Times New Roman';
  margin-bottom: 0;
}

.footer-title h5 {
  color: white;
  font-family: 'Times New Roman';
  font-size: 10px;
  line-height: 28px;
  letter-spacing: .36px;
}

.footer-item ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-item li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-item-info li:nth-child(4) p {
  color: var(--primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .96px;
}

.footer-item-info li:nth-child(4) span {
  display: block;
  color: white;
}

.footer-item li:not(:last-child) {
  margin-bottom: 16px;
}

.footer-item-info a {
  color: #fff;
}
.footer-item-info a:hover {
  color: var(--primary);
}

.social-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-icon li {
  margin-bottom: 0 !important;
}

.footer-item p {
  color: white;
  font-size: 15px;
  margin-bottom: 0;
}

.social-icon {
  margin-top: 54px;
}

.social-icon a {
  color: #939393;
  font-size: 23px;
  margin-right: 27px;
}

.social-icon a:last-child {
  margin-right: 0;
}

.footer-item-nav ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-item-nav li {
  display: block;
}

.footer-item-nav a {
  display: block;
  color: white;
  text-transform: capitalize;
  font-size: 14px;
}

.footer-item-nav a:hover {
  color: var(--primary);
}

.footer-item-nav li:not(:last-child) {
  margin: 0;
}

.footer-bottom {
  background: #042c47;
  padding: 14px 0;
  border-top: 1px solid #FFFFFF17;
}

.footer-bottom p {
  color: white;
  margin-bottom: 0;
}

.list-nav a {
  color: #FFFFFF63;
  line-height: 40px;
  text-transform: capitalize;
}

.list-nav a:not(:last-child) {
  margin-right: 24px;
}

@media (max-width: 991px) {

  .footer-bottom {
    text-align: center;
  }

  .list-nav a {
    line-height: 24px;
  }
}

/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url('../img/bg-heading.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.page-heading h3 {
  font-size: 36px;
  line-height: 40px;
  text-transform: uppercase;
  color: white;
  letter-spacing: .32px;
  margin-bottom: 16px;
}

.page-heading li {
  font-size: 14px;
  line-height: 24px;
  text-transform: uppercase;
}

.page-heading .breadcrumb-item+.breadcrumb-item::before {
  content: '>';
  color: white;
}

/* 
---------------------------------------------
Products Style
--------------------------------------------- 
*/

.archive-content h2 {
  color: var(--primary);
  line-height: 40px;
}

.archive-content h5 {
  color: var(--dark);
  line-height: 24px;
  text-transform: capitalize;
  margin: 8px 0 16px;
}

.archive-content h5 span {
  color: var(--primary);
}

.tab-scroll ul,
.tab-scroll li {
  border: none;
  justify-content: center;
  gap: 28px;
}
.tab-scroll li {
  max-width: 190px;
}

.archive-products .tab-scroll button {
  background-color: var(--light);
  font-weight: 700;
  color: black;
  text-transform: capitalize;
  padding: 6px 22px;
  border-radius: 36px;
  height: 100%;
  position: relative;
  font-size: 15px;
  line-height: 1.3;
  /*white-space: nowrap;*/
}

.archive-products .tab-scroll button.active {
  background: var(--primary);
  color: white;
}

.tab-scroll button.active {
  border: none;
}

.archive-item {
  height: 100%;
}

.archive-item a {
  display: block;
  background: #F3F3F3;
  color: var(--dark);
  padding: 26px 42px;
  height: 100%;
}

.archive-item a:hover {
  background: var(--primary);
  color: white;
  text-decoration: underline;
}

.archive-content {
  margin-top: 12px;
}

.archive-content h3 {
  font-size: 14px;
  line-height: 24px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-item {
  text-align: center;
}

.product-item a {
  display: block;
  position: relative;
  overflow: hidden;
  color: white;
}

.product-item a::after {
  content: '';
  background: transparent;
  width: 100%;
  height: 6px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.product-item a:hover::after {
  background: var(--primary);
}

.product-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, rgba(16, 16, 16, 0.76) 100%);
  width: 100%;
  height: 75%;
}

.product-item.second .product-image::after {
  background: linear-gradient(180deg, rgba(0, 61, 101, 0) 0%, #003D65 109.09%);
}

.product-content {
  position: absolute;
  top: calc(100% - 60px);
  left: 0;
  transition: all .5s ease;
  padding: 24px;
}

.product-content h3 {
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  letter-spacing: .64px;
  margin-bottom: 12px;
}

.product-item.second h3 {
  letter-spacing: 2.56px;
}

.product-content p {
  margin-bottom: 0;
}

.product-item a:hover .product-content {
  top: 45px;
}

.product-item .images-box::before,
.business-item .images-box::before {
  padding-top: 100%;
}

@media (min-width: 1400px) {

  .product-item a:hover .product-content {
    top: calc(100% - 175px);
  }
}

@media (min-width: 1200px) and (max-width: 1420px) {

  .product-content h3 {
    font-size: 16px;
  }
}

@media (min-width: 992px) {

  .archive-products .tab-scroll button::after {
    content: '';
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(315deg);
  }

  .archive-products .tab-scroll button.active::after {
    border-left-color: var(--primary);
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .product-item .images-box::before {
    padding-top: 110%;
  }
}

@media (max-width: 991px) {

  .product-content h3 {
    font-size: 18px;
  }

  .archive-content h5 {
    font-size: 16px;
  }

  .tab-scroll ul {
    justify-content: inherit;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
  }
}

@media (max-width: 767px) {

  .product-item a:hover .product-content {
    top: 125px;
  }
}

/* 
---------------------------------------------
Business Style
--------------------------------------------- 
*/

.business {
  background: url('../img/bg-business.png') center no-repeat;
  background-size: cover;
}

.business-content {
  margin-top: 8px;
}

.business-content h3 {
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
  color: var(--secondary);
}

/*.business-item a:hover .business-image {
  border-color: linear-gradient(138.96deg, #FC7310 23.27%, #FFEBDD 52.66%, #FD9F5B 73.79%);
}*/

.business-image .img {
  border-radius: 50%;
  overflow: hidden;
}

.business-item a:hover h3 {
  color: var(--primary);
}

@media (max-width: 767px) {

  .business-content h3 {
    font-size: 18px;
  }
}

/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.product-single--thumb-img .swiper-slide {
  border: 1px solid #E4E4E4;
}

.product-single--thumb-img .swiper-slide-thumb-active {
  border-color: var(--primary);
}

.breadcrumbs-single a, 
.breadcrumbs-single li {
  font-size: 12px;
  line-height: 28px;
  text-transform: capitalize;
  letter-spacing: .32px;
  color: #8B8B8B;
}

.breadcrumbs-single li.active {
  color: var(--primary);
  text-decoration: underline;
}

.breadcrumbs-single .breadcrumb-item+.breadcrumb-item::before {
  content: '>';
}

.single-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.single-info h1 {
  color: var(--dark);
  font-size: 28px;
  line-height: 40px;
  letter-spacing: .32px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.price {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: #E30303;
}

.brand ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}

.brand li {
  color: #626262;
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
  position: relative;
  padding: 0 12px;
}

.brand li:first-child {
  padding-left: 0;
}

.brand li:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: #D9D9D9;
  width: 1px;
  height: 100%;
}

.brand li i {
  color: #FFD56C;
}

.description p {
  margin-bottom: 0;
}

.single-button a {
  display: block;
  font-weight: 700;
  font-size: 14px;
  line-height: 24px;
  text-transform: capitalize;
}

.single-button a span {
  font-weight: 400;
  text-transform: initial;
}

.single-info > div:not(:last-child) {
  margin-bottom: 12px;
}

.tabs-content {
  margin-top: 48px;
}

.nav-wrapper {
  margin-bottom: 50px;
}

.nav-wrapper .nav-tabs {
  justify-content: center;
  border-top: 1px solid #dee2e6;
  border-bottom: none;
}

.nav-wrapper .nav-tabs .nav-link {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 24px;
  line-height: 40px;
  color: var(--dark);
  border-radius: 0;
}

.nav-wrapper .nav-tabs .nav-link.active {
  border: none;
  border-top: 2px solid var(--primary);
  color: var(--primary);
}

.table-general thead th {
  background: var(--secondary);
  color: white;
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
}

.table-general tbody td {
  font-size: 14px;
  line-height: 24px;
  padding: 12px 30px;
  white-space: nowrap;
}

.table-general tbody tr:nth-of-type(odd)>* {
  background-color: #EFF9FF;
  white-space: nowrap;
}

.related-item a {
  display: block;
  position: relative;
}

.related-image::before {
  padding-top: 65%;
}

.related-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  text-transform: uppercase;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.66) -11.67%, rgba(0, 0, 0, 0.66) 100%);
}

.related-content h3 {
  font-size: 18px;
  line-height: 28px;
  padding: 26px 0;
}

.related-item a:hover .related-content {
  background: var(--primary); 
}

@media (min-width: 992px) and (max-width: 1199.99px) {

  .single-thumb {
    margin-top: 24px;
  }
}

@media (max-width: 991px) {

  .single-wrapper {
    flex-direction: column-reverse;
  }

  .single-thumb {
    margin-bottom: 24px;
  }

  .nav-wrapper .nav-tabs .nav-link {
    font-size: 18px;
  }

  .table-general tbody td {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {

  .single-product {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .single-info h1 {
    font-size: 18px;
    line-height: 28px;
  }

  .product-group {
    flex-direction: column;
  }

  .product-group a {
    width: 100%;
  }

  .table-detail tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .nav-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    white-space: nowrap;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    margin-bottom: 24px;
  }

  .nav-wrapper .nav-tabs {
    flex-wrap: nowrap;
  }
}

/* 
---------------------------------------------
Why Us Page Style
--------------------------------------------- 
*/

.why-us {
  display: flex;
  flex-wrap: wrap;
  min-height: 560px;
}

.why-image {
  background: var(--why_us-bg);
  background-size: cover;
  flex: 1 1 65%;
  /*min-height: 560px;*/
}

.why-box-content {
  flex: 1 1 35%;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--primary);
  padding: 60px 40px;
}

.why-box-content::before,
.why-box-content::after {
  content: '';
  background: url('../img/why/vector-1.png') center no-repeat;
  background-size: cover;
  width: 600px;
  height: 130px;
  position: absolute;
  top: 0;
  right: 0;
}

.why-box-content::after {
  background: url('../img/why/vector-2.png') center no-repeat;
  background-size: cover;
  width: 100%;
  top: inherit;
  right: inherit;
  bottom: 0;
  left: 0;
}

.why-text {
  max-width: 400px;
}

.why-text h5 {
  font-size: 28px;
  line-height: 40px;
  text-transform: uppercase;
  letter-spacing: .64px;
}

.why-text h3 {
  font-size: 40px;
  line-height: 52px;
  text-transform: uppercase;
  letter-spacing: .16px;
  margin: 8px 0 16px;
}

.why-text p {
  font-weight: 600;
  font-style: italic;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: .16px;
  margin-bottom: 0;
}

.info-box {
  display: inline-flex;
  flex-direction: column;
}

.info-item {
  position: relative;
  display: inline-block;
}

.info-box-content {
  border-bottom: 1px dashed var(--primary);
  border-left: 1px dashed var(--primary);
  padding-left: 16px;
  display: inline-block;
}

.info-box-content h4 {
  color: transparent;
  -webkit-text-stroke: 1px var(--primary);
  font-size: 36px;
  line-height: 24px;
  letter-spacing: .96px;
  margin-bottom: 10px;
}

.info-box-content p {
  text-transform: capitalize;
  margin-bottom: 0;
}

.stat-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stat-box h5 {
  color: var(--primary);
  font-size: 64px;
  /*line-height: 24px;*/
}

.stat-box h6 {
  font-size: 14px;
  line-height: 24px;
  text-transform: capitalize;
  display: grid;
}

.stat-box h6 span {
  color: var(--primary);
  font-size: 20px;
}

.raw-content {
  position: relative;
}

.raw-content > img {
  border-radius: 124px 124px 0 124px;
}

.raw-content.second > img {
  border-radius: 124px 124px 124px 0;
}

.raw-description {
  padding-top: 48px;
}

.raw-description .description {
  margin-bottom: 20px;
}

.icon-box.left {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}

.icon-box-text {
  flex: 1 1 0px;
}

.icon-box-text h5 {
  font-size: 40px;
  line-height: 40px;
  color: var(--secondary);
}

.icon-box-text h6 {
  text-transform: uppercase;
  font-size: 14px;
  line-height: 24px;
  margin: 4px 0;
}

.icon-box-text p {
  margin-bottom: 0;
}

.icon-box .icon-box-img+.icon-box-text {
  padding-left: 12px;
}

.percent {
  position: relative;
}

.percent::before {
  content: '';
  border-left: 1px dashed var(--primary);
  height: 100%;
  position: absolute;
  left: 0;
}

.percent::after {
  content: '';
  border-bottom: 1px dashed var(--primary);
  width: 12%;
  position: absolute;
  bottom: 0;
}

.percent-content {
  padding-left: 16px;
}

.percent-content p {
  margin-bottom: 0;
}

.percent-content .stat-box h5 {
  font-size: 30px;
}

.quarry {
  background-image: url(../img/bg-quarry.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  /*min-height: 424px;*/
}

.quarry-wrapper {
  position: relative;
  background: white;
  padding: 44px 24px;
  border-radius: 53px;
  box-shadow: 0px 5px 28.9px 0px #0000001A;
  margin-bottom: -220px;
}

.quarry-title {
  margin-bottom: 40px;
}

.quarry-title h2 {
  font-size: 32px;
  line-height: 40px;
  text-transform: uppercase;
  color: var(--secondary);
  position: relative;
}

.quarry-title h2::before,
.quarry-title h2::after {
  content: '';
  background: var(--primary);
  width: 164px;
  height: 2px;
  position: absolute;
  top: 20px;
  left: 100px;
}

.quarry-title h2::after {
  top: inherit;
  left: inherit;
  bottom: 20px;
  right: 180px;
}

.quarry-title h2 span {
  color: var(--primary);
}

.factory {
  padding: 250px 0 48px;
}

.title {
  display: inline-block;
  position: relative;
  background: var(--primary);
  color: white;
  font-family: 'SVN-Gilroy Bold', sans-serif;
  font-weight: 700;
  font-style: italic;
  line-height: 24px;
  padding: 7px 16px;
}

.title::after,
.title::before,
.quality-title .box::after,
.quality-title .box::before {
  content: '';
  border-top: 20px solid transparent;
  border-left: 20px solid var(--primary);
  position: absolute;
  top: 0;
  right: -20px;
  transform: rotate(90deg);
}

.title::before,
.quality-title .box::before {
  top: inherit;
  bottom: 0;
  transform: inherit;
}

.info-box-factory {
  display: inline-block;
}

.info-box-factory .item {
  position: relative;
  margin-left: 8px;
}

.info-box-factory .item::before {
  content: '';
  border-left: 1px dashed var(--primary);
  height: 100%;
  position: absolute;
  left: 0;
}

.info-box-factory .item::after {
  content: '';
  border-bottom: 1px dashed var(--primary);
  width: 12%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.info-box-factory .item:last-child::after {
  width: 100%;
}

.factory-content {
  padding-left: 24px;
}

.factory-content > p {
  margin-bottom: 0;
  text-transform: capitalize;
}

.factory-content > p span {
  color: var(--primary);
}

.stat-box p {
  margin-bottom: 0;
}

.stat-box.box p {
  text-transform: capitalize;
}

.sub-content {
  font-style: italic;
  font-size: 12px;
  line-height: 24px;
  margin: 8px 0 4px;
}

.technology {
  background: url('../img/bg-tech.jpg') center no-repeat;
  background-size: cover;
}

.tech-title h2 {
  color: #fff;
}
.tech-title h2::before,
.tech-title h2::after {
  left: 250px;
}

.tech-title h2::after {
  left: inherit;
  right: 300px;
}

.technology-title {
  position: relative;
  z-index: 2;
  margin-bottom: 30px;
}

.technology-title .title {
  font-size: 20px;
  line-height: 32px;
  padding-top: 13px;
  padding-bottom: 13px;
  padding-left: 60px;
}

.technology-title .title::after,
.technology-title .title::before {
  border-top-width: 40px;
  border-left-width: 40px;
  right: -40px;
}

.technology-content {
  margin-top: 34px;
}

.technology-content p {
  margin-bottom: 0;
}

.technology-title.key {
  margin-bottom: -30px;
  position: relative;
  z-index: 1;
}

.technology-title.key::before {
  display: none;
}

.technology .product-image::after {
  height: 35%;
}

.technology .product-item a::after {
  display: none;
}

.technology .product-content h3 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.technology .product-item a:hover .product-content {
  top: calc(100% - 210px);
}

.technology-modern {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.technology-title.modern .title {
  display: block;
  text-align: center;
  padding-top: 29px;
  padding-bottom: 29px;
  padding-left: 16px;
}

.technology-title.modern::before {
  border-right: 0;
  border-left: 30px solid var(--primary);
  left: inherit;
  right: 0;
}

.technology-title.modern .title::after,
.technology-title.modern .title::before {
  right: inherit;
  left: -40px;
  transform: rotate(-90deg);
}

.technology-title.modern .title::after {
  transform: rotate(180deg);
}

.logistics-content p span {
  background: var(--primary);
  color: white;
  display: inline-block;
  padding: 6px 10px;
  font-family: 'SVN-Gilroy Bold', sans-serif;
  font-weight: 600;
  font-size: 16px;
}

.logistics-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: 24px;
  display: flex;
  flex-wrap: wrap;
}

.logistics-content li {
  font-weight: 700;
  font-size: 14px;
  flex: 1;
}

.transport {
  margin-bottom: 16px;
}

.quality {
  background: #F8F8F8;
}

.quality-title {
  margin-bottom: 30px;
}

.quality-title .box {
  display: inline-block;
  position: relative;
}

.quality-title .title {
  padding-top: 12px;
  padding-bottom: 12px;
}

.quality-title .box::after,
.quality-title .box::before,
.quality-title .title::after,
.quality-title .title::before {
  border-top-width: 30px;
  border-left-width: 30px;
  right: -30px;
}

.quality-title .box::after,
.quality-title .box::before {
  right: inherit;
  left: -30px;
  transform: rotate(-90deg);
}

.quality-title .box::after {
  transform: rotate(180deg);
}

.quality-list,
.quality-item {
  display: flex;
  flex-wrap: wrap;
}

.quality-item,
.quality-images {
  max-width: 50%;
  flex: 0 0 50%;
}

.quality-item:nth-child(3) .quality-images,
.quality-item:nth-child(4) .quality-images {
  order: 2;
}

.quality-item:nth-child(3) .quality-content,
.quality-item:nth-child(4) .quality-content {
  order: 1;
}

.quality-images img {
  height: 100%;
  object-fit: cover;
}

.quality-content {
  flex: 1;
  padding: 16px 36px;
}

.quality-content h5 {
  font-size: 54px;
}

.quality-content h3 {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

.quality-content p {
  margin-bottom: 0;
}

.quality-left {
  min-height: 100%;
  height: 410px;
}

.quality-right {
  background: url('../img/quality-6.png') center no-repeat;
  background-size: cover;
  height: 100%;
  color: white;
  padding: 55px 32px;
}

.quality-right > ul {
  list-style: none;
  margin-bottom: 0;
  padding-left: 40px;
  width: 95%;
  margin-left: auto;
  gap: 16px;
}

.quality-right > ul > li {
  display: contents;
  height: 100% !important;
  cursor: pointer;
}

.quality-right > ul > li .item {
  display: flex;
  gap: 24px;
}

.quality-right > ul > li:not(:last-child) {
  margin-bottom: 16px;
}

.quality-right .content ul {
  list-style: disc;
  padding-left: 16px;
}

.quality-right .number {
  font-family: 'SVN-Gilroy Bold';
  font-size: 64px;
  line-height: 60px;
  color: transparent;
  -webkit-text-stroke: 1px white;
  transition: all .5s ease;
}

.quality-right .swiper-slide-thumb-active .number {
  font-size: 96px;
  font-weight: 700;
  color: white;
  -webkit-text-stroke: inherit;
}

.quality-right h5 {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
}

.quality-right > ul > li:last-child h5 {
  margin-bottom: 0;
}

.quality-right p {
  margin: 0;
}

.quality-right li {
  font-size: 14px;
  line-height: 24px;
}

.packing-box {
  padding: 56px 91px;
}

.packaging-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.packing-content h6 {
  font-size: 14px;
  line-height: 24px;
}

@media (min-width: 1920px) {

  .quality-right > ul {
    width: 85%;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  
  .quarry-title h2::before, 
  .quarry-title h2::after {
    display: none;
  }

  .technology-title .title {
    font-size: 18px;
    line-height: 24px;
  }

  .technology-content {
    margin-top: 16px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {

  .quarry-title h2::before, 
  .quarry-title h2::after {
    left: 5px;
  }

  .quarry-title h2::after {
    left: inherit;
    right: 85px;
  }

  .tech-title h2::before, 
  .tech-title h2::after {
    left: 155px;
  }

  .tech-title h2::after {
    left: inherit;
    right: 210px;
  }

  .technology .product-content h3 {
    font-size: 18px;
  }

  .technology .product-item a:hover h3 {
    -webkit-line-clamp: inherit;
  }
}

@media (min-width: 1200px) {

  .info-box {
    margin-left: -130px;
  }

  .info-item:nth-child(2) {
    right: -310px;
  }

  .info-item:nth-child(3) {
    right: -498px;
  }

  .slider-img {
    margin-right: -150px;
  }
}

@media (min-width: 992px) {

  .raw-description {
    width: 90%;
    margin-left: auto;
  }

  .technology-title {
    margin-left: -55px;
  }

  .technology-title.modern {
    margin-left: inherit;
    margin-right: -55px;
  }

  .technology-title::before {
    content: '';
    border-top: 30px solid transparent;
    border-right: 30px solid var(--primary);
    position: absolute;
    top: -30px;
    left: 1px;
  }
}

@media (min-width: 768px) {
  
  .why-content::after {
    content: '';
    border-top: 90px solid transparent;
    border-left: 90px solid var(--primary);
    position: absolute;
    bottom: 35px;
    left: -75px;
    transform: rotate(195deg);
  }

  .info-box-factory .item.second {
    left: 42px;
  }

  .info-box-factory .item.third {
    left: 84px;
  }

  .technology-system {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .why-image,
  .why-content {
    flex: 1 1 50%;
  }
}

@media (max-width: 991px) {

  .quarry-title h2::before, 
  .quarry-title h2::after {
    display: none;
  }

  .technology-title.modern .title {
    text-align: left;
  }

  .quality-left {
    height: 410px;
  }

  .quality-list {
    flex-direction: column;
  }

  .quality-item {
    max-width: 100%;
    flex: 0 0 100%;
  }
}

@media (max-width: 767px) {

  .why-image {
    min-height: 350px;
  }

  .quarry-title h2 {
    font-size: 20px;
    line-height: 28px;
  }

  .stat-box h5 {
    font-size: 32px;
  }

  .title {
    font-size: 11px;
  }

  .technology-title .title {
    padding-left: 24px;
  }

  .technology-title .title::after, 
  .technology-title .title::before {
    display: none;
  }

  .logistics-content li {
    flex: auto;
  }

  .quality-left {
    height: 200px;
  }

  .quality-right {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .quality-right > ul {
    width: 100%;
    padding-left: 0;
  }

  .quality-right > ul > li {
    gap: 12px;
    flex-wrap: wrap;
  }
 
  .quality-images {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .quality-item:nth-child(3) .quality-images, 
  .quality-item:nth-child(4) .quality-images {
    order: 1;
  }

  .quality-item:nth-child(3) .quality-content, 
  .quality-item:nth-child(4) .quality-content {
    order: 2;
  }
}

/* 
---------------------------------------------
Recruitment Page Style
--------------------------------------------- 
*/

.banner {
  background: url('../img/bg-quote.jpg') center no-repeat;
  background-size: cover;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.banner-box {
  background: url('../img/bg-content.png') center no-repeat;
  background-size: cover;
  padding: 124px 22px 98px 65px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  width: 100%;
  height: 427px;
}

.banner-box .icon {
  font-size: 96px;
  font-weight: 700;
  letter-spacing: .16px;
  position: absolute;
  top: 20px;
  left: 40px;
}

.banner-box h5 {
  text-transform: uppercase;
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 8px;
}

.banner-box h3 {
  font-size: 36px;
  line-height: 52px;
  letter-spacing: .16px;
}

.banner-box p {
  font-size: 18px;
  line-height: 28px;
  font-style: italic;
  margin-top: 16px;
  margin-bottom: 0;
}

.about-title h2::after {
  right: 100px;
}

.company-item {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  display: block;
  color: white;
}
.company-item a {
  color: #fff;
}

.company-content {
  background: #FC7310C4;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 39px 47px;
  transition: all .3s ease;
  width: 100%;
  position: absolute;
  bottom: -200px;
  opacity: 0;
}

.company-item:hover .company-content {
  bottom: 0;
  opacity: 1;
}

.company-content h6 {
  margin-bottom: 8px;
}

.company-content p {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.company-item-sm .images-box::before {
  padding-top: 43%;
}

.join-content {
  background: var(--bg-join);
  background-size: cover;
  padding: 104px 105px;
  border-radius: 40px;
}

.join-content h6 {
  font-size: 16px;
  line-height: 24px;
  color: white;
  text-transform: none;
  letter-spacing: inherit;
}

.join-content a.btn-custom {
  border-color: white;
  background: white;
  color: var(--primary);
  font-weight: 700;
}

.close-btn {
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  position: absolute;
  top: -15px;
  right: -15px;
}

.contact-form label {
  font-weight: 600;
}

.contact-form input:focus,
.contact-form textarea:focus {
  box-shadow: none;
}

@media (min-width: 1200px) and (max-width: 1399px) {

  .about-title h2::after {
    right: 0;
  }
}

@media (min-width: 768px) {
  .about-bottom {
    width: 75.5%;
    margin-left: auto;
  }
}

@media (max-width: 991px) {

  .company-content {
    padding: 16px;
  }

  .banner-box h3 {
    font-size: 30px;
    line-height: 42px;
  }
}

@media (max-width: 767px) {

  .banner {
    min-height: 400px;
  }

  .banner-box {
    padding-left: 32px;
    height: 310px;
  }

  .banner-box h5 {
    font-size: 18px;
    line-height: 24px;
  }

  .banner-box .icon {
    top: 0;
  }

  .about-bottom {
    margin-left: 16px;
    margin-right: 16px;
  }

  .company-item-sm .images-box::before {
    padding-top: 60%;
  }

  .join-content {
    padding: 104px 48px;
  }
}

/* 
---------------------------------------------
About Page Style
--------------------------------------------- 
*/

.banner-about {
  background: var(--banner-bg);
  background-size: cover;
}

.infographic {
  display: flex;
}
.infographic p:last-child {
  margin-bottom: 0;
}

.infographic::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 492px;
  height: 492px;
  transform: translate(-50%, -50%);
  border: 2px dashed #eee;
  border-radius: 50%;
  z-index: 0;
}

.circle-image {
  width: 402px;
  height: 402px;
  border-radius: 50%;
  overflow: hidden;
  border: 35px solid #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
  order: 1;
}

.raw {
  overflow: hidden;
}

.infographic-left {
  order: 0;
}
.infographic-right {
  order: 2;
}

.info-items {
  margin-top: 40px;
}

.info-items .box-title {
  font-size: 16px;
  line-height: 40px;
  font-weight: 700;
  text-transform: capitalize;
  position: relative;
  display: inline-block;
}

.info-items label {
  display: block;
}

.info-items .box-title span {
  font-size: 34px;
  color: var(--primary);
}

.infographic-left .info-items:nth-child(3) label {
  text-align: center;
}

.box-title .arrow {
  position: absolute;
  right: -110px;
  top: 15px;
}

.infographic-right .arrow {
  right: inherit;
  left: -190px;
  transform: scale(-1, 1);
}


.infographic-left .info-items:nth-child(1) .arrow {
  right: -75px;
  top: 25px;
}

.infographic-left .info-items:nth-child(2) .arrow {
  top: 6px;
}

.infographic-left .info-items:nth-child(3) .arrow {
  top: -18px;
  right: -85px;
}

.infographic-right .info-items:nth-child(2) .arrow {
  top: 10px;
  left: -110px;
}

.infographic-right .info-items:nth-child(3) .arrow {
  top: -10px;
  left: -180px;
}

.title-about::before {
  height: 142px;
}

.timeline {
  position: relative;
  border-top: 1px dashed var(--primary);
  list-style: none;
  padding: 0;
  margin: 100px 0;
}

.title-year h5 {
  font-size: 70px;
  color: transparent;
  -webkit-text-stroke: 1px #FC731033;
}

.title-year h3 {
  font-size: 16px;
  line-height: 24px;
  margin-top: -50px;
}

.newsletter {
  padding: 157px 0 48px;
}

.letter-wrapper .quarry-title h2::before,
.letter-wrapper .quarry-title h2::after {
  display: none;
}

.letter-wrapper {
  margin-bottom: -280px;
}

.letter-founder {
  position: absolute;
  top: -115px;
  left: -140px;
}

.founder-bottom {
  width: 35%;
  margin-left: auto;
}

.founder-bottom h3 {
  font-family: "The Nautigal", cursive;
  font-weight: 700;
  font-size: 36px;
  color: var(--primary);
}

.founder-bottom h5 {
  font-size: 12px;
  line-height: 24px;
}

.vision-core {
  padding: 260px 0 48px;
}

.vision-title {
  margin-bottom: 40px;
}

.vision-title h2 {
  font-style: italic;
  font-size: 36px;
  line-height: 48px;
}

.info-vision-core {
  overflow: auto;
}

.info-vision-core .item {
  position: relative;
}

.info-vision-core .item::before {
  content: '';
  border-right: 1px dashed var(--primary);
  height: 100%;
  position: absolute;
  right: 0;
}

.info-vision-core .item::after {
  content: '';
  border-bottom: 1px dashed var(--primary);
  width: 12%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.info-vision-core .item:last-child::after {
  width: 100%;
}

.vision-content {
  padding-right: 24px;
  padding-bottom: 24px;
  text-align: right;
}

.mission-box-content h3,
.vision-content h3,
.mission-content h3,
.core-content h3 {
  font-size: 60px;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: .16px;
  position: relative;
}

/*.vision-content h3::before {
  content: attr(data-content);
  position: absolute;
  right: 5px;
  top: 10px;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  font-weight: 900;
  font-size: 55px;
  letter-spacing: 2.32px;
}*/

.vision-content h6,
.mission-box-content h6,
.core-content h6 {
  color: transparent;
  -webkit-text-stroke: 1px var(--primary);
  font-size: 60px;
  text-transform: uppercase;
  position: absolute;
  left: -3px;
  top: 4px;
}

.vision-content h6 {
  left: unset;
  right: 3px;
}

.vision-content p {
  margin-bottom: 0;
}

.vision-content h4 ,
.vision-content .year {
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  font-family: 'SVN-Gilroy Bold';
  font-weight: 700;
  font-size: 32px;
  line-height: 44px;
  letter-spacing: .64px;
}

/*.mission-box-content h3::before ,
.mission-content h3::before {
  content: attr(data-content);
  position: absolute;
  left: 0;
  top: 5px;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  font-weight: 900;
  font-size: 55px;
  letter-spacing: .16px;
}*/

.vision-image {
  margin-bottom: 36px;
}

.mission-box-content h3::before {
  
}
.core-content h3:after ,
.mission-box-content h3:after  {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url('../img/icon/star.png') no-repeat center center;
  background-size: contain;
  position: absolute;
  left: -40px;
  top: 40%;
}

.core-content {
  margin-bottom: 30px;
  padding-left: 40px;
}

/*.core-content h3::before {
  content: attr(data-content);
  position: absolute;
  left: 0;
  top: 5px;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 2px var(--primary);
  font-weight: 900;
  font-size: 55px;
  letter-spacing: .16px;
}*/

.core-item {
  background: linear-gradient(white 0 0) padding-box, linear-gradient(157.71deg, #FC7310 21.75%, #FFC59A 37.15%, #FC7310 54.66%, #FFE5D2 70.06%, #FC7310 83.01%);
  text-align: center;
  padding: 39px 30px;
  border: 1px solid transparent;
  border-radius: 40px;
  height: 100%;
}

.core-item:hover {
  box-shadow: 0px 4px 15.3px 0px #00000040;
  background: var(--primary);
  color: white;
}

.core-item:hover img {
  filter: brightness(0) invert(1);
}

.core-item .icon {
  margin-bottom: 24px;
}

.core-item h6 {
  line-height: 24px;
  margin-bottom: 12px;
}

.core-item p {
  margin-bottom: 0;
}

.leadership {
  background: url('../img/bg-leader.jpg') center no-repeat;
  background-size: cover;
  padding: 68px 0 48px;
}

.leader-chief {
/*  width: 441px;*/
  text-align: center;
  padding-bottom: 40px;
}
.leader-body {
  width: 25%;
  margin: auto;
}
.leader-content {
  margin-top: 12px;
}

.leader-content p {
  font-size: 12px;
  line-height: 20px;
}

.leader-content p:nth-child(2) {
  color: #BB8157;
  margin-bottom: 12px;
}

.leader-content p:nth-child(3) {
  margin-bottom: 0;
}

.leader-chief img,
.leader-item img {
  position: relative;
  z-index: 1;
}

.leader-chief.middle {
  width: auto;
  padding-bottom: 40px;
}

.leader-team {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.leader-item {
  width: 251px;
}

.room {
  background: url('../img/bg-room.png') top no-repeat;
  background-size: cover;
}

.room-item {
  background: white;
  border-radius: 24px;
  padding: 35px 33px;
  height: 100%;
}

.room-item .icon {
  margin-bottom: 12px;
}

.room-item h6 {
  line-height: 24px;
}

.room-item ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

.room-item li {
  position: relative;
  font-size: 14px;
  line-height: 24px;
}

.room-item li::before {
  content: '';
  background: url('../img/vector.png') center no-repeat;
  background-size: cover;
  width: 25px;
  height: 29px;
  display: inline-block;
  margin-right: 8px;
}

.room-item p {
  margin-bottom: 0;
}

.team-item {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.team-item .thumb {
  height: 100%;
}

.team-item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-item .content {
  width: 100%;
  background: #FC7310BA;
  color: white;
  padding: 15px 0;
  position: absolute;
  bottom: -100%;
  left: 0;
  z-index: 1;
  transition: all 0.5s ease 0s;
  text-align: center;
}

.team-item:hover .content {
  bottom: 0;
}

.team-item h3 {
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}

.team-title {
  color: var(--dark);
  text-transform: capitalize;
  text-align: center;
}

.team-title h2 {
  font-size: 38px;
  line-height: 48px;
}

.team-title h2 span {
  color: var(--primary);
}

@media (min-width: 768px) {

  .timeline li {
    float: left;
    width: 25%;
    text-align: center;
    text-transform: uppercase;
    position: relative;
  }

  .timeline li::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary);
    display: block;
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
  }

  .timeline .marker {
    position: absolute;
    width: 100%;
  }

  .title-year {
    position: relative;
  }

  .timeline li:nth-child(odd) .marker {
    bottom: 0;
    margin-bottom: 70px;
  }

  .timeline li:nth-child(even) .marker {
    top: 0;
    margin-top: 10px;
  }

  .timeline li:nth-child(odd) .title-year {
    bottom: -10px;
  }

  .timeline li:nth-child(even) .title-year {
    bottom: 90px;
  }

  .info-vision-core .item:nth-child(2) {
    right: 67px;
  }

  .info-vision-core .item:nth-child(3) {
    right: 133px;
  }

  .info-vision-core .item:last-child {
    right: 198px;
  }
}

@media (min-width: 992px) {

  .infographic-item {
    flex: 0 0 250px;
    max-width: 250px;
  }

  .infographic-left .info-items:nth-child(1) {
    transform: translateX(50%);
  }

  .infographic-left .info-items:nth-child(2) {
    transform: translateX(45%);
  }

  .infographic-left .info-items:nth-child(3) {
    margin-top: 60px;
    transform: translateX(45%);
  }

  .infographic-right .info-items:nth-child(1) {
    transform: translateX(10%);
  }

  .infographic-right .info-items:nth-child(2) {
    transform: translateX(-10%);
  }

  .infographic-right .info-items:nth-child(3) {
    transform: translateX(-10%);
  }

  .mission-box-content {
    margin-left: -135px;
  }

  .leader-chief.middle::before {
    content: '';
    background: var(--primary);
    width: 1px;
    height: 51px;
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
  }

  .leader-chief.middle::after {
    content: '';
    background: var(--primary);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 130px;
    left: 0;
  }

  .leader-item::before {
    content: '';
    background: var(--primary);
    width: 1px;
    height: 100%;
    position: absolute;
    top: -282px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 1300px) {

  .infographic-item {
    flex: 0 0 320px;
    max-width: 320px;
  }

}

@media (min-width: 1400px) {

  .info-items .box-title span {
    font-size: 64px;
  }

  .box-title .arrow {
    top: 15px;
  }

  .infographic-right .info-items:nth-child(3) {
    margin-top: 60px;
  }

  .infographic-left .info-items:nth-child(1) {
    transform: translateX(50%);
  }

  .infographic-left .info-items:nth-child(2) {
    transform: translateX(45%);
  }

  .infographic-left .info-items:nth-child(3) {
    transform: translateX(60%);
  }

  .infographic-right .info-items:nth-child(1) {
    transform: translateX(10%);
  }

  .infographic-right .info-items:nth-child(2) {
    transform: translateX(-10%);
  }

  .infographic-right .info-items:nth-child(3) {
    transform: translateX(-10%);
  }

  .infographic-left .info-items:nth-child(1) .arrow {
    right: -60px;
  }

  .infographic-left .info-items:nth-child(3) .arrow {
    top: 30px;
    right: -50px;
  }

  .infographic-right .info-items:nth-child(2) .arrow {
    top: 10px;
    left: -110px;
  }

  .infographic-right .info-items:nth-child(3) .arrow {
    top: -10px;
    left: -180px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {

  .timeline li:nth-child(odd) .marker {
    margin-bottom: 90px;
  }

  .timeline li:nth-child(odd) .title-year {
    bottom: 0;
  }

  .timeline li:nth-child(even) .title-year {
    bottom: 100px;
  }

  .leader-item {
    width: 150px;
  }

  .founder-bottom {
    width: 50%;
  }
}

@media (max-width: 991px) {

  .letter-wrapper {
    padding-top: 180px;
  }

  .letter-founder {
    left: 50%;
    transform: translateX(-50%);
  }

  .leadership {
    padding-top: 48px;
  }
}

@media (max-width: 767px) {

  .infographic {
    flex-direction: column;
  }

  .infographic::before {
    display: none;
  }

  .circle-image {
    width: 100%;
    height: 100%;
    border-width: 20px;
  }

  .arrow {
    display: none;
  }

  .info-items {
    margin-top: 24px;
  }

  .info-items:first-child {
    margin-top: 0;
  }

  .timeline {
    border-top: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }

  .timeline li {
    max-width: 50%;
    flex: 0 0 50%;
    text-align: center;
  }

  .letter-wrapper {
    padding-top: 75px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .founder-bottom {
    width: 100%;
  }

  .leader-chief,
  .leader-item {
    width: auto;
  }

  .leader-item:not(:last-child) {
    margin-bottom: 24px;
  }

  .timeline li:nth-child(even) .marker img {
    transform: rotate(180deg);
  }
}

/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

@media (max-width: 767px) {
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
  }

  .header-area .main-nav .nav li:last-child {
    display: none;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 3px;
    padding-right: 3px;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
  }
}

.error-message, input+.error, select+.error {
    font-size: 13px;
    color: #f00;
    margin-top: 5px;
}

/*loading*/
#loading_box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.75);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100000;
   opacity:0; 
   visibility:hidden; 
}
#loading_box.show {
  opacity: 1;
  visibility: visible;
}

#loading_image {
  display: block;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  top: 50%;
  transform: translateY(-50%)
}

#loading_image:before {
  content: "";
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #f8c546;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  z-index: 1
}

#loading_image:before {
  border-top-color: #175cd3ab
}

#loading_image:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  background: var(--loading-bg);
  background-size: 55%;
  border-radius: 50%;
  margin: 0;
  background-color: #f8c5468c
}

#loading_image:after {
  background-color: rgba(188,188,188,0.4)
}

@-webkit-keyframes spin {
  0% {
      -webkit-transform: rotate(0deg)
  }

  100% {
      -webkit-transform: rotate(360deg)
  }
}

@keyframes spin {
  0% {
      transform: rotate(0deg)
  }

  100% {
      transform: rotate(360deg)
  }
}
/*loading*/


/*.skiptranslate,
#goog-gt-tt,
.goog-te-banner-frame.skiptranslate {
    display: none !important;
} 

.goog-logo-link {
    display:none !important;
}
.trans-section {
    margin: 100px;
}*/
body {
    top: 0px !important; 
}
.skiptranslate {
  display: none;
}
#google_translate_element {
  position: fixed;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
  z-index: -1;
}