@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');

:root{
    --primary:#b91e1f;
    --secondary:#000000;
    --trinity:#000000;
}

body{
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}

h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
    color: var(--trinity);
    font-weight: 900;
}

a{
    text-decoration: none;
}

.primary-bg{
    background-color: var(--primary);
}

.primary-color{
    color: var(--primary);
}

.secondary-bg{
    background-color: var(--secondary);
}

.secondary-color{
    color: var(--secondary);
}

.top-corner::before {
    content: '';
    position: absolute;
    left: -9px;
    top: 0px;
    width: 36%;
    height: 100%;
    background: var(--primary);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
    z-index: 0;
}

.top-corner p{
    position: relative;
    z-index: 1;
}

header{
    background: url(image/bg-header-pattern.jpg) no-repeat center center;
    background-size: cover;
}

.logo{
    width: 50%;
}

.menu{
    z-index: 2;
}

#carouselExampleCaptions{
    margin-top: -52px;
}

.menu-wrapper::before {
  content: '';
  position: absolute;
  left: 7%;
  right: 8%;
  top: 1px;
  width: 82%;
  height: 100%;
  background: var(--secondary);
  -webkit-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -o-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  transform: skewX(-25deg);
}

.navbar-nav li  .nav-link{
    position: relative;
    z-index: 2;
}

.navbar-nav .menu-class::before {
  background-color: var(--primary);
}

.navbar-nav .menu-class::before {
  content: '';
  position: absolute;
  left: -1%;
  top: -7px;
  width: 100%;
  height: 143%;
  background: var(--primary);
  -webkit-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -o-transform: skewX(-25deg);
  -moz-transform: skewX(-25deg);
  transform: skewX(-25deg);
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  z-index: -1;
}

.navbar-nav > li.active::before{
    background-color: var(--primary); 
}

.nav-link, .nav-link:hover, .nav-link:focus,.inquiry-btn:hover,.inquiry-btn:focus   {
    color: #fff;
}
.nav-link {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-transform: uppercase;
}

.nav-item {
    margin-right: 18px;
}

.inquiry-btn {
    background-color: var(--primary);
    color: #fff;
    height: 102%;
    text-align: center;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    top: 1px;
    z-index: 2;
    text-transform: uppercase;
}

.inquiry-btn::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 0px;
    width: 100%;
    height: 100%;
    background: var(--primary);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
    z-index: -1;
}

.icon-pit{
    width:120px;
}

.welcome-wrapper h5 {
    
    padding-bottom: 5px;
}

.welding-wrap{
    border:6px solid var(--primary);
    padding: 15px;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    color: var(--secondary);
}

.chupeppo{
    padding-left: 35px;
}

.chupeppo li{
    margin-bottom: 6px;
}

.chupeppo  li::before{
    font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00c";
    color: var(--primary);
}

.tex-saho{
    color: #666;
}

.mid-inner{
    z-index: 2;
}

.mid-bar-wrapper{
    background: url(image/bg2.jpg) no-repeat bottom center;
    
}

.mid-bar-wrapper::before {
    content: '';
    position: absolute;
    left: -4%;
    top: 0px;
    width: 53%;
    height: 100%;
    background: var(--secondary);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }

  .quote-btn{
    border: 1px solid #fff;
    padding: 2% 8%;
    color: #fff;
    margin-top: 15px;
    display: inline-block;
  }

  .services-wrapper{
    background: url(image/ser.jpg) no-repeat center center;
    background-attachment: fixed;
    background-size: cover;
  }

  .bg-light {
    background-color: rgba(255,255,255,0.6) !important;
  }

  .owl-nav {
    position: absolute;
    top: -15%;
    right: 0;
  }

  .owl-prev, .owl-next {
    background-color: var(--primary) !important;
    width: 40px;
    height: 40px;
    color: #fff !important;
    font-size: 38px !important;
    margin: 0 3px;
    line-height: 40px !important;
  }

  /* .wel-heading{
    width:40ch;
    overflow: hidden;
    animation: typing 2.5s steps(40);
    infinite alternate-reverse;
  }

  @keyframes typing{
    from{width: 0ch;}
    to{width:40ch}
  } */

  .blue-mosa{
    padding: 1% 4%;
    border: 1px solid #fff;
  }

  .form-side-bar {
    background-color:var(--secondary);
    padding: 15px;
  }

  .form-label {
    margin-bottom: .1rem;
     color: #fff;
  }

  .how-we-work-wrapper{
    background: url(image/welder-at-work.jpg) top center no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  .how-we-work-inner {
    position: absolute;
    inset: 30px;
    border:1px solid #fff;
    padding: 20px;
  }

  .sumo {
    width: 140px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    font-weight: 900;
  }

  .white-seto{
    background-color: #fff;
  }

  .read-btn {
    
    padding: 6px 36px;
    display: inline-block;
    transition: 0.5s;
  }


  .testimonials-wrapper{
    background: url(image/man-welding-1.jpg) bottom center no-repeat;
    background-attachment: fixed;
    background-size: cover;
  }

  .test-side{
    background-color: #fff;
  }

  .fa-star{
    color:#ffbe3d;
  }
  footer li{
    margin-bottom: 5px;
  }

  .tips{
    padding: 4%;
  }

  footer{
    background: url(image/bg-5.jpg) no-repeat bottom center;
    background-size: cover;
  }

  .copyright{
    background-color: var(--primary);
  }

  .form-side-bar {
    background-color: var(--primary);
    padding: 15px;
  }

  .mid-bar-wrapper::before {
    content: '';
    position: absolute;
    left: -4%;
    top: 0px;
    width: 53%;
    height: 100%;
    background: var(--primary);
    -webkit-transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -o-transform: skewX(-25deg);
    -moz-transform: skewX(-25deg);
    transform: skewX(-25deg);
  }

  .wel-img{
    object-fit: cover;
  }


.bg-grey{
    background:#d1d1d1;
}

.gallery-img{
    width:100%;
    height:300px;
    object-fit:cover;
}

.gallery-image-cut{
    width:100%;
    height:450px;
    object-fit:cover;
}

.award-win-img{
    height:350px;
    object-fit:cover;
}

.menu-mobile{
    display:none !important;
}

.object-cover{
    object-fit:cover;
}

.services-point {
  margin-left: 25px;
}

.services-point li::before{
    font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f00c";
  color: var(--primary);
}

.project-item{
    position:relative;
}

.project-item::before{
    position:absolute;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f00e";
    color: #fff;
    /*color: var(--primary);*/
    top:5px;
    right:10px;
    font-size:35px;
}

.about-wrapper {
  background: url(image/bg-9.jpg) center center no-repeat;
    background-size: auto;
  background-size: cover;
  margin-top: -51px;
}

.about-wrapper-inner {
  background-color: rgba(0,0,0,0.5);
  padding: 8% 0;
}

.solo {
  border: 1px solid #fff;
  display: inline-block;
  color: #fff;
  text-align: center;
}

.call-us-now {
  bottom: 0;
  right: 0;
  background-color: var(--primary);
  padding: 3% 15%;
  gap: 5px;
}

.professional {
  border-left: 4px solid var(--primary);
  background-color: #f3f3f3;
  padding: 3%;
}

.after-banner-wrapper {
  background-color: #f3f3f3;
}


.why-choose-wrap{
  background-color: rgba(255,255,255,0.6);
  border: 1px solid var(--primary);
}

  @media(max-width:992px){
    .menu-wrapper::before {
        content: '';
        position: absolute;
        left: 8%;
        right: 8%;
        top: 1px;
        width: 79%;
        height: 100%;
        background: var(--secondary);
        -webkit-transform: skewX(0);
        -ms-transform: skewX(0);
        -o-transform: skewX(0);
        -moz-transform: skewX(0);
        transform: skewX(0);
      }
      .inquiry-btn::before {
        content: '';
        position: absolute;
        left: 13px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: var(--primary);
        -webkit-transform: skewX(0);
        -ms-transform: skewX(0);
        -o-transform: skewX(0);
        -moz-transform: skewX(0);
        transform: skewX(0);
        z-index: -1;
      }
  }

  @media(max-width:768px){
    .hide-me{
        display: none;
    }
    
    .navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0;
  }

  header {
    background: url(image/bg-header-pattern.jpg) no-repeat center center;
      background-size: auto;
    background-size: cover;
    height: 158px;
  }
    
    .menu-mobile{
        display:block !important;
    }
    
    .navbar.navbar-expand-lg.menu-mobile {
      height: 55px;
    }
    
    .mobile-menu-icon{
        width:100%;
    }
    
    .navbar-toggler {
      height: 60px;
      margin-top: -20px;
    }

    .ppe-kit{
        justify-content: center !important;
    }
    
    .gallery-img{
    width:100%;
    height:150px;
    object-fit:cover;
}

.gallery-image-cut{
    width:100%;
    height:auto;
    object-fit:cover;
}

    .menu{
        background-color: #282828;
    }
    #carouselExampleCaptions {
        margin-top: 0;
    }

    .menu-wrapper::before {
        background: none;
    }

    .navbar-nav > li.active::before {
        background-color: transparent;
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
        border: 1px solid #fff;
    }

    .logo {
        width: 50%;
        margin: 0 ;
        float:left;
    }
    

.inquiry-btn {

    background-color: var(--primary);
    color: #fff;
    height: 99%;
    text-align: center;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    top: 0px;
    z-index: 2;
    text-transform: uppercase;
    padding-left: 8%;

}

.owl-nav {
    position: absolute;
    top: 3%;
    right: 3%;
  }

.cakosaki{
width:100% !important
}
#navbarNav {
  position: absolute;
  width: 399px;
  left: -409%;
  background: #000;
  z-index: 9;
  right: 5%;
  top: 78px;
  text-align: center;
}

}

@media(max-width:414px){
    .work-image {
        height: 860px;
        object-fit: cover;
    }

    .testimonials-wrapper .owl-nav {
        position: absolute;
        top: -12%;
        right: 3%;
    }
}    

@media(max-width:413px){
    .work-image {
        height: 1005px;
        object-fit: cover;
    }
}

@media(max-width:320px){
    .work-image {
        height: 1005px;
        object-fit: cover;
    }
    
    #navbarNav {
        position: absolute;
    width: 318px;
    left: -450%;
    background: #000;
    z-index: 9;
    right: 5%;
    top: 68px;
    text-align: center;
    }
}