@charset "utf-8";

/*------------------------------------------------------------------
  [Table of contents]
  * To keep an overview of structure of your code, we make use of table of
  * content. Table of content is use display the overall tree structure of your
  * Layout.
  * (NOTE: Remove this commented code once you start developing the code.
  * Remove the following table of content and add your own as this is just and
  * example to let you know)

  1. CSS Reset Code
    1.1. Eric Meyers Reset/HTML5 display-role reset for older browsers
    1.2. Font class declaration
  2. HTML5 Boilerplate Code
  3. Helper Classes
  4. PRDXN's custom styles
    4.1. Body
    4.2. Header
    4.3. Content
      4.3.1 Why choose us section
      4.3.2 System we services section
    4.4. Footer
  5. Responsive Design(Media Queries)
    5.1 Header 
    5.2 Content
    5.3 Footer  
  6. Font for mozilla and IE
    6.1 IE10-11specific styles go here 
    6.2 IE9-specific styles go here 

  ------------------------------------------------------------------*/

/*------------------------------------------------------------------
  [Color codes]
  * Mention the color code you have used in your html document for the respective
  * elements given as follow.
  * (NOTE: Remove this commented code once you start developing the code.
  * Remove the following color code and add your own as this is just and
  * example to let you know)

  Header nav: #e5e5df (Cararra)
  Header nav a (hover): #fff (white)
  Header nav a (active): #fff (white)
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
  [Typography]
  * Mention the Typography you have used in your html document for the respective
  * elements given as follow.
  * (NOTE: Remove this commented code once you start developing the code.
  * Remove the following typography and add your own as this is just and
  * example to let you know)

  Header nav a: 16px 'Futura Bold', 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  View-register li a : 12px 'Futura Bold', 'Gill Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  -------------------------------------------------------------------*/

/* ==========================================================================
   1. CSS Reset Code
   ========================================================================== */

/* 1.1. http://meyerweb.com/eric/tools/css/reset/
   v2.0b1 | 201101
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON
   ========================================================================== */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, img, ins, kbd, q,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  padding: 0;
  border: 0;
  margin: 0;
  font-size: 100%;
  font: inherit;
  outline: 0;
  vertical-align: baseline;
}

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before,
blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define visible focus styles!
:focus {
    outline: ?????;
} */

/* 1.2. Font class declaration
   ========================================================================== */
/*
 * Mention the font property (eg: font-family, font-size, font-weight, font-style
 * etc) that have been commonly used in the html document. Make a class of it and
 * apply to the element wherever it is needed. If any single property in changed,
 * then override only that property in the particular class which is used for the
 * element.
 * (NOTE: Remove this commented code once you start
 * developing the code. Remove the following font class and add your own
 * as this is just and example to let you know. If there is only one font family
 * followed throughout the site, then menstion the font property in body. No need
 * of creating an extra class for it) */

/* This is just an example. You have to replace it with the font class you will be using for the project. */
@font-face {
  font-family: HomeServeRounded Bold;
  src: url('../vendor/fonts/homeserverounded-bold-webfont.woff');
  src: url('../vendor/fonts/HomeserveRounded-Bold.otf');
}

@font-face {
  font-family: HomeServeRounded;
  src: url('../vendor/fonts/homeserverounded-thin-webfont.woff');
  src: url('../vendor/fonts/HomeServeRounded-Thin.otf');
}

/* ==========================================================================
   2. HTML5 Boilerplate Code
   ========================================================================== */
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea { color: #222; }

html {
  font-size: 1em;
  line-height: 1.4;
}

audio,
canvas,
img,
video { vertical-align: middle; }

textarea { resize: vertical; }

.browsehappy {
	padding: 0.2em 0;
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
}

/* ==========================================================================
   3. Helper classes
   ========================================================================== */

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none;
  visibility: hidden;
}

/* Hide visually and from screenreaders, but maintain layout. */
.invisible { visibility: hidden; }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

/* Contain floats: h5bp.com/q */
.clearfix:after { clear: both; }

/* ==========================================================================
   4. PRDXN's custom styles
   ========================================================================== */
/*
    Author: PRDXN;
    Company Website: http://www.prdxn.com;
    4.1 body start here
*/

.container { width: 100%; }

.wrapper {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
}

a { text-decoration: none; }

/*=============================================================
 4.2 header start here 
 ==============================================================*/

header h1 {
  width: 168px;
  margin: 0 0 0 1px;
  height: auto;
  font-size: 20px;
}

header h1 a {
  width: 100%;
  height: auto;
  display: block;
  background: url('../images/logo.png') no-repeat;
  background-size: contain;
  text-indent: -9999px;
}

.logo-slogan { 
  margin: 0 0 12px;
  padding: 21px 0 0 2%;
  float: left; 
}

.call-us { 
  padding: 55px 2% 0 0;
  float: right; 
}

.logo-slogan .slogan {
  color: #e31936;
  font-family: 'HomeServeRounded bold',Calibri,sans-serif;
  font-size: 28px;
  line-height: 42px;
} 

.call-us,
.call-us a {
  color: #e31936;
  font-family: 'HomeserveRounded bold',Calibri,sans-serif;
  font-size: 21px;
}

.call-us a { 
  padding: 0 0 0 20px;
  border-left: 1px solid;
  margin: 0 0 0 20px; 
  display: inline-block;
  line-height: 28px;
}

.call-us a:hover { text-decoration: underline; }

header .header-banner { 
  width: 100%;
  clear: both;
}

header .header-banner img { 
  width: 100%;
  height: auto; 
}

/*
=========================================================
4.3 content start here
==========================================================
*/

.content { 
  width: 91%;
  margin: 0 auto;
}

.content > p { 
  padding: 30px 1.2% 34px;
  color: #000;
  font-family: 'HomeServeRounded',Calibri,sans-serif;
  font-size: 22px;
  line-height: 29px;
}

.content > p span { font-family: 'HomeServeRounded bold',Calibri,sans-serif; }

/*
4.3.1 why choose us section start here
=============================================*/

.content > h2 {
  width: 100%;
  padding: 12px 0;
  background-color: #0076c9;
  color: #fff; 
  font-family: 'HomeserveRounded bold',Calibri,sans-serif;
  font-size: 30px;
  line-height: 32px;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0px 1px 1.98px rgba(16, 16, 16, 0.5);
}

.why-choose-us-blocks .block-1,
.why-choose-us-blocks .block-2,
.why-choose-us-blocks .block-3,
.why-choose-us-blocks .block-4 { 
  width: 48.5%;
  min-height: 205px;
  border: solid 4px #0076c9;
  margin: 18px 0 0;
  vertical-align: top;
  background-color: #f7f6e7;
}

.why-choose-us-blocks .block-1,
.why-choose-us-blocks .block-3 { float: left; }

.why-choose-us-blocks .block-2,
.why-choose-us-blocks .block-4 { float: right; }

.why-choose-us-blocks .block-3,
.why-choose-us-blocks .block-4 { margin: 18px 0 63px; }

.why-choose-us-blocks .block-1 h3,
.why-choose-us-blocks .block-2 h3,
.why-choose-us-blocks .block-3 h3 { 
  margin: 24px 0 12px; 
  color: #0076c9;
  font-family: 'HomeserveRounded bold',Calibri,sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  text-align: center;
}

.why-choose-us-blocks .block-1 p,
.why-choose-us-blocks .block-2 p,
.why-choose-us-blocks .block-3 p { 
  width: 95%;
  margin: 0 auto; 
  color: #000;
  font-family: 'HomeServeRounded',Calibri,sans-serif;
  font-size: 22px;
  line-height: 30px;
  text-align: center;
} 

.why-choose-us-blocks .block-4 { 
  background-color: #0076c9;
  color: #fff;
  font-family: 'HomeserveRounded',Calibri,sans-serif;
}

.why-choose-us-blocks .block-4 h3 { 
  margin: 24px 0 12px; 
  font-family: 'HomeserveRounded bold',Calibri,sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  text-align: center;
  text-shadow: 0px 1px 1.98px rgba(16, 16, 16, 0.5);
}

.why-choose-us-blocks .block-4 img,
.why-choose-us-blocks .block-4 p { 
  display: inline-block; 
  vertical-align: middle;
}

.why-choose-us-blocks .block-4 p span { 
  display: block; 
  font-size: 22px;
  line-height: 30px;
  text-shadow: 0px -1px 0.99px rgba(69, 69, 69, 0.2);
}

.why-choose-us-blocks .block-4 img { 
  width: 13%;
  padding: 0 3% 0 20%; 
}

/*
4.3.2 system we services section start here
=============================================================*/

.system-we-services-blocks {
  width: 81%;
  margin: 42px auto 23px;
}

.system-we-services-blocks .first-block,
.system-we-services-blocks .second-block,
.system-we-services-blocks .third-block {
  width: 26.2%;
  display: inline-block;
  vertical-align: top;
}

.system-we-services-blocks .second-block { margin: 0 10%; }

.system-we-services-blocks h3 {
  margin: 25px 0;
  color: #000;
  font-family: 'HomeServeRounded',Calibri,sans-serif;
  font-size: 24px;
  line-height: 32px;
  text-align: center;
}

.system-we-services-blocks img {
  width: 100%;
  height: auto;
}

.list-content ul li { 
  width: 40%;
  padding: 0 0 0 6%;
  margin: 15px 0 0;
  display: inline-block;
  vertical-align: top;
  background: url('../images/tick-icon.png') no-repeat;
  background-position: top left;
  color: #000;
  font-family: 'HomeserveRounded',Calibri,sans-serif;
  font-size: 22px;
  line-height: 32px; 
}

.list-content ul li span { font-family: 'HomeserveRounded bold',Calibri,sans-serif; }

.list-content ul li:nth-child(even) { margin: 15px 0 0 7%; }

/*================================================================
4.4 footer section start here
===================================================================*/

footer { 
  border-top: 1px solid #e1e1e1; 
  margin: 40px 0 24px;  
}

footer h2 {
  width: 168px;
  height: auto;
  margin: 0 0 0 1px;
  font-size: 20px;
}

footer .logo-slogan { 
  padding: 35px 0 0 2%;
  float: left;
}

footer .call-us { padding: 0; }

footer h2 a {
  width: 100%;
  height: auto;
  display: block;
  background: url('../images/logo.png') no-repeat;
  background-size: contain;
  text-indent: -9999px;
}

.call-social-icons { 
  padding: 70px 2% 0 0;
  float: right; 
}

/*===========================================================
5. Responsive design(media query) start here
==============================================================*/

@media only screen and (max-width : 959px) {

  /* 5.1 header start here
  ==============================*/

  header .logo-slogan,
  .call-us { 
    padding: 21px 0 0;
    margin: 0 0 0 4.5% 
  }
 
  header h1,
  header .logo-slogan .slogan,
  .call-us { 
    padding: 0;
    float: left;
    clear: both;
    font-size: 20px;
    text-align: left;
  }

  header .logo-slogan .slogan { 
    margin: 5px 0;
    font-size: 28px;
    line-height: 34px; 
  }

  .call-us { margin: 0 0 10px 4.5%; }

  /*5.2 content start here
  ===============================================*/
  
  .content > p { 
    padding: 15px 0; 
    font-size: 20px;
    line-height: 25px;
  }

  .content > h2 { 
    font-size: 26px;
    line-height: 30px;
  }

  .why-choose-us-blocks { margin: 0 0 15px; }

  .why-choose-us-blocks .block-1 h3, 
  .why-choose-us-blocks .block-2 h3, 
  .why-choose-us-blocks .block-3 h3 { 
    margin: 15px 0 8px;
    font-size: 23px; 
    line-height: 24px;
  }

  .why-choose-us-blocks .block-4 h3 { font-size: 22px; }

  .why-choose-us-blocks .block-1, 
  .why-choose-us-blocks .block-2, 
  .why-choose-us-blocks .block-3, 
  .why-choose-us-blocks .block-4 {
    width: 99%;
    min-height: 0;
    padding: 2px 0;
    border: none;
    margin: 15px auto;
    outline: solid 3px #0076c9;
    float: none;
  }

  .system-we-services-blocks { margin: 15px auto 20px; }

  .system-we-services-blocks h3 { 
    margin: 8px 0 15px; 
    font-size: 23px;
    line-height: 28px;
  }

  .why-choose-us-blocks .block-1 p, 
  .why-choose-us-blocks .block-2 p, 
  .why-choose-us-blocks .block-3 p, 
  .why-choose-us-blocks .block-4 p {
    margin: 0 auto 15px;
    font-size: 20px;
    line-height: 25px;
  }

  .why-choose-us-blocks .block-4 p span { 
    font-size: 20px;
    line-height: 25px;
  }

  .list-content ul li { font-size: 20px; }

  .why-choose-us-blocks .block-4 img,
  .why-choose-us-blocks .block-4 p { 
    margin: 0 auto;
    display: block; 
  }
   
  .why-choose-us-blocks .block-4 p { 
    margin: 15px 0;
    font-size: 20px; 
    text-align: center;
  }

  .why-choose-us-blocks .block-4 img { 
    width: 60px; 
    height: auto;
    padding: 0;
  }

  .system-we-services-blocks .first-block, 
  .system-we-services-blocks .second-block, 
  .system-we-services-blocks .third-block { 
    width: 80%;
    margin: 0 auto;
    display: block; 
  }

  .system-we-services-blocks .first-block div, 
  .system-we-services-blocks .second-block div, 
  .system-we-services-blocks .third-block div { 
    width: 55%; 
    margin: 0 auto;
  }

  .list-content ul li { 
    width: 75%;
    padding: 0 0 0 58px;
    margin: 15px 0;
    display: block;
  }

  .list-content ul li:nth-child(even) { margin: 15px 0 0; }

/*5.3 footer start here
===============================================*/

  footer {
    padding: 20px 0 0;
    margin: 20px 0;    
  }

  footer .logo-slogan,
  footer ul { 
    padding: 0;
    margin: 0 0 0 4.5%;    
  }

  footer h2,
  footer .logo-slogan .slogan,
  footer .call-social-icons { 
    padding: 0;
    float: none;
    font-size: 20px;
    text-align: left;
  }

  footer h2 { margin: 10px 0 7px; }

  footer .logo-slogan .slogan { 
    margin: 5px 0;
    font-size: 28px;
    line-height: 34px;
  }

  footer .call-us { margin: 5px 0 10px 4.5%; }

  .call-social-icons h3 { margin: 0 0 16px 4.5%; }

}
/*=====================================================
6. font for mozilla and IE
========================================================*/

@-moz-document url-prefix() {
 .logo-slogan .slogan,
  .call-us, 
  .call-us a,
  .content > p span,
 .why-choose-us-blocks .block-1 h3, 
 .why-choose-us-blocks .block-2 h3, 
 .why-choose-us-blocks .block-3 h3,
 .why-choose-us-blocks .block-4 h3,
 .list-content ul li span,
 .content > h2 { font-weight: normal;
}

}

/* 
IE10-specific styles go here 
=============================================*/  
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .logo-slogan .slogan,
  .call-us, 
  .call-us a,
  .content > p span,
 .why-choose-us-blocks .block-1 h3, 
 .why-choose-us-blocks .block-2 h3, 
 .why-choose-us-blocks .block-3 h3,
 .why-choose-us-blocks .block-4 h3,
 .list-content ul li span,
 .content > h2 { font-weight: 700; }
   
}

/* 
IE9-specific styles go here 
=============================================*/  
.ie9 .logo-slogan .slogan,
.ie9 .call-us, 
.ie9 .call-us a,
.ie9 .content > p span,
.ie9 .why-choose-us-blocks .block-1 h3, 
.ie9 .why-choose-us-blocks .block-2 h3, 
.ie9 .why-choose-us-blocks .block-3 h3,
.ie9 .why-choose-us-blocks .block-4 h3,
.ie9 .list-content ul li span,
.ie9 .content > h2 { font-weight: 700; }