/* HEADER */
header{
    padding: 20px 0;
    position: absolute;
    top: 42px; /* sits just below the .topBanner instead of overlapping it */
    left: 0;
    width: 100%;
    z-index: 22;
}

.main-navigation ul{
    display: flex;
    align-items: center;
    gap: 38px;
}


.main-navigation li{
    position: relative;

}
.main-navigation li a{

    position: relative;
    z-index: 2;
}

.main-navigation li::after{

    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    background-color: var(--primary-color);
    width: 100%;
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.main-navigation li:hover::after{
    opacity: 1;
    visibility: visible;
    height: 8px;
}
.mobtogg{
    display: none;
}
.main-navigation .current-menu-item::after{
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    background-color: var(--primary-color);
    width: 100%;
    height: 8px;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s;
}
/* HERO */
.stHeroVid video{
	width:100%;
	height:100vh;
	object-fit:cover;
	line-height:0;
}
.msrw{

    display: flex;
}

.stHeroVid{
	
	line-height:0;
	width:100%;
	position:relative;
}

.stHeroVid::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
  background:#00000040;
	width:100%;
	height:100%;
}


.stHero{
background: #100f0f;
position: relative;
	padding-top:0;


}

.stHero::after{
	content:"";
	    content: "";
    display: block;
    position: absolute;
    bottom: 0;
background: rgb(240,240,240);
background: linear-gradient(178deg, rgb(240 240 240 / 0%) 15%, rgba(252, 0, 0, 1) 160%);
	width:100%;
	height:400px;
	

}

.heroCont{
	position:absolute;
	bottom:60px;
	z-index:22;
	width:50%
}

/* .stHero::before{
    content: "";
    display: block;
    position: absolute;
    top: 0;
  background:#000;
	width:100%;
	height:100%;
}

.stHero::after{
    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/hrobord.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -15px;
} */

.heroImg{
    position: absolute;
    right: 0;
    top: 160px;

}

.heroImg img{
    width: 100%;
}

.heroImg{
    width: 800px;
}
.heroCont h1{
    font-size: 76px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-top: 0;
}

.hrBtn a{
    display: block;
    padding: 12px 26px;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    width: fit-content;
    margin-top: 34px;
}
.heroCont p{
    padding-right: 9em;
}


/* ABOUT */

.stAbout{

    position: relative;
    padding-top: 8em;
    padding-bottom: 12em;
    
}

.tyreGrp{
    position: absolute;
    top: -60px;
    left: 0;
	width:400px
}

.stAbout::before{

    content: "";
    display: block;
    position: absolute;
    top:50px;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/abtbg.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
}

.stAbout::after{

    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/abtbrd.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -15px;
    z-index: 2;
}

.abtImgBlk{
    position: absolute;
    left: 0;
	top:140px
}
.abtImgBlk{
	width:900px
}
.Abtrght{
    margin-left: auto;
    width: 60%;
}

.abtCont h2{
    font-size: 54px;
    line-height: 1.2;
    margin-bottom: 14px;
	font-weight:700
}

.abtleft{

    width: 40%;
}
.abtCont{
    padding-top: 3em;
    position: relative;
    z-index: 2;
}

.abtCont{
    margin-left: 100px;
}

.abtCont p{
    font-size: 18px;
    line-height: 1.7;
}


.primeBtn a{

    display: block;
    width: fit-content;
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 26px;
    margin-top: 34px;
}

/* SERVICE */

.StService{

    background-color: #100f0f;
    position: relative;
    overflow: hidden;
    padding-top: 12em;
    padding-bottom: 11em;

}

.StService::before{

    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/hrobord.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -15px;
}

.title h2{
    font-size: 52px;
    margin-bottom: 48px;
}

.lftcont {
    width: 50%;
}

.rghtCont{

    position: absolute;
    top: 200px;
    right: 0px;
    z-index: 2;
}

.servImgBlk {
	
	width:850px;
}

.servCont h3{
    font-family: var(--text-font);
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 24px;
}
.servBlk{
    margin-bottom: 24px;
}
.servIco{
    margin-bottom: 6px;
}

.tyrgrp{

    position: absolute;
    top: 180px;
    left: 0;
}

.tpGrad{
    position: absolute;
    top: 120px;
    left: 0;
}
.rdgrd{

    background-color: var(--primary-color);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    filter: blur(180px);
}

.rgtGrd{

    position: absolute;
    bottom: 200px;
    right: 0;
}

/* PRODUCT */

.stProduct{
    position: relative;
    padding-top:6.2em;
    padding-bottom: 6.2em;
}

.stProduct::before{

    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/abtbrd.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    z-index: 2;
    transform: rotate(180deg);
}

.titleflx{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.titleflx h2{
    margin-bottom: 0;
}

.prdDet h3{

    font-family: var(--text-font);
    font-weight: 500;
}
.prdDet{
	
	position:absolute;
	bottom:10px;
	left:0;
	z-index:1;
	padding:8px
}
.prdBlk{

    margin-bottom: 28px;
	border-radius:6px;
	position:relative;
	overflow:hidden;
	
}

.prdBlk::after{
	
	content:"";
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	background: linear-gradient(180deg, rgba(240,240,240,0.07326680672268904) 60%, rgba(252,0,0,1) 108%)
}
.prdImgBlk{

	border-radius:8px;

}

.prdImg{
    position: relative;
border-radius:6px

}

/* .prdImg::after{

    content: "";
    display: block;
    padding-top: 180px;
}

.prdImg img{

    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
} */

.prdImg img{

 
    object-fit: cover;
    margin: auto;
    text-align: center;
    transition: all 0.3s;
}

.prdImgBlk{
 
}

.prdImgBlk{
   
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
.prdBlk:hover .prdImg img{
    transform: scale(1.08);
}

.stProduct .row{
    margin-top: 46px;
}

.stProduct{
    padding-bottom: 3.2em;
}

.productImg img{
	width:100%
	
}

.productDetail h1{
	margin-top:0;
	margin:6px
}


/* FOOTER */

.site-footer{
    background-image: url(../images/footerbg.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 6.2em;
    position: relative;
}

.site-footer::after{

    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/abtbrd.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -15px;
    z-index: 2;
}

.ftrLogo img{
    width: 90px;
    margin-bottom: 14px;
}

.site-footer p{
    font-size: 15px;
}

.ftrLink h4{
    padding-top: 3em;
    font-size: 18px;
    font-family: var(--text-font);
    font-weight: 700;
    margin-bottom: 30px;
}

.ftrLink li{
    margin-bottom: 12px;
}

.ftrLink a,
.ftrLink p{
    font-size: 15px;
}
.ftrLink a{
	display:block;
	margin-bottom:4px
}
.ftrContact li{
    position: relative;
    padding-left: 24px;
}
.ftrContact li i{
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}

.fPL{
    padding-left: 8px;
}

.copyright p{
    margin-bottom: 0;
    padding-bottom: 12px;
    font-size: 12px;
    text-align: center;
}

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

.copyright {
    margin-top: 6.2em;
    padding-top: 26px;
    border-top: 1px solid #99999931;
}

/* PAGE */
.pageheader{
    position: relative;
    text-align: center;
}
.pageheader h1{
    margin-top: 0;
    font-size: 60px;
    padding-top: 3.8em;
    position: relative;
    z-index: 2;
}

.pageheader .tpGrad{
    left: 50%;
    transform: translate(-50%);
    top: 190px;
 
}

.pageheader .tyrgrp{
    left: 50%;
    transform: translate(-50%);
}
.pageheader .rdgrd{

    width: 160px;
    height: 160px;
}

/* ABOUT PAGE */
.abtIn{
    padding-top: 0;
    padding-bottom: 8.2em;
}

.abtImginBlk{
    position: relative;
}

.abtinCont{
    position: absolute;
    background-color: var(--primary-color);
    bottom: -100px;
    right: 0;
    max-width: 720px;
    padding: 24px;
}

.abtinCont p{
    font-size: 18px;
}

.stVM .title h2{
    text-align: center;
}

.stVM{
    position: relative;
}



.vmBlk{

    padding: 28px;
    background-color: #1f1f1f;
    border: 3px solid;
    transition: all 0.3s;
    margin-bottom: 24px;
}

.vmCont h3{
    font-weight: 600;
    font-family: var(--text-font);
    font-size: 24px;
    margin-bottom: 6px;
}

.vmCont p{
    font-size: 15px;
    line-height: 1.5;
}

.border-gradient-purple {
	border-image: linear-gradient(180deg, var(--primary-color), rgb(20, 20, 20)) 1; 
  }
  
.stVM{
    padding-bottom: 3.2em;
}
.vmIco path{

    fill: #fff;
}
.vmBlk:hover {
	border-image: linear-gradient(240deg, var(--primary-color), rgb(20, 20, 20)) 1; 
  }
.vmBlk:hover .vmIco path{
    fill: var(--primary-color);
}

.stCTA{

    position: relative;
    background-image: url(../images/cta.jpg);
    background-position: center;
    background-size: cover;
    height: 580px;
    padding: 100px 0;
    display: flex;
    align-items: center;
}

.stCTA::before{
    
    content: "";
    display: block;
    width: 100%;
    height: 80px;
    background-image: url(../images/abtbrd.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    z-index: 2;
    transform: rotate(360deg);
}

.stCTA::after{

    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(240,240,240);
    background: linear-gradient(270deg, rgba(240, 240, 240, 0.07326680672268904) 0%, rgba(28, 28, 28, 1) 80%)
}

.stCTACont{

    position: relative;
    z-index: 2;
}

.stCTACont h2{
    font-size: 48px;
}
.prdSec{

    margin-top: 80px;
    margin-bottom: 80px
  }
  
  .prdImg{
    margin-bottom: 0;
	 line-height:0
  }
  
  .prdDet h3{
    font-size: 18px;
  }
  
  .tab {
    overflow: hidden;
    border: 1px solid #ebebeb;
    background-color: #fc0000;
    border-radius: 2px;
    color: #fff;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    color: #fff;
    font-family: "Inter", sans-serif;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ffffff;
    color: #000;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ffffff;
    color: #000;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  }
  
  .prdAccord{
    margin-top: 40px;
  }
  
  .tabcontent{
    padding-top: 20px;
  }
  
  .tabcontent h3{
    font-size: 22px;
  }
  
  .service-item-content .service-item_icon{
    display: none;
  }
  
  .service-item .style2{
    padding: 30px !important;
  }
  
  .prdBlk{
    margin-bottom: 32px;
  }
  
  .prdBlk:hover .prdImg img{
  
    transform: scale(1.04);
  }
  
  .prdImg{
    overflow: hidden;
  }
  .prdImg img{
    transition: all 0.3s;
  }
.rdSecpg{
    padding-top: 0;
}
  /* .productImgBlk{

    background-color: #1f1f1f;
    padding: 40px;
  }

  .productImgBlk .productImg img{

    margin: auto;
  } */


  /* CONTACT PAGE */
  .stContact{
    padding-bottom: 6.2em;
  }

  .ctIco{

    width: 62px;
    height: 62px;
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1f1f1f;
    border-radius: 50%;
    border: 1.2px solid #fc000042;
  }

  .ctIco i{
    color: var(--primary-color);
    font-size: 20px;
  }
  .ctBlk{
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 26px;
  }

  .ctBlk p{
    margin-bottom: 0;
  }

  .ctBlk p,
  .ctBlk a{

    font-size: 18px;
  }
  .ctBlk h4{
    font-family: var(--text-font);
    font-weight: 600;
    font-size: 14px;
    color: #ffc7c7;
  }

  .abtftr::after{
    display: none;
  }

  /* SERVICE PAGE */
  .servInBlk{
    padding: 25px;
    background-color: #1f1f1f;
    min-height: 150px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid var(--primary-color);
    position: relative;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
    overflow: hidden;
    margin-bottom: 24px;
  }
  .servInBlk:hover::after{

opacity: 1;
visibility: visible;
transform: translateX(0);
  }
  .servInBlk:hover .servCont h3{
    color: #fff;
  } 
  .servInBlk::after{
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    position: absolute;
    background-color: var(--primary-color);
    color: #fff;
    opacity: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1);
  }
  .servInBlk:hover{
    border-bottom: 2px solid #fff;
  }
  .servCont h3{
    font-weight: 500;
    position: relative;
    z-index: 2;
  }

  .servIn{
    padding-top: 0;
  }

/* CERTIFICATION */

.certSec{
	
	padding-bottom:3em;
}

.certfiBlk h3{
	font-size:24px;
	margin-bottom:10px;
	border-bottom:2px solid red;
	display:block;
	width:fit-content;
}
.certfiBlk li{
	font-family:var(--text-font);
	color: #fff;
	font-size:18px;
	margin-bottom:12px
}
.certImg{
	
	margin:16px 0
}


.certfiBlk li a{
	
	color: var(--primary-color);
}


.certcustImg img{
	width:100%
}