@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,300italic,600,600italic,700,700italic);
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
Body{
	color: #0b0d2f;
	font-size: clamp(14px, 1.5vw, 19px);  
	font-family: 'Jost', sans-serif;
	margin:0;
	padding:0;
	line-height: 1.4
}
html{
    scroll-padding-top:120px;
}
::selection {color:#FFF;background:#192078;}
::-moz-selection {color:#FFF;background:#192078;}
::-o-selection {color:#FFF;background:#192078;}
::-ms-selection {color:#FFF;background:#192078;}
::-webkit-selection {color:#FFF;background:#192078;}
 
.Shadow{
box-shadow: rgba(50, 50, 93, 0.25) 0px 10px 27px -5px, rgba(0, 0, 0, 0.3) 0px 5px 16px -8px;}	
 
.FontColor1 {color:#0b5191;}
.FontColor2 {color:#0ba957;}
.FontColor3 {color:#FFFFFF;}
.FontColor4 {color:#000;}
.FontColor5 {color:#DC0205;}

.FontStyle1{font-family: 'Oswald', sans-serif;}

.BgColor1{background-color:#fff;}
.BgColor2{background-color:#071f56; color: #fff;}

.TableAltHeader1 {background-color:#0b5191; color: #fff;}
.AltColor11 {background-color:#deeaf1;}
.AltColor12 {background-color:#eff7ff;}

.TableAltHeader2 {background-color:#1285ce; color:#fff;}
.AltColor21 {background-color:#d5eefd;}
.AltColor22 {background-color:#ebf6fd;}

/* Font Sizes */
.SmallerText {font-size: clamp(12px, 1vw, 13px);}
.MediumText {font-size: clamp(13px, 1vw, 15px);}
.NormalText {font-size: clamp(15px, 2vw, 19px);}
.NormalTextBig {font-size: clamp(16px, 2vw, 24px);}
.Heading {font-size: clamp(17px, 2.5vw, 32px);}
.BiggerText {font-size: clamp(20px, 3.5vw, 42px);}
.LargeText {font-size: clamp(26px, 4vw, 50px);}
.ExtraLargeText {font-size: clamp(29px, 5vw, 60px);}
.SmallerLink{font-size: clamp(11px, 1vw, 12px); text-decoration: none}
a.SmallerLink:hover {text-decoration:none;}

h3 {font-weight: normal; margin: 0; display: inline;}
h2 {font-weight: normal; margin: 0; display: inline;}
h1 {font-weight: normal; margin: 0; display: inline;}
	
.JustLinks {TEXT-DECORATION: none;}
a.JustLinks:hover{TEXT-DECORATION: underline;}

.AllCaps{text-transform:uppercase;}

.PositionABT{position: absolute}

.PositionREL{position: relative}

.PositionFIX{position: fixed}

/* Button Styles */
.Button{
	font-family: 'Jost', sans-serif;
	font-size:18px;		
	padding:7px 20px;
	cursor:pointer;
	text-decoration:none;
	outline:none;
	display:inline-block;
	margin:2px;
}
.ButtonSmall{
	font-family: 'Jost', sans-serif;
	font-size:13px;		
	padding:2px 8px;
	cursor:pointer;
	text-decoration:none;
	outline:none;
	display:inline-block;
	margin:2px;
}
.ButtonMedium{
	font-family: 'Jost', sans-serif;
	font-size:15px;	
	padding:4px 15px;
	cursor:pointer;
	text-decoration:none;
	outline:none;
	display:inline-block;
	margin:2px;
}
.ButtonBig{
	font-family: 'Jost', sans-serif;
	font-size:22px;	
	padding:9px 20px;
	cursor:pointer;	
	text-decoration:none;	
	outline:none;	
}
.ButtonColor1{
	color:#fff;	
	background-color: #12538e;			
	border:1px solid #12538e;	
}
.ButtonColor1:hover{
	color:#fff;	
	background-color: #0ba957;		
	border:1px solid #0ba957;
	transition:0.3s ease;	
}
.ButtonColor2{
	color:#fff;	
	background-color: #0ba957;		
	border:1px solid #0ba957;	
}
.ButtonColor2:hover{
	color:#fff;	
	background-color: #0a840a;			
	border:1px solid #0a840a;
	transition:0.3s ease;	
}
.Button:active, ButtonMedium:active, ButtonSmall:active, ButtonBig:active{
	top:1px;
	position:relative;
}

/* All Border Styles */
.Border1 {border-width:1px; border-style:solid}
.Border2 {border-width: 2px;  border-style:solid}
.Border5 {border-width: 5px;  border-style:solid}

.DottedBorder {border-width:1px; border-style:dotted}

.BorderBottom1{border-bottom: 1px solid;}
.BorderBottom2{border-bottom: 2px solid;}
.BorderBottom5{border-bottom: 5px solid;}
.BorderBottomDashed{border-bottom: dashed 1px;}
.BorderBottomDotted{border-bottom: dotted 1px;}

.BorderTop1{border-top: 1px solid;}
.BorderTop2{border-top: 2px solid;}
.BorderTop5{border-top: 5px solid;}
.BorderTop7{border-top: 7px solid;}
.BorderTopDashed{border-top: dashed 1px;}
.BorderTopDotted{border-top: dotted 1px;}

.BorderLeft1{border-left:1px solid;}
.BorderLeft8{border-left:8px solid;}
.BorderRight1{border-right:1px solid;}
.BorderRight2{border-right:2px solid;}
.BorderRight3{border-right:3px solid;}

.BorderColor1{border-color: #c4ccd4}

/* Border Rounded Corners */
.BorderRounded15{border-radius:15px;}
.BorderRounded10{border-radius:10px;}
.BorderRounded8{border-radius:8px;}
.BorderRounded5{border-radius:5px;}
.BorderRounded20{border-radius:20px;}

/* Table Style */		
.TableStyle {
    border-collapse: collapse;
    border-spacing: 0;	     
	background-color: #fff;
}
.TableStyle th {    
    padding:10px 12px;
	color:#fff;
	background-color: #0b5191;	
}
.TableStyle td {      
    padding:9px 12px;
	border: 1px solid #bfccd7;	
}
.TableStyle tr:nth-child(even){background-color: #eff7ff; }

/* TextBox Style*/	

.TextBox{	
	color:#000;
	padding:10px 7px;
	border:1px solid #d0d0d0;	
	background-color: #fff;	
	box-sizing: border-box;
	outline: none;
}
.TextBox:focus{	
	border:1px solid #0e5ca3;
	background-color: #ffffff;	
	box-sizing: border-box;
	outline: none;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
::placeholder{
	font-size:13px;
	font-style:italic;
	font-family: 'Open Sans', sans-serif;
	opacity:0.4;
	color:#fff;	
	}
:-ms-input-placeholder{
	font-size:13px;
	font-style:italic;
	font-family: 'Open Sans', sans-serif;
	opacity:0.4;
	color:#fff;
}

.TextBoxBig::placeholder,
.TextBoxBig::-webkit-input-placeholder{
  color: #000;
  opacity:0.5;
  font-style:normal;
  font-family: 'Open Sans', sans-serif;
  font-size:16px;
}
.TextBoxBig::-moz-placeholder{
  color: #000;
  opacity:0.5;
  font-style:normal;
  font-family: 'Open Sans', sans-serif;
  font-size:16px;
}

.imgzoom{
	 overflow: hidden; 
            margin: 0 auto; 
}
      
 .imgzoom img { 
            width: 100%; 
            transition: 0.5s all ease-in-out; 
        } 
      
.imgzoom:hover img {             
	-ms-transform: scale(1.15);	
	-webkit-transform: scale(1.15);	
	-moz-transform: scale(1.15); 
	transform: scale(1.15);
        } 

.bannercaption{z-index: 11; position: absolute; transform: translateY(-50%); top: 70%; right: 8%; width: 30%; text-align: center; text-shadow: 2px 2px 2px #222;}
.banner{height: 70vh; background: url("../images/home_banner.jpg") no-repeat center left 10%; background-size: cover; overflow: hidden; width: 100%;}
.logobg{height: 70vh; background: url("../images/logo-bg.png") no-repeat top right; background-size: cover;  width: 24%; position: relative;}
.whychooseP{min-height: 250px; background-image: url("../images/choosepinnacle-bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.pinnacleheading{transform: translateY(-50%); top: 50%; position: absolute}
.coreservicesbg{min-height: 300px; background-image: url("../images/coreservices-bg.jpg"); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.HVACsol_bg{min-height: 300px; background-image: url("../images/HVACRsol-bg.jpg"); background-repeat: no-repeat; background-position: bottom center; background-size: cover;}

.industries{
	padding: 12px 5px 12px 75px;
	box-sizing: border-box;
}

.gradientbg{
	background-color: #165b99;
	background-image: -webkit-linear-gradient(top, #165b99, #1ba2e2);
	background-image: -moz-linear-gradient(top, #165b99, #1ba2e2);
	background-image: -ms-linear-gradient(top, #165b99, #1ba2e2);
	background-image: -o-linear-gradient(top, #165b99, #1ba2e2);
}

.footer{background:#0c365b;}
.iconcircle{
	width: 70px;
	height: 70px;
	border-radius:50%;
	background: #cde6fd;	
	box-sizing: border-box;
	top: 50%; left: -20px;
	transform: translateY(-50%);
	position: absolute;
	z-index: 11;	
}
.iconcircle img{
	max-width: 80px; 
	margin-top: -10px;
	margin-left: -5px;
}
.innerbannerheading{z-index: 11; position: absolute; bottom: 20px; right: 20px; text-align: right; text-shadow: 2px 2px 2px #222;}
.aboutPAbanner{height: 450px; background-size: cover; background: url("../images/aboutpinnacle-banner.jpg") no-repeat; background-position: right bottom; overflow: hidden; width: 100%;}
.innerlogobg{height: 450px; background: url("../images/innerlogobg.png") no-repeat top right; background-size: cover; width: 24%;  position: relative;}
.inneraboutPimg{background: url("../images/visionmission-img.png") no-repeat bottom center; background-size: contain;min-height: 300px; }
.productbanner{height: 450px; background-size: cover; background: url("../images/products-banner.jpg") no-repeat; background-position: right bottom; overflow: hidden; width: 100%;}
.compressorbanner{height: 450px; background-size: cover; background: url("../images/compressor-centre-banner.jpg") no-repeat; background-position: right center; overflow: hidden; width: 100%;}
.contactbanner{height: 450px; background-size: cover; background: url("../images/contact-banner.jpg") no-repeat; background-position: bottom center; overflow: hidden; width: 100%;}
.industriesbanner{height: 450px; background-size: cover; background: url("../images/industries--banner.jpg") no-repeat; background-position: center center; overflow: hidden; width: 100%;}
.servicesbanner{height: 450px; background-size: cover; background: url("../images/services-banner.jpg") no-repeat; background-position: top right; overflow: hidden; width: 100%;}
.projectsbanner{height: 450px; background-size: cover; background: url("../images/projects-banner.jpg") no-repeat; background-position: top center; overflow: hidden; width: 100%;}
@media screen and (max-width:1599px) {	
.bannercaption{width: 40%; right: 10%}

}
@media screen and (max-width:1399px) {
	.logobg{height: 70vh; background: url("../images/logo-bg.png") no-repeat top right; background-size: cover;  width: 23%; position: relative;}
	.bannercaption{width: 45%; right: 5%}
.banner{height: 70vh; background: url("../images/home_banner.jpg") no-repeat center left 100px; background-size: cover; overflow: hidden; width: 100%;}
	.aboutPAbanner{height: 400px;background-position: center bottom; background-size: 120%;  width: 100%;}
	.productbanner{height: 400px;background-position: center bottom; background-size: 120%;  width: 100%;}
	.compressorbanner{height: 400px;background-position: center right; background-size: 120%;  width: 100%;}
	.contactbanner{height: 400px;background-position: bottom center; background-size: 120%;  width: 100%;}
	.industriesbanner{height: 400px;background-position: center center; background-size: 120%;  width: 100%;}
	.servicesbanner{height: 400px;background-position: top right; background-size: 120%;  width: 100%;}
	.projectsbanner{height: 400px;background-position: top center; background-size: 120%;  width: 100%;}
.innerlogobg{height: 400px;width: 25%;  position: relative;}
}
@media screen and (max-width:1279px) {
	.banner{background: url("../images/home_banner.jpg") no-repeat center left 35px;}
	.innerlogobg{height: 50vh; width: 26%; position: relative;}
	.aboutPAbanner{height: 350px; background-position: center center; width: 100%;}
	.productbanner{height: 350px;background-position: center bottom;}
	.compressorbanner{height: 350px;background-position: center right;}
	.contactbanner{height: 350px;background-position: bottom center;}
	.industriesbanner{height: 350px;background-position: center center;}
	.servicesbanner{height: 350px;background-position: top right;}
	.projectsbanner{height: 350px;background-position: top center;}
.innerlogobg{height: 350px;width: 27%;  position: relative;}
}
@media screen and (max-width:1023px) {
	.logobg{height: 60vh; background: url("../images/logo-bg.png") no-repeat top right; background-size: cover;  width: 29%; position: relative;}
	.bannercaption{width: 50%; right: 5%; top: 75%}
	.banner{height: 60vh;background: url("../images/home_banner.jpg") no-repeat center left -250px;}
	.industries{
	padding: 15px 5px 15px 55px;
	box-sizing: border-box;
}
.iconcircle{
	width: 65px;
	height: 65px;	
	padding: 10px;
	left: -15px;	
}
	.iconcircle img{
	max-width: 65px; 
	margin-top: -15px;
		margin-left: -10px;
}
	.aboutPAbanner{height: 320px; background-position: center center;background-size: 140%; width: 100%;}
	.productbanner{height: 320px; background-position: center center;background-size: 140%; width: 100%;}
	.compressorbanner{height: 320px; background-position: center right;background-size: 140%; width: 100%;}
	.contactbanner{height: 320px; background-position: bottom center;background-size: 140%; width: 100%;}
	.industriesbanner{height: 320px; background-position: center center;background-size: 140%; width: 100%;}
	.servicesbanner{height: 320px; background-position: bottom right;background-size: 140%; width: 100%;}
	.projectsbanner{height: 320px; background-position: center center;background-size: 140%; width: 100%;}
.innerlogobg{height: 320px;width: 32%;  position: relative;}
}
@media screen and (max-width:767px) {
	.logobg{height: 50vh; background: url("../images/logo-bg.png") no-repeat top right; background-size: cover;  width: 25%; position: relative;}
	.banner{height: 50vh; background: url("../images/home_banner.jpg") no-repeat center left 20px; background-size: cover; overflow: hidden; width: 100%;}
	.bannercaption{transform: translateY(-50%); top: 70%; right: 30px; width: 50%;}
	.pinnacleheading{transform: none; top: auto; position: relative}
.Button{	
	font-size:14px;	
	padding:5px 15px;	
}
.ButtonSmall{	
	font-size:11px;		
	padding:2px 8px;	
}
.ButtonMedium{	
	font-size:12px;	
	padding:3px 8px;	
}
.ButtonBig{	
	font-size:16px;	
	padding:7px 15px;	
}
.industries{
	padding: 15px 5px 15px 75px;
	box-sizing: border-box;
}
	.iconcircle{
	width: 65px;
	height: 65px;	
	padding: 10px;
	left: -10px;	
}
	.aboutPAbanner{height: 280px; background-position: center center; background-size: 150%; width: 100%;}
	.productbanner{height: 280px; background-position: center center; background-size: 150%; width: 100%;}
	.compressorbanner{height: 280px; background-position: center right; background-size: 150%; width: 100%;}
	.contactbanner{height: 280px; background-position: bottom center; background-size: 150%; width: 100%;}
	.industriesbanner{height: 280px; background-position: center center; background-size: 150%; width: 100%;}
	.servicesbanner{height: 280px; background-position: bottom right; background-size: 150%; width: 100%;}
	.projectsbanner{height: 280px; background-position: center center; background-size: 150%; width: 100%;}
.innerlogobg{height: 280px;width: 34%;  position: relative;}
}

@media screen and (max-width:639px) {
	.logobg{height: 180px; background: url("../images/logo-bg-small.png") no-repeat top left -70px; background-size: contain; overflow: hidden; width: auto;}
.banner{height: 270px; background: url("../images/home_banner.jpg") no-repeat center left 0px; background-size: cover; overflow: hidden; width: 100%;}
	.bannercaption{transform: translateY(-50%); top: 73%; right: 30px; width: 70%;}
	.industries{
	padding: 15px 5px 15px 50px;
	box-sizing: border-box;
}
	.iconcircle{
	width: 50px;
	height: 50px;	
	padding: 5px;
	left: -15px;	
}
	.iconcircle img{
	max-width: 60px; 
	margin-top: -15px;
		margin-left: -5px;
}
	.aboutPAbanner{height: 250px; background-position: center center; background-size: 175%; width: 100%;}
	.productbanner{height: 250px; background-position: center center; background-size: 175%; width: 100%;}
	.compressorbanner{height: 250px; background-position: center right; background-size: 175%; width: 100%;}
	.contactbanner{height: 250px; background-position: bottom center; background-size: 175%; width: 100%;}
	.industriesbanner{height: 250px; background-position: center center; background-size: 175%; width: 100%;}
	.servicesbanner{height: 250px; background-position: bottom right; background-size: 175%; width: 100%;}
	.projectsbanner{height: 250px; background-position: center center; background-size: 175%; width: 100%;}
.innerlogobg{height: 180px; background: url("../images/logo-bg-small.png") no-repeat top left -70px; background-size: contain; overflow: hidden; width: auto;}
	.innerbannerheading{bottom: 10px; right: 10px;}
}

@media screen and (max-width:479px) {
.logobg{height: 160px; background: url("../images/logo-bg-small.png") no-repeat top left -80px; background-size: contain; overflow: hidden;}
.banner{height: 250px; background: url("../images/home_banner.jpg") no-repeat center left 0px; background-size: cover; overflow: hidden; width: 100%;}
	.bannercaption{transform: translateY(-50%); top: 76%; right: 10px; width: 90%;}
.Button{	
	font-size:13px;	
	padding:5px 12px;	
}
.ButtonSmall{	
	font-size:10px;		
	padding:2px 8px;	
}
.ButtonMedium{	
	font-size:10px;	
	padding:2px 8px;	
}
.ButtonBig{	
	font-size:14px;	
	padding:7px 15px;	
}
	.industries{
	padding: 10px 5px 10px 65px;
	box-sizing: border-box;
}
	.iconcircle{
	width: 60px;
	height: 60px;	
	padding: 5px;
	left: -10px;	
}
	.iconcircle img{
	max-width: 60px; 
	margin-top: -10px;
		margin-left: -5px;
}
	.aboutPAbanner{height: 200px; background-position: center center; background-size: 187%; width: 100%;}
	.productbanner{height: 200px; background-position: center center; background-size: 187%; width: 100%;}
	.compressorbanner{height: 200px; background-position: center right; background-size: 187%; width: 100%;}
	.contactbanner{height: 200px; background-position: bottom right -70px; background-size: 187%; width: 100%;}
	.industriesbanner{height: 200px; background-position: center center; background-size: 187%; width: 100%;}
	.servicesbanner{height: 200px; background-position: bottom right; background-size: 187%; width: 100%;}
	.projectsbanner{height: 200px; background-position: center center; background-size: 187%; width: 100%;}
	.innerlogobg{height: 160px; background: url("../images/logo-bg-small.png") no-repeat top left -80px; background-size: contain; overflow: hidden;}
}