body{font-family:Roboto,Sans-serif;font-weight:400;color:#6b6b6b}
h1,h2,h3,h4,h5{color:#000;font-family:Roboto,Sans-serif;font-weight:600}
p{line-height:25px}
a{color:#e6111b;transition:.6s;text-decoration: none;}
.red-text{color:#e7111b}
.wt-4{font-weight:400}
.wt-5{font-weight:500}
.wt-6{font-weight:600}
.wt-7{font-weight:700}
.ch2{font-size:41px}
.ch3{font-size:20px}
.csmBtn{background-color:#f1eb25;font-size:16px;font-weight:500;color:#000;border-radius:6px;padding:13px 20px 13px 20px;display:inline-block;transition:.6s;text-decoration:none;transition: transform .4s ease, opacity .4s ease;}
.csmBtn:hover {transform: scale(1.03);}
.csmBtn .rgtArw{width:20px;height:24px;margin-left:3px;background-image:url(../images/right-arrow.webp);display:block;background-size:15px;background-repeat:no-repeat;background-position:center right}
.csmBtn:hover{background-color:#fff80d;color:#000;border-color:#fff80d;transition: 0.6s;}
.testimonialWrp .swiper-button-next:after, .HservicesSec .swiper-button-next:after, .testimonialWrp .swiper-rtl .swiper-button-prev:after, .HservicesSec .swiper-rtl .swiper-button-prev:after {
    display: none;
}
.testimonialWrp .swiper-button-prev:after, .HservicesSec .swiper-button-prev:after, .testimonialWrp .swiper-rtl .swiper-button-next:after, .HservicesSec .swiper-rtl .swiper-button-next:after {  content: 'prev';
    display: none;
}
.mainSlider .swiper-pagination {
    display: block !important;
}
img {
    max-width: 100%;
}

/** ===============
Hero slider css 
=============== **/
.mainHeroContent .title{font-family:Roboto,Sans-serif;font-size:60px;font-weight:600;color:#000;line-height:65px;margin-bottom:20px}
.mainHeroContent .descp{font-family:Roboto,Sans-serif;font-size:30px;font-weight:400;color:#000;margin:10px 0 24px}
.mainHeroBox .expBtn a{background-color:#e7111b;font-family:Roboto,Sans-serif;font-weight:500;border-radius:6px;color:#fff;border-color:#e7111b;display:inline-block;padding:10px 15px 10px;font-size:14px}
.mainHeroBox .expBtn a:focus,.mainHeroBox .expBtn a:hover{background-color:#ec323b}
.mainHeroBox{position:relative}
.mainHeroBox .expBtn{margin:15px 0 0}
.mainHeroBox .imgbx img,.mainHeroBox .imgbx video{height:100vh;width:100%;object-fit:cover;object-position:center}
.mainHeroBox:after{position:absolute;content:"";width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,.5)}
.swiper-slide.swiper-slide-active .delay-1,.swiper-slide.swiper-slide-active .delay-2,.swiper-slide.swiper-slide-active .delay-3{animation-duration:1s;animation-fill-mode:both;animation-name:fadeInUp}
.delay-1{animation-delay:.2s}
.delay-2{animation-delay:.4s}
.delay-3{animation-delay:.6s}
.delay-4{animation-delay:.8s}
@keyframes fadeInUp{
0%{opacity:0;transform:translate3d(0,100%,0)}
to{opacity:1;transform:translateZ(0)}
}
.fadeInUp{animation-name:fadeInUp}
.hrBnr_in{width:80%}
.mainSlider .swiper-pagination{bottom:20px!important}
.mainSlider .swiper-pagination-bullet{background-color:#fff}
.mainSlider .video-wrapper{position:relative}
.mainSlider button.playBtn{display:none}

/** ================
Hero slider css Ends 
================ **/

/**==============
About section css
==============**/
section.hAboutSecWrp{margin-top:-7px}
.hAboutSecWrp h1{font-size:2.5rem;line-height:2.6rem}
.hAboutSecWrp ul{padding:0;margin:0;list-style:none}
.hAboutSecWrp ul li{position:relative;padding-left:35px;margin:12px 0}
.hAboutSecWrp ul li:before{position:absolute;content:"";width:30px;height:30px;left:0;top:0;background-image:url(../images/tick-r.webp);background-repeat:no-repeat;background-size:20px;background-position:center left}

/**==============
Industries section css
==============**/
.tagHead{text-transform:uppercase;font-size:16px}
.HindustList{box-shadow:0 0 15px #53535338;border-radius:6px;overflow:hidden;margin-bottom:-110px}
.HiIcon img{width:55px}
.IndustBx{padding:30px;border-right:1px solid #e9e7e7;display:flex;flex-direction:column;justify-content:space-between;width:25%}
.readBtn .Rarw{width:20px;height:24px;margin-left:3px;background-image:url('../images/rArw.webp');display:block;background-size:15px;background-repeat:no-repeat;background-position:center right}
.readBtn a{color:#000}
.readBtn a:hover {color: #e6101c;}
.readBtn a:hover .Rarw {filter: invert(8%) sepia(100%) saturate(7305%) hue-rotate(355deg) brightness(106%) contrast(89%);}
.readBtn .Rarw {transition: .6s;}

/**==============
Services section css
==============**/
.servBox .img img{width:100%;aspect-ratio:2/1.4;object-fit:cover}
.servicesSlider{padding:0 50px 0;position:relative}
.lrtbc .swiper-button-prev{left:-5px!important}
.lrtbc .swiper-button-next{right:-5px!important}
.swiper-button-next svg path,.swiper-button-prev svg path{fill:#E7111B}
.sevDescp p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;display:box;line-clamp:2;box-orient:vertical}
.lrtbc .swiper-navigation-icon{width:18px}

/**==============
Portfolio section css
==============**/
.portFLst{display:flex;flex-wrap:wrap}
.pfbx_load_box{padding:15px;width:33.33%}
.pfbx_load_box a{display:block;position:relative;border-radius:10px;overflow:hidden}
.pfbx_load_box .img img{width:100%;aspect-ratio:2/2;-webkit-transition:all .4s ease;transition:all .4s ease;object-fit: cover;}
.pfbx_load_box:hover .img img{-webkit-transform:scale(1.1);transform:scale(1.1)}
.pfbx_load_box a:before{position:absolute;left:0;top:0;height:100%;width:100%;content:"";background:#000;opacity:.3;z-index:11}
.pfbx_load_box .pfDsp{position:absolute;z-index:11;bottom:0;padding:0 25px 25px}
.pfbx_load_box .expMoreBtn.csmBtn{background-color:#e6111b;font-size:13px;font-weight:400;color:#fff;border-radius:5px;padding:7px 10px 7px 10px;transition:.6s}
.pfbx_load_box .csmBtn .rgtArw{width:13px;height:19px;background-size:11px;filter:invert(100%) sepia(3%) saturate(13%) hue-rotate(81deg) brightness(106%) contrast(106%);transition:.6s}
.pfbx_load_box .ch3{font-size:21px;line-height:27px;font-weight:500}
.pfbx_load_box{display:none}
.pfbx_load_more .csmBtn{cursor:pointer}
.pfbx_load_more .csmBtn .rgtArw{width:15px;background-size:13px;transform:rotate(90deg);margin-left:4px;transition:.6s}
.pfbx_load_box:hover .expMoreBtn.csmBtn{background-color:#f1eb25;color:#000;transition:.6s}
.pfbx_load_box:hover .csmBtn .rgtArw{filter:none;transition:.6s}

/**==============
Why choose us section css
==============**/
.bgimg{width:100%;height:100%}
.bgimg img{width:100%;height:100%;object-fit:cover;object-position:center}
.bgimg:before{position:absolute;content:"";width:100%;height:100%;top:0;left:0;background:#000;opacity:.8}
.wycBxImg img{height:50px;object-fit:contain}
.wycBx:nth-child(3n) img{height:65px}
.wTtile{font-size:20px;font-weight:600;font-family:Roboto,Sans-serif}
.wcsList{display:flex;flex-direction:column;row-gap:10px}

/**==============
Testimonial section css
==============**/
.revBox {
    text-align: center;
    padding: 65px 40px 30px;
    background-color: #fff;
    box-shadow: 0 0 20px #1616160f;
    border-radius: 6px;
}
.testimonialSlider .swiper.mySwiper {
    padding: 13px 10px 14px;
}
.testimonialSlider .img img{width:70px;height:70px;object-fit:cover;object-position:center}
.rTitle {
    font-weight: 600;
    color: #000;
    margin: 0 0 3px;
}
.revBox .img {
    position: relative;
}
.revBox .img:before {
    position: absolute;
    content: "";
    width: 34px;
    height: 30px;
    left: 60%;
    top: -30px;
    background-image: url(../images/comma-icon.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0.7;
}
.lrtbc {position: relative;}
.testimonialSlider.lrtbc .swiper-button-prev {
    left: auto !important;
    bottom: -70px;
    top: auto;
    width: 50px !important;
    height: 50px !important;
    background: #f1f1f1;
    border-radius: 100px;
    transition: .6s;
    right: 75px;
}
.testimonialSlider.lrtbc .swiper-button-next {
    right: 5px !important;
    bottom: -70px;
    top: auto;
    width: 50px !important;
    height: 50px !important;
    background: #f1f1f1;
    border-radius: 100px;
    transition: .6s;
}
.testimonialSlider.lrtbc .swiper-button-prev:hover, .testimonialSlider.lrtbc .swiper-button-next:hover {
    background: #e6101b;
}
.testimonialSlider.lrtbc .swiper-button-next svg path, .testimonialSlider.lrtbc .swiper-button-prev svg path {
    fill: #585051;
}
.testimonialSlider.lrtbc .swiper-button-next:hover svg path, .testimonialSlider.lrtbc .swiper-button-prev:hover svg path {
    fill: #FFF;
}
.testimonialSlider.lrtbc .btns svg {
    width: 11px;
}
.testimonialSlider.lrtbc {
    margin: 0 0 70px;
}
.testimonialSlider.lrtbc .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
}
.testimonialSlider.lrtbc .swiper-pagination {
    position: absolute;
    left: 0;
    width: auto;
    bottom: -50px !important;
    top: auto;
}
.testimonialSlider .swiper-wrapper {
  align-items: stretch;
}
.testimonialSlider .swiper-slide {
  height: auto;
  display: flex;
}
.testimonialSlider .swiper-slide > * {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.logoSlider .swiper-slide {text-align: center;}

/**==============
Blog section css
==============**/
.blogBx {
    width: 33.33%;
    padding: 15px;
}
section.hBlogWrp {
    background: #282828;
}
.blogsList {
    margin: 0 -15px 0;
}
.bTitle a {
  font-family: "Roboto", sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  text-overflow: ellipsis;
}
.blogDesp p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.explBtn .csmBtn {
    background: transparent;
    border: 1px solid #A5A5A5;
    font-weight: 400;
    width: 170px;
    justify-content: center;
}
.explBtn .csmBtn:hover {
    background: #e6111b;
    border: 1px solid #e6111b;
    color: #FFF;
}
.explBtn .csmBtn .rgtArw {
    transition: 0.6s;
}
.explBtn .csmBtn:hover .rgtArw {
    filter: invert(100%) sepia(0%) saturate(7474%) hue-rotate(1deg) brightness(109%) contrast(107%);
    transition: 0.6s;
}

.blogImg img {
    width: 100%;
    aspect-ratio: 2 / 1.5;
    object-fit: cover;
    object-position: center;
    transition: 0.6s;
    height: auto;
    max-width: 100%;
}
.blogBxIn:hover .blogImg img {
    transform: scale(1.03);
}
.blogDesp .explBtn {
    margin-top: 20px;
}
.blogBxIn {
    position: relative;
}
.blogBxIn .bDate {
    position: absolute;
    color: #000000;
    font-family: "Roboto", Sans-serif;
    font-weight: 400;
    background-color: #F1EB25;
    padding: 8px 20px 8px;
    right: 0;
    z-index: 333;
}

.mySwiper{padding-bottom:40px}
.swiper-slide .swiper-image-wrapper{overflow:hidden;border-radius:8px}
.swiper-slide .swiper-image-wrapper img{width:100%;height:100%;object-fit:cover;display:block}
.swiper-pagination{bottom:0!important;text-align:center}
.swiper-pagination-bullet{width:20px;height:6px;background-color:#090909;border-radius:0!important;margin:0 4px;transition:background-color .5s}
.swiper-pagination-bullet-active{background-color:red!important}

@media screen and (min-width:1300px) and (max-width:1680px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1280px;
    }
}

@media screen and (min-width:1024px) and (max-width:1280px){
.IndustBx p {
    font-size: 14px;
    line-height: 22px;
}
.IndustBx .ch3 {
    font-size: 17px;
}
.ch2 {
    font-size: 35px;
}
.readBtn a {
    font-size: 14px;
}
}

@media screen and (min-width:768px) and (max-width:1023px){
.mainHeroContent .title{font-size:40px;line-height:49px}
.mainHeroContent .descp{font-size:22px}
.mainHeroBox .imgbx img,.mainHeroBox .imgbx video{object-position:center right}
.IndustBx {
    width: 50%;
    border-bottom: 1px solid #e9e7e7;
}
.HindustList {
    margin-bottom: -120px;
}
.ch2 {
    font-size: 34px;
}
.sevDescp .ch3 {
    font-size: 18px;
}
.pfbx_load_box {
    padding: 10px;
    width: 50%;
}
.portFLst {
    margin: 0 -10px 0;
}
.blogBx {
    padding: 8px;
}
.bTitle a {
    font-size: 18px;
}
.blogDesp p {
    font-size: 14px;
    line-height: 20px;
}
.explBtn .csmBtn {
    width: auto;
    padding: 9px 15px 7px 15px;
    font-size: 14px;
}
.explBtn .csmBtn .rgtArw {
    width: 14px;
    height: 22px;
    background-size: 11px;
}
}

@media screen and (max-width:767px){
.swiper.mainSlider{padding-top:100px}
.mainSlider:after{position:absolute;content:"";width:100%;height:100px;top:0;left:0;background:#000}
.mainHeroContent .title{font-size:27px;line-height:30px}
.mainHeroContent .descp{font-size:16px;line-height:20px;margin:15px 0 22px}
.hrBnr_in{width:100%;padding:20px 5px 50px}
.video-desktop{display:none}
.mainHeroBox .imgbx img,.mainHeroBox .imgbx video{height:210px}
.mainHeroBox:after{display:none}
.mainSlider .swiper-pagination-bullet{background-color:#000}
.mainSlider button.playBtn.active{background-image:url(https://metrocomsecurity.com/wp-content/uploads/2025/11/pause.webp);transition:.6s}
.mainSlider button.playBtn{background-image:url(https://metrocomsecurity.com/wp-content/uploads/2025/11/play-button.webp);width:40px;height:40px;background-color:transparent;border:0;text-indent:-999px;overflow:hidden;background-size:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:block}
	
.hAboutSecWrp h1{font-size:22px;line-height:28px}
.ch2{font-size:22px;line-height:28px}
.HindustList{margin-bottom:-80px}
.IndustBx{padding:25px;width:100%;border-right:0;border-bottom:1px solid #e9e7e7}
.servicesSlider{padding:0}
.servicesSlider .swiper-navigation-icon{width:12px}
.wycBxImg{width:75px}
.wycBxdes p{font-size:14px;line-height:21px}
.wTtile{font-size:18px}
.wycBxImg img{height:40px}
.wycBx:last-child img{height:33px}
.testimonialSlider.lrtbc .swiper-pagination {
    display: none;
}
.testimonialSlider.lrtbc .swiper-button-next {
    right: 33% !important;
    bottom: -60px;
}
.testimonialSlider.lrtbc .swiper-button-prev {
    left: 33% !important;
    bottom: -60px;
    right: auto;
}
.pfbx_load_box {
    padding: 5px;
    width: 100%;
    margin: 3px 0;
}
.revBox {
    padding: 65px 20px 30px;
}
.revDescp p {
    font-size: 15px;
}
.blogBx {
    width: 100%;
}
.bTitle a {
    font-size: 20px;
}
.blogDesp p {
    font-size: 14px;
    line-height: 20px;
}
.logoSlider .cLogo img {
    height: 88px;
    object-fit: contain;
}
}

@media screen and (min-width:992px) and (max-width:1024px){
.mainHeroContent .title{font-size:43px;line-height:45px}
.mainHeroContent .descp{font-size:22px}
}

@media screen and (min-width: 768px) {
.logoSlider .cLogo img {
    height: 88px;
    object-fit: contain;
}
.video-mobile{display:none}
.mainHeroContent{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%);width:100%;z-index:333}
.mainHeroContent .title{color:#fff}
.mainHeroContent .descp{color:#fff}
.mainSlider span.swiper-pagination-bullet{width:30px;height:4px}
}
@media screen and (min-width:1300px){
.hAboutSecWrp .col-lg-7{width:53.333333%}
.hAboutSecWrp .col-lg-5{width:46.666667%}
.mainSlider.mySwiper .swiper-pagination{bottom: 40px!important;}
}

@media screen and (min-width:1680px){
.mainHeroContent .title{font-size:60px;line-height:65px}
.mainHeroContent .descp{font-size:30px}
}