*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -ms-box-sizing:border-box;
}
body{
  background-color: #fff;
  font-size: 18px;
  font-family: acumin-pro, sans-serif;
  font-style: normal;
  font-weight: 400;
  color: #343446;
  line-height: 1.4;
}
/*Image Tag*/
img{
  width:100%;
  display:inline-block;
  height:auto;
}
/*Heading Tags*/
h1,h2,h3,h4,h5,h6{
  font-family: acumin-pro, sans-serif;
  color: #13136D;
  margin:10px 0px;
  text-transform: uppercase;
}
h1{
  font-size:36px;
}
h2{
  font-size: 30px;
}
h3{
  font-size: 25px;
}
h4{
  font-size: 20px;
}
h5{
  font-size: 18px;
}
h6{
  font-size: 15px;
}
/*Wrapper Container*/
.wrapper{
  width: 100%;
  height: auto;
  float: left;
}
/*Browser Message*/
@supports (display: grid) {
    .browser-message {
        display: none;
    }
}
.browser-message{
  padding: 2em;
  width: 60%;
  line-height: 30px;
  margin: 0px auto;
}
.browser-message h1{
  color: orange;
  text-transform: uppercase;
  margin: 20px 0px;
}
.browser-message p{
  line-height: 2;
  color: #797676;
}
.browser-message p a{
  text-decoration: none;
  color: white;
  padding: 10px 20px;
  background-color: #ed5249;
  border-radius:3px;
  text-transform: uppercase;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
}
.browser-message p a:hover{
  background-color: #de180c;
}
@supports (display: grid){
  .browser-message{
    display: none;
  }
}
/*Links*/
a, a:link, a:visited{
  color:#13136D;
  font-weight: bold;
  cursor: pointer;
  text-decoration:none;
  -webkit-transition:all 0.2s ease-in-out;
  -moz-transition:all 0.2s ease-in-out;
  -ms-transition:all 0.2s ease-in-out;
  -o-transition:all 0.2s ease-in-out;
  transition:all 0.2s ease-in-out;
  }
  a:hover{
    cursor: pointer;
    color:#00394F;
    text-decoration:none
  }
  p a:hover{
    cursor: pointer;
    color:#00394F;
    text-decoration:none
  }
  /*Button*/
  button, input[type="submit"]{
    font-family: acumin-pro, sans-serif;
    font-size:24px;
    text-decoration:none;
    padding:10px 15px;
    background-color:#13136D;
    text-transform:uppercase;
    color:#fff!important;
    cursor:pointer;
    border-color:#ff9700;
    margin-bottom: 30px;
    border:none;
    outline: none;
    -webkit-transition:all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -ms-transition:all 0.2s ease-in-out;
    -o-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out
  }
  button:hover, input[type="submit"]:hover{
    background-color:#13136D;
    border:none;;
  }

  /*Forms*/
  input,textarea{
    width: 100%;
    padding: 15px 10px;
    outline: none;
    border-radius: 4px;
    font-size: 18px;
    background-color: transparent;
    color: #797676;
    border:1px solid #ff9700;
  }
  .field{
    margin-bottom: 20px;
  }
  textarea{
    min-height: 120px;
  }
  ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #797676;
    font-size: 18px;
  }
  ::-moz-placeholder { /* Firefox 19+ */
    color: #797676;
    font-size: 18px;
  }
  :-ms-input-placeholder { /* IE 10+ */
    color: #797676;
    font-size: 18px;
  }
  :-moz-placeholder { /* Firefox 18- */
    color: #797676;
    font-size: 18px;
  }
  /*Embed Media responsive css*/
  .iframeWrapper {
	  position:relative;
	  padding-bottom:36.25%;
	  padding-top:30px;
	  height:0;
	  overflow:hidden;
  }
  .iframeWrapper iframe, .iframeWrapper object, .iframeWrapper embed {
	  position:absolute;
	  top:0;
	  left:0;
	  width:100%;
	  height:100%;
  }
  /*Cookie Styling*/
  #cookieChoiceInfo {
    background: rgba(0,0,0,0.75) !important;
    bottom: 0;
    left: 0px;
    color: #ddd !important;
    font-size: 0.85rem;
    padding: 14px !important;
    top: auto !important;
    z-index: 1000;
    text-align: center;
    position: fixed;
    width: 100%;
  }
  #cookieChoiceDismiss {
    background-color: #1976D2;
    border: 0;
    color: white;
    font-size: 0.75rem;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
  }
  /*Header Style*/
  .navigation{
    padding: 30px 0px;
    display: grid;
    grid-template-columns: 20% 61% 19%;
  }
  .logo{
    padding-left: 20%;
  }
  .icon{
    display: none;
  }
  .nav{
    list-style-type: none;
    text-align: center;
  }
  .nav li{
    display: inline-block;
  }
  .nav li a{
    display: block;
    padding: 10px 15px;
    color: #343446;
    text-decoration: none;
    font-size: 20px;
    font-weight: lighter;
  }
  .nav li a:hover{
    color: #13136D;
  }
  .tel-wrapper{
    width: 35%;
    float: right;
    margin-bottom: 20px;
  }
  .mobile-tel{
    width: 100%;
    float: left;
    display: none;
  }
  .tel, .mobile-tel{
    position: relative;
    font-size: 20px;
    background-image: url('../images/tel-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 12% 0px;

  }
  .tel img, .mobile-tel img{
    position: absolute;
    top: 0;
  }
  .tel p, .mobile-tel p{
    position: absolute;
    top: 15%;
    left: 20%;
    color: #ffffff;
  }
  .tel p span, .mobile-tel p span{
    display: block;
    font-size: 22px;
    margin-left: 10px;
    font-weight: bold;
    margin-top: -10px;
  }
    .tel p span a, .mobile-tel p span a{
      color: #ffffff;
    }
  .header{
    width: 100%;
    float: left;
  }
  .header .image{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 18% 0px;
    position: relative;
  }
  .header .image::before{
    content: "";
    background-color: rgba(19,19,109,0.4);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  header h1{
    text-align: center;
  }
  .slick-prev:before{
    content: "\f0a8";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
  .slick-prev{
    left: 30px;
    z-index: 10;
  }
  .slick-next {
    right: 30px;
  }
  .slick-next:before{
    content: "\f0a9";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
  }
  .slick-prev:before, .slick-next:before{
    font-size: 30px;
    color: #c0bcbc;
  }
  /*main content*/
  .main-content{
    width: 60%;
    float: left;
    margin: 0px 20%;
    padding: 60px 0px;
  }
  .main-content h1{
    text-align: center;
  }
  .main-content  p{
    margin-bottom: 15px;
  }

/* Homepage adjustments */
.wrapper.--home .main-content-image {
    background-position: center;
    background-size: cover;
    height: 300px;
}

@media (min-width: 500px) {
  .wrapper.--home .main-content-image {
    height: 500px;
  }
}

@media (min-width: 768px) {
  .wrapper.--home {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: center;
  }

  .wrapper.--home .main-content-image {
    height: 400px;
  }
}

  .latest-projects{
    width: 100%;
    float: left;
    background-color: #F2F2F2;
    padding: 40px 0px 60px;
  }
  .latest-projects h2{
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
  }
  .inner-latest-projects{
    width: 80%;
    float: left;
    margin-left: 10%;
  }
  .project{
    width: 31.333%;
    margin: 0px 1%;
    float: left;
    margin-bottom: 30px;
  }
  .project p a{
    color: #ffffff;
  }
  figure{
    background-repeat: no-repeat;
    background-size: cover;
    padding: 40% 0px;
    position: relative;
  }
  figure::before{
    content: "";
    background-color: rgba(19,19,109,0.4);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  figure figcaption{
    position: absolute;
    bottom: 30px;
    left: 0px;
    background-color: #13136D;
    width: 80%;
    padding: 10px;
    text-transform: uppercase;
  }
  figure figcaption p{
    color: #ffffff;
  }
  .quote{
    width: 100%;
    float: left;
    background-color: #13136D;
    padding: 40px 0px;
  }
  .inner-quote{
    width: 90%;
    margin:0px 5%;
    text-align: center;
  }
  .inner-quote p{
    text-align: center;
    color: #ffffff;
    font-size: 20px;
  }
  .inner-quote p a{
    padding: 10px 20px;
    border: 1px solid #ffffff;
    border-radius: 10px;
    color: #ffffff;
    margin-left: 15px;
  }
  .inner-quote p a:hover{
    box-shadow: 0px 0px 18px rgba(225, 255, 255, 0.6);
  }
  /*Wordpress single project CSS*/
  .new-project{
    width: 100%;
    float: left;
    padding: 60px 0px;
  }
  .new-project h2{
    text-align: center;
    margin:20px 10px 30px;
  }
  .inner-new-project{
    width: 60%;
    float: left;
    margin: 0px 20%;
    display: grid;
    grid-template-columns: 48% 48%;
    column-gap: 4%;
  }
  .project-block{
    float: left;
    width: 100%;
  }
  .project-block figure{
    padding: 35% 0px;
    background-size: contain;
    background-position-x: center;
    background-color: #0606241f;
  }
  .project-block figure:before{
    position: static;
  }
  .project-block figcaption p{
    padding: 10px;
    text-align: center;
  }
  /*Common Style for pages*/
  .title{
    background-color: #13136D;
    padding: 20px;
    float: left;
    width: 100%;
  }
  .title h1{
    text-align: center;
    color: #ffffff;
  }
  /*Contact Page*/
  .contact-section{
    width: 100%;
    float: left;
  }
  .inner-contact-section{
    width: 60%;
    float: left;
    margin: 40px 20%;
    background-color: #F2F2F2;
    display: flex;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
  }
  .left-contact{
    width: 40%;
    float: left;
    padding: 20px 20px;
  }
  .group{
    margin-bottom: 30px;
  }
  .group i{
    font-size: 1.4em;
    margin-bottom: 15px;
    color: #13136D;
  }
  .right-contact{
    width: 60%;
    float: left;
  }
  form{
    padding: 20px 2em;
  }
  form input, form textarea{
    border: none;
    border-bottom: 1px solid #070000;
    outline: none;
    border-radius: 0px;
  }
  form button:hover{
    box-shadow: 0px 0px 20px rgba(0,0,0,0.6);
  }
  .map{
    width: 80%;
    float: left;
    margin:0px 10% 40px;
  }
  /*Products/Services CSS*/
  .products{
    width: 100%;
    float: left;
    padding: 60px 0px;
  }
  .inner-products{
    width: 70%;
    margin:0px 15%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .product{
    width: 50%;
    float: left;
    margin-bottom: 40px;
  }
  .product-info{
    width: 100%;
    float: left;
    padding: 10px 2em 0px;
  }
  .product-info h2{
    text-align: center;
  }
  .product-info p{
    margin-bottom: 15px;
    color: #555;
  }
  .figure{
    width: 70%;
    float: left;
    margin:0px 15%;
  }
  .product-img{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 40% 0px;
    /*box-shadow: 0px 0px 50px -20px rgba(0, 0, 0, 0.95);
    border: 8px solid #ffffff;*/
  }
  .product .slick-prev:before, .product .slick-next:before{
    color: #000000;
  }
  /*Testimonials CSS*/
  .testimonials{
    width:100%;
    float: left;
    padding:60px 0px;
  }
  .inner-testimonials{
    width: 70%;
    float: left;
    margin:0px 15%;
    display: flex;
    flex-wrap: wrap;
  }
  .testimonial{
    width: 100%;
    float: left;
    padding: 2em;
    background-color: rgba(19,19,109,0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .testimonial i{
    display: block;
    font-size: 2em;
    text-align: center;
    margin-bottom: 20px;
  }
  .testimonial p{
    margin-bottom: 30px;
  }
  .inner-testimonials .slick-track{
    display: flex;
  }
  .inner-testimonials .slick-track .slick-slide{
      display: flex;
      height: auto;
      flex-wrap: wrap;
  }
  .inner-testimonials .slick-track .slick-slide:nth-of-type(2n) .testimonial{
    background-color: #13136D;
  }
  .inner-testimonials .slick-track .slick-slide:nth-of-type(2n) .testimonial p,
  .inner-testimonials .slick-track .slick-slide:nth-of-type(2n) .testimonial i{
    color: #ffffff;
  }
  .inner-testimonials .slick-prev{
      left: -40px;
  }
  .inner-testimonials .slick-next {
    right: -30px;
  }
  /*Latest projects page*/
  .project-single{
    width:100%;
    float: left;
    padding: 60px 0px;
  }
  .inner-project-single{
    width: 70%;
    float: left;
    margin:0px 15%;
  }
  .full-project{
    width: 100%;
    float: left;
    margin-bottom: 30px;
    display: flex;
  }
  .project-img{
    width: 20%;
    float: left;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10% 0px;
  }
  .project-content{
    width: 80%;
    float: left;
    padding: 1em;
    border: 3px solid #f2f2f2;
  }
  /*Footer*/
  footer{
    background-color: #060624;
    padding: 30px 0px;
    width: 100%;
    float: left;
    color: #ffffff;
  }
  .inner-footer{
    width: 80%;
    margin:0px 10%;
    float: left;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .footer-col{
    width:25%;
    float: left;
    margin:0px 1%;
  }

  .footer-col:last-child {
      width: 48%;
  }
  .footer-col img{
    width: 250px;
    margin-left: -15px;
  }
  /*.footer-col:nth-of-type(2){
    padding-left: 5%;
  }*/
  .footer-col h6{
    color: #ffffff;
    text-transform: uppercase;
    font-size: 16px;
  }
  .footer-col p{
    font-size: 14px;
  }
  .footer-col p a{
    color: #ffffff;
  }
  .footer-text{
    text-align: center;
    float: left;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .footer-text p{
    margin-top: 20px;
  }
  .footer-text p:first-child{
    margin-right: 5px;
  }
  .footer-text .owner{
    width: 25px;
    display: inline-block;
    vertical-align: middle;
  }
  /*Media Queries*/
  @media (max-width:1450px){
    .inner-contact-section{
      width: 80%;
      margin: 40px 10%;
    }

    .navigation {
      align-items: center;
    }
  }
  @media (max-width:1200px){
    .navigation{
      grid-template-columns: 20% 62% 18%;
    }
    .logo {
      padding-left: 10%;
    }
    .logo img{
      margin-top: 10px;
    }
    .tel p{
      font-size: 15px;
    }
    .tel p span{
      font-size: 18px;
    }
    .nav li a{
      padding: 10px 8px;
    }
  }
  @media (max-width:991px){
    .inner-latest-projects{
      width: 90%;
      margin-left: 5%;
    }
    .project{
      width:48%;
      margin-bottom: 30px;
    }
    .left-contact{
      width: 40%;
    }
    .right-contact{
      width: 60%;
    }
    .inner-testimonials{
      width: 80%;;
      margin:0px 10%;
    }
    .inner-products{
      width: 80%;
      margin: 0px 10% 30px;
    }
    .footer-col img{
      width: 150px;
    }
    .product{
      width: 100%;
    }
    .inner-project-single{
      width: 80%;
      margin: 0px 10%;
    }
    .project-img{
      width: 50%;
    }
    .project-content{
      width: 50%;
    }
    .nav{
      display: none;
    }
    .icon{
      display: block;
      text-align: right;
      width: 50%;
      float: left;
      padding-right: 20px;
    }
    .icon a{
      font-size: 30px;
    }
    .show-nav{
      display: block;
      width: 100%;
      float: left;
    }
    .show-nav li{
      display: block;
    }
    .show-nav li a{
      display: block;
      padding: 10px 15px;
      color: #343446;
      text-decoration: none;
      font-size: 20px;
    }
    .navigation{
      display: block;
      float: left;
      width: 100%;
      padding: 30px 0px 15px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .logo {
      padding: 0% 10px;
      width: 50%;
      float: left;
    }
    .mobile-tel{
      display: block;
    }
    .tel{
      width: 30%;
      float: right;
      padding: 4% 0px;
      display: none;
    }
    .inner-new-project{
      width:80%;
      margin:0px 10%;
    }
    .inner-contact-section{
      flex-wrap: wrap-reverse;
    }
    .left-contact{
      width: 100%;
    }
    .right-contact{
      width: 100%;
    }
  }
  @media (max-width:768px) {
    .browser-message{
      width: 100%;
    }
    .browser-message p a{
      text-transform: none;
    }
    .main-content{
      width: 90%;
      margin: 0px 5%;
      float: none;
    }
    .project {
      width: 100%;
      margin: 0px 0px 30px;
    }
    .inner-quote a{
      display: inline-block;
      margin-top: 20px;
      width: 50%;
      margin-left: 25%;
    }
    .iframeWrapper{
      padding-bottom: 56.26%;
    }
    .inner-contact-section{
      flex-wrap: wrap-reverse;
      width: 90%;
      margin: 40px 5%;
    }
    .left-contact {
      width: 100%;
    }
    .right-contact{
      width: 100%;
    }
    .map{
      width: 90%;
      margin: 40px 5%;
    }
    .inner-testimonials{
      width: 80%;;
      margin:0px 10%;
    }
    .inner-products {
      width: 90%;
      margin: 0px 5% 30px;
    }
    .product{
      flex-wrap: wrap;
    }
    .product-info{
      width: 100%;
      padding: 10px 0px 0px;
    }
    .figure{
      width: 100%;
      margin: 0px;
    }
    .footer-col{
      width: 98%;
      margin-bottom: 20px;
    }
    .footer-col img {
      width: 250px;
    }
    .inner-project-single{
      width: 90%;
      margin: 0px 5%;
    }
    .full-project{
      flex-wrap: wrap;
    }
    .project-img {
      width: 100%;
      padding: 40% 0px;
    }
    .project-content {
      width: 100%;
    }
    .tel-wrapper{
      width: 40%;
    }
    .mobile-tel{
      padding: 15% 0px;
    }
    .mobile-tel p{
      font-size: 15px;
    }
    .mobile-tel p span{
      font-size: 18px;
    }
    .footer-text{
      display: block;
    }
    .footer-text p:first-child{
      margin-right: 0px;
    }
    .inner-new-project{
      width:90%;
      margin:0px 5%;
      display: block;
    }
    .footer-text p:first-child{
      margin-left: 15px;
      margin-right: 15px;
    }
  }
  @media (max-width:480px){
    .tel-wrapper{
      width: 60%;
    }
    .title h1{
      font-size: 30px;
    }
  }
  @media (max-width:375px){
    .email-address a{
      font-size: 15px;
    }
  }

.email-address {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}
@media (min-width:768px)
{
  .d--hide
  {
    display:none;
  }
}
@media (max-width:768px){
  .size--smaller
  {
    font-size:.9rem !important;
  }
}