@charset "utf-8";
/* CSS Document */

/* for mobile devices */
@media (max-width: 480px) {

	/*============================ common css =========================*/
		.talk {font-size: 20px; text-align: center;}

		.callbtn {float: none;}		

		.cntbox-1 {margin: 20px 0px;}

		.cntbox-2 {margin: 20px 0px;}

		.cntbox-3 {margin: 20px 0px;}

		.cntbox-4 {margin: 20px 0px;}

		.dbox {padding: 34px 33px;}

		.why-us {padding: 60px 0px 0px;}

		.breadcrumbs {margin-bottom: 0px;}

		.breadcrumbs h2 {font-size: 17px; margin: 10px 0px;}

		.breadcrumbs ol {display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0px 0px 0px;
    margin: 0;
    font-size: 16px;
}

.gallery-section {padding: 40px 0px 60px;}

.float {font-size: 40px;}

				
				/*============================ Upper Header css =========================*/
				
				.header-sticky-wrapper {height: auto!important;}
				
				 /*============================ Manu or Lower header css =========================*/
				 
				 
				 /*============================ banner section =========================*/
				 
				 #hero {height: auto!important;}

				#my-carousel .carousel-item .carousel-caption {position: absolute;
					    width: 88%;
					    top: 35%;
					    left: 50%;
					    transform: translate(-50%,-50%);}

			#my-carousel .carousel-item .carousel-caption h2 {font-size: 7px; line-height: 2rem;}

			#my-carousel .carousel-item .carousel-caption h2 span {font-size: 12px; display: block;}

				 
				 /*============================ service-form section css =========================*/
				 
				 
				 /*============================ intro section css =========================*/
				 
				 
						h2.mainTlt:before {content: "Welcome to";
								    position: absolute;
								    font-size: 19px;
								    color: #777;
								    top: 5.7%;
								    text-align: center;
						    }

						 .indTlt {font-size: 22px; text-align: center; color: #ffffff; padding: 22px 0px;}

						 .quote-button .quote-button-1 {padding: 10px; float: none;}

						 .quote-button .quote-button-2 {
									    padding: 10px;
									    float: none;
									    position: relative;
									    margin-left: 0%;
									}

						 .quoteTlt {font-size: 19px; font-weight: bold;}

						 .counts .count-box {margin: 10px 0px;}

						 .skew-wrap {transform : none;}

						 .project-1 {margin: 20px 0px;}

						 .project-2 {margin: 20px 0px;}

						 .project-3 {margin: 20px 0px;}

						 .project-4 {margin: 20px 0px;}

						 .project-data {transform: translate(-50%, -50%);}

						 .testimonials {padding: 27px 18px 10px;}

						 .qcWrap {padding: 10px 22px;}


	  /*============================ About us css =========================*/

	  			.intro-service {line-height: 35px; padding: 34px 7px;}

	  			.abtWrap {padding: 0px 10px 60px;}

	  			.prin-main .opacity {padding: 22px 10px 71px;}

	  				.abtTltext:before {    top: 6.5%;}

	  				.title-3:before {height: 70px;}

	  				.title-3 {font-size: 20px;  padding: 30px 16px;}

	  				.prindata {padding: 7px 4px;}

	  				.ptitle {text-align: center;}

	  				.team {padding: 92px 13px;}


				  /*============================ htltinstal Section css =========================*/
				  
				  .about-head {width: auto;}
				  
				  /*============================ Panel Installation css =========================*/
				  
				.PRtlt {font-size: 2.5rem !important; text-align: center; text-transform: capitalize;}

				.PRtlt span {color: #107fc2;}

				  .htpnl-p1 { padding-top: 25px;}

				  .paraTlt {font-size: 3.0rem !important;}

				  .pRole {background-image: none;}

				  .rData {padding: 30px 0px; font-size: 20px; line-height: 4rem;}

				   .box1 {text-align: center;}

				  .box2 {text-align: center;}

				  .splice-img3 {margin-top: 10rem;}

				  .paraTlt span {color: #107fc2;}



				  /*============================ transformer css =========================*/
				 
				  .tpara {font-size: 20px; text-align: justify;}




				  
				   /*============================ Power cabling Section css =========================*/

				   	.cableTlt:before {left: auto; top: 7.5%; font-size: 12px;}

				   	.pageTitle {text-align: center;}

				   	.pageTitle .cableTlt {font-size: 3rem !important; text-align: center;  text-transform: capitalize;}

				   	ul.a {display: grid; grid-gap: 7%;}

				   	li.b {padding: 5px 11px; margin: 0px; font-size: 18px;}

				   	.crborder {max-width: 100%;}

				   	.typeCbl {padding: 10px 10px 73px;} 

				   	.bg-cableimg {max-width: 200px; padding: 0px; max-width: 100%;}

				   	.child-img {top: 27%; left: 30px; max-width: 80%; height: auto;}

				   	.btray {text-align: justify;}

				   	.whyData {padding: 60px 40px 233px; background-color: #17a2b8; clip-path: polygon(0 40px, 100% 0, 100% 90%, 0 100%);
    color: white;}

    				.whatsapp {margin-top: 10px; padding: 6px 27px;}

    				.fa-whatsapp {margin: 0px 15px;}

    				ul.cable-list {margin-bottom: 13%;}



   /*============================ passive, active, voice-data, audio-video networking Section css =========================*/

    				   	.rent-feature-block {width: 100%; margin: 10px 0px; box-shadow: 0px 0px 12px 2px #63636369;}

    				   	.pssv-head {width: 100%; background-color: #04375596;}

    				   	.actv-head {width: 100%; background-color: #04375596;}

    				   	.vc-dc-head {width: 100%;}

    				   	.epbxLixt {padding: 0px 12px;}

    				   	.epbxLixt .eList {font-size: 18px; padding: 10px 0px; text-align: left;}

    				   	.epbxLixt .eList:before {margin-bottom: 0px;}

    				   	.advdLixt {padding: 0px 8px;}

    				   	.advdLixt .eList { font-size: 18px; padding: 10px 0px;  }

    				   	.advdLixt .eList:before {text-align: justify;}

    				   	.advdusp .edstat {padding: 0px 36px;}

    				   	.advd-head {width: 100%; background-color: #04375596;}

				   
				   
				    /*============================ Security Section css =========================*/
					
				    .cctv-head {width: 100%; background-color: #04375596;}

				    .fAlarm-head {width: 100%; background-color: #04375596;}

				    .listF {padding: 0px 12px;}

				    .listF .listA:before {margin-bottom: 0px;}

				    .listA {font-size: 18px;}

				    .fAlarmB {padding: 80px 22px 40px;}

				    .advdTlt {font-size: 2.5rem !important; font-weight: 600;}

				    .fATlt {font-size: 2.5rem !important;}

				    .acpt-head {width: 100%; background-color: #04375596;}

				    .acpt-tlt {font-size: 2.5rem !important;}

				    .acdata {font-size: 16px; line-height: 26px; padding-left: 0px;}



					
					/*============================ Maintainence Section css =========================*/
					.ntwmtnceTlt {font-size: 2.5rem !important;}

					.cctvmtnceTlt {font-size: 2.5rem !important;}


					
					/*============================ Turnkey Section css =========================*/
					  
					.trnk-wrap {padding: 60px 0px 0px;}
					.trnelec-head {width: 100%;}


					  
					   /*============================ Contact Section css =========================*/
	
							.contact {padding: 40px 28px;}

							.contact .info-box {padding: 20px 20px;}
	
	
	
}






/* for mobile devices */

@media (max-width: 768px) {

.product-wrap-box {grid-template-columns: repeat(1, 1fr)} 

.product-wrap-box .box {height: auto;}

.product-list ul {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 6px;}	

.product-list ul li {width: 100%; line-height: 18px; font-size: 10px;}

.procd { padding: 30px 30px 30px;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 18px;
    position: relative;
}


.trparaTlt {font-size: 2.0rem !important;
    text-align: center;
    text-transform: capitalize;}


 }