@font-face{
    font-family:AP;
     src:url("AltoPro.OTF");
}
@font-face{
    font-family:APM;
     src:url("AltoProM.OTF");
}

body {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #e3e3e3 !important;
line-height: unset !important;
font-family:AP !important;
--desktop-width: 1200px;
--tablet-width: 1024px;
--mobile-width: 414px;
--small--width-gutter: 1.25%;
--card-height-gutter: 40px;
--card-width-gutter:60px;
overscroll-behavior-y: none;
}

/*--------------------------------------------------------------
# Default
--------------------------------------------------------------*/
.lsection{
  width: 100% ;
  color:black;
  overflow-x:hidden;    /*  no scroll to axis x */
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: black!important;
    font-family:AP ;
}
p{ color: black;}

h1 span {
  border-bottom: 2px solid #E74011 !important;
  padding-bottom: 20px;
}

.page-title{
font-size: 20px !important;
margin-bottom: 60px !important;
}


.default-width {
  margin: 0 auto;
  width: 1200px;
  height: auto;
}

.default-ptop{
padding-top: 110px;}


p {
    margin: 0 0 0 0px !important;
}

/*--------------------------------------------------------------
# Media Qeries  Mobile CSSS adapation
--------------------------------------------------------------*/
@media only screen and (max-width: 1920px) {

  .lsection{
    width: 100% ;
    color:black;
    overflow-x:hidden;    /*  no scroll to axis x */
  }
  .default-width {
    margin: 0 auto;
    width: 1200px;
  }
  .page-title{
  font-size: 20px !important;
  margin-bottom: 60px !important;
  }
}

 @media only screen and (max-width: 1024px) {
   h1 span {
 padding-bottom: 16px;
   }
   .default-width {
     margin: 0 auto;
     width: 768px;
   }
   .default-ptop{
   padding-top: 48px;}
   .page-title{
   font-size: 16px !important;
   margin-bottom: 48px !important;
   }
}

@media only screen and (max-width: 896px){
  .default-width {
    margin: 0 auto;
    width: 764px;
  }
}

 @media only screen and (max-width: 768px){
   .default-width {
     margin: 0 auto;
     width: 672px;
   }
}
@media only screen and (max-width: 576px){
  .default-width {
    margin: 0 auto;
    width: 350px;
  }
}
@media only screen and (max-width: 375px){
  .default-width {
    margin: 0 auto;
    width: 350px;
  }
}



/*--------------------------------------------------------------
# Slideshow
--------------------------------------------------------------*/
.sssection{
display: flex;
justify-content: center;
font-family:AP !important;
padding-top: 180px;
}



.sscontent {
display: inline-block !important;
}

div.bxslider {
  position: relative;
  text-align: center;
  color: #fff;
  font-size: 60px;
  margin: 0;
  padding: 0;
  transition: transform 5s;
  transition-duration: 0.1s;
  -ms-transform: scale(1.1) translate3d(-3030px, 0px, 0px); /* IE 9 */
  -webkit-transform: scale(1.1) translate3d(-3030px, 0px, 0px); /* Safari 3-8 */
  transform: scale(1.1) translate3d(-3030px, 0px, 0px);
  }

.bx-viewport {
   height: auto;
}
  div.slide {
      margin-left: 5px;
      margin-right: 5px;
      width: 1000px !important;
  }


  .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    padding-left: 19.4%;
  }

  .wp-caption .wp-caption-text {
      margin: 0 !important;}


  .wp-caption-text {
    text-align: left!important;
    position: absolute!important;
    top: 78px!important;
    left: 100px;
    text-shadow: 0px 0px 5px #00000020;
}


.wp-caption {
    margin-bottom: 0px !important;
    max-width: 100% !important;
}
.active-slide {
      transition-duration: 1s;
      transition-timing-function: ease-in;
      transform: scale(1.14);
      z-index: 9999999;
    }



    /* Animation */

  /* .wp-caption-text{
    display: none;
  }

  div.slide  .wp-caption-text {
    position: relative;
    animation: myslidecaption 2.1s 1;
  }
  @keyframes myslidecaption {
  0% { transform: translate3d(-100%,0, 0); }
  25% { transform: translate3d(0, 0, 0); }
  } */

    /*--------------------------------------------------------------
    # Media Qeries  Mobile CSSS adapation
    --------------------------------------------------------------*/
    @media only screen and (max-width: 5120px)  {
        .wp-caption-text {
        left: 100px ;
        }
        .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
        padding-left: 26.8%;
        }

       }

       @media only screen and (max-width: 1920px)  {
           .wp-caption-text {
           left: 100px ;
           }
           .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
           padding-left: 19.4%;
           }

          }

    @media only screen and (max-width: 1024px) {
      .sssection {
          padding-top: 108px;
      }
      .bx-wrapper {
        max-width: 100vw !important;
      }

      .bx-viewport {
          padding: 0px 0px 0 0px !important;
      }
      div.slide {
          margin-left: 0px;
          margin-right: 5px;
          width: 1000px !important;
      }
      div.bxslider {
    font-size: 50px;
}
      .slive figure {
        width: 100vw;
      }
      .wp-caption-text {
        top: 92px!important;
        left: 12.8%;
    }
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
      padding-left: 12.2%;
    }

    }

    @media only screen and (max-width: 896px)  {
        .wp-caption-text {
        left: 6.5% ;
        }
        .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
        padding-left: 6.8%;
        }

       }

  @media only screen and (max-width: 834px) {
      .wp-caption-text {
      left: 3.5%;
      }
      .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
      padding-left: 3.8%;
      }

     }


@media only screen and (max-width: 769px) {
  .sssection {
      padding-top: 85px;
  }
    div.slide {
        margin-left: 0px !important;
        margin-right: 0px!important;
        width: 100vw !important;
    }
    .wp-caption-text {
    left: 6.2%;
  }
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
      padding-left: 5.6%;
    }

  }
  @media only screen and (max-width: 414px) {
    .wp-caption-text {
    left: 8.2%;
    }
    .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    padding-left: 7.1%;
    }
    }


    @media only screen and (max-width: 375px) {
      .wp-caption-text {
      left: 8.5%;
      }
      .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
        padding-left: 7.4%;
      }
      }



/*--------------------------------------------------------------
# About us
--------------------------------------------------------------*/

 .asection{
padding-top: 90px !important;
}


.asection p {
  margin:0px !important;

}

.Acontent{
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: none;
}

.Acontent h3 {
font-size:38px !important;
margin-bottom: 38px!important;

}

.Acontent p {
font-size:30px !important;
line-height: 38px;

max-width: 600px;
}

.asection img {
width: 800px;
height: auto;
margin: 45px 0 0 0;}

  /*--------------------------------------------------------------
  # Media Qeries  Mobile CSSS adapation
  --------------------------------------------------------------*/

   @media only screen and (max-width: 1024px) {
     .Acontent h3 {
    font-size:26px !important;
    margin-bottom: 26px!important;

     }
     .Acontent p {
    font-size: 20px !important;
    line-height: 26px;
    hyphens: none;
    max-width: 384px;

     }
     .asection{
     padding-top: 60px !important;
     }
     .asection img {
     width: 512px;
     margin: 45px 0 0 0;}
  }

  @media only screen and (max-width: 414px) {
    .Acontent p {
   max-width: 350px;

    }
    .asection img {
    width: 350px;
    margin: 45px 0 0 0;}
 }


/*--------------------------------------------------------------
# Our Work
--------------------------------------------------------------*/

 .wsection{
  padding-top: 90px !important;
 }

 .wcontent {
 display: inline-block !important;
 }
 .iifcont {
   display: grid;
   height: 650px;
   gap:0 1.25%;
   margin-top:15px;
 }

 .iifcontent-double{
   grid-template-columns: repeat(auto-fill, minmax(48.75%,1fr));

 }
 .iifcontent-three{
   grid-template-columns: repeat(auto-fill, minmax(32.5%,1fr));
 }

  .iifitem {
 /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
  background-color: #F2F2F2;}

  .iifitem img{
  width:100%;
  height:100%;

  }


  .iicat {
  font-size:14px !important;
  color:#E74011!important;
  margin-bottom: 7px;
  }
  .iipr {
  line-height: 40.8px !important;
  font-size:34px !important;
  }
  .iipd {
  line-height: 26.4px !important;
  font-size:22px !important;
  }
  .iilo{
  font-size:14px !important;
  line-height: 16.8px !important;
  margin-top: 0px;
  }


 .iiifitems {
   /* To correctly align image, regardless of content height: */
      vertical-align: top;
      display: inline-block;
      /* To horizontally center images and caption */
      text-align: center;
      background-color: #F2F2F2;
  }



    .iicaption {
        /* Make the caption a block so it occupies its own line. */
        display: block;
        text-align: left;
        height: 310px;
        width: 472.5px;
        padding-left: 60px;
        padding-top: 40px;
        overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
      }

      .iiicaption {
          /* Make the caption a block so it occupies its own line. */
          display: block;
          text-align: left;
          height: 350px;
          width: 270px;
          padding-left: 60px;
          padding-top: 40px;
          overflow-wrap: break-word;
  word-wrap: break-word;
  /* hyphens: auto; */
        }
 /*--------------------------------------------------------------
 # Media Qeries  Mobile CSSS adapation
 --------------------------------------------------------------*/
 @media only screen and (max-width: 1024px) {
   .iifcont {
     display: grid;
     height: 432px;
     gap:0 1.25%;
     margin-top:15px;
   }
   .iicat {
   font-size:12px !important;
   margin-bottom: 7px;
   }
   .iipr {
   line-height: 27.6px !important;
   font-size:23px !important;
   hyphens: none;
   }
   .iipd {
   line-height:19.2px !important;
   font-size:16px !important;
   }
   .iilo{
   font-size:12px !important;
   line-height: 0px !important;
   margin-top: 0px;
   }


   .iicaption {
     padding-left: 32px;
     padding-top: 24px;
     height: 242.5px;
     width: 312.5px;}

     .iiicaption {
       padding-left: 32px;
       padding-top: 24px;
       height: 242.5px;
       width: 312.5px;}

}

@media only screen and (max-width: 896px) {
  .iifcont {
    display: initial;}
  .iifitem {
  display: inline-grid;
  margin-bottom: 16px;
  }

  .iicaption {
    width: 312.5px;}

    .iiicaption {
      height: 229px;
      width: auto;
      }

}

@media only screen and (max-width: 769px) {
  .iicaption {
    width: 312.5px;}

    .iiicaption {
      height: 229px;
      width: auto;
      }

}
@media only screen and (max-width: 414px) {
.iifcont {
  display: initial;}
.iifitem {
display: inline-grid;
margin-bottom: 16px;
}

}
 /*--------------------------------------------------------------
 # Our services
 --------------------------------------------------------------*/

.ssection{
width: 100%;
font-family:AP !important;
padding-top: 90px !important;

 }

 .scontent {
   display: inline-block !important;
  height: auto;
  background-color: white;
  width: 100%;
 }

 .scontainer{
   display: flex;
   align-items: center;
   justify-content: space-around;

 }
 .sitem img{
   border: 1px;
     height: 200px;
     border-radius: 50%;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     width: 200px;
 }

 .scap{
   font-size:28px !important;
   text-align: center !important;
   margin-top: 20px;
   margin-bottom: 47px;

 }



 /*--------------------------------------------------------------
 # Media Qeries  Mobile CSSS adapation
 --------------------------------------------------------------*/
 @media only screen and (max-width: 1024px) {
   .sitem img {
       height: 100px;
       width: 100px;
   }
   .scap{
     font-size:16px !important;
   }

 }
 /*--------------------------------------------------------------
 # Our clients
 --------------------------------------------------------------*/

 .clsection{
   font-family:AP !important;
  margin-top: 90px ;

 }

 .clcontent {
 display: inline-block ;
 height: auto;
 width: 100%;
 }

 .clcontainer{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 40px;

 }
 .clitem img{
   border: 1px;
     height: 100px;
     width: 100px;
 }
 .clitem p {
   margin:0 !important;
 }

 .clcontent hr {
   margin-top: 15px!important;
   margin-bottom: 15px!important;
   border: 0 !important;
   border-top: 1px solid #FFF!important;
 }

 .clitem .blackwhite{
   display:inline;
 }

 .clitem:hover .blackwhite {
     display: none;
 }


 .clitem .colored{
   display:none;
 }

 .clitem:hover .colored{
 display:inline;
 }



 /*--------------------------------------------------------------
 # Media Qeries  Mobile CSSS adapation
 --------------------------------------------------------------*/
 @media only screen and (max-width: 1024px) {

   .clcontainer{
     margin-top: 12px;

   }
   .clitem img{
       height: 50px;
       width: 50px;
   }
   .clcontent hr {
     margin-top: 8px!important;
     margin-bottom: 8px!important;

   }
 }
 /*--------------------------------------------------------------
 # People
 --------------------------------------------------------------*/

 .psection{

   font-family:AP !important;
       margin-top: 90px ;

 }


 .pcontent {
   display: inline-block;
      height: 510px;
      width: 100%;
      background-color: white;
 }


 .pcontainer{
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 .pitem img{
   border: 1px;
     height: 200px;
     border-radius: 50%;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     width: 200px;
 }

 .pcap{
   font-size:28px !important;
   text-align: center !important;
   margin-top: 30px;
   margin-bottom: 47px;

 }

 .pcap h6 {
font-size: 22px !important;

 }

 /*--------------------------------------------------------------
 # Media Qeries  Mobile CSSS adapation
 --------------------------------------------------------------*/
 @media only screen and (max-width: 1024px) {
   .pcontent {
        height: 244px;
   }
   .pitem img{
       height:100px;
       width: 100px;
   }
   .pcap {
  font-size: 16px !important;
  margin-top: 30px;
  margin-bottom: 47px;

   }
   .pcap h6 {
  font-size: 12px !important;
  line-height: 15px;
  margin: 0;
   }

}



/*--------------------------------------------------------------
   # Our Awards
--------------------------------------------------------------*/
 .awsection{

   font-family:AP !important;
       margin-top: 90px;

 }

 .awcontent {
 display: inline-block !important;
 height: auto;
 width: 100%;
 }

 .awcontainer{
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 40px;
 }
 .awitem img{
   border: 1px;
     height: 100px;
     width: 100px;
 }
 .awitem p {
   margin:0 !important;
 }

 .awcontent hr {
   margin-top: 40px!important;
   margin-bottom: 40px!important;
   border: 0 !important;
   border-top: 1px solid #FFF!important;
 }

 .awitem .blackwhite{
   display:inline;
 }

 .awitem:hover .blackwhite {
     display: none;
 }


 .awitem .colored{
   display:none;
 }

 .awitem:hover .colored{
 display:inline;
 }

 /*--------------------------------------------------------------
 # Media Qeries  Mobile CSSS adapation
 --------------------------------------------------------------*/
 @media only screen and (max-width: 1024px) {

   .awcontainer{
  margin-top: 12px;
   }
   .awitem img{
       height: 50px;
       width: 50px;
   }
   .awcontent {
   display: inline-block !important;
   height: 208px;
   width: 100%;
   }

   .awcontent hr {
     margin-top: 27px!important;
     margin-bottom: 27px!important;
   }

}

 /*--------------------------------------------------------------
 # Contact us
 --------------------------------------------------------------*/

 .csection{
   padding-top: 90px !important;
    padding-bottom: 150px !important;
 }


 .ccontent {
 display: inline-block !important;
 }


 /*Two  frame blocks */

 /* work items displaying */
 .cfcont {
   display: inline-flex;
    flex-direction: row ;
   justify-content: flex-end;
   height: 700px;
 }

  .cfitem {
 /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
  background-color: #F2F2F2;}

  .cfitem img{
  width:592px !important;
  height:333px !important;
  }
  .cfitemR {
 background-color: #F2F2F2;
     margin-left: 15px;
  }
  .cfitemR img{
  width:592px !important;
  height:333px !important;

  }
 .cop{
   position: relative;

 }

 .overlay{
   position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     right: 0;
     bottom: 0;
     background-color: rgba(0,0,0,0.5);
     z-index: 0;
     width: 100%;
     height: 100%;
 }
  .center {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 38px;
   color: white !important;
 }

  .ccaption {
      /* Make the caption a block so it occupies its own line. */
      display: block;
      text-align: left;
      height: 310px;
      width: 472.5px;
      padding-left: 60px;
      padding-top: 40px;
      overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: none;
    }

  .ccd {
  line-height: 33.6px !important;
  font-size:28px !important;
  }
  .cmail{
  font-size:22px !important;
  line-height: 26.4px !important;
  margin-top: 20px;
  }

  .ccaption a{
      color:black !important;
      text-decoration: none !important;
      }

    .ccaption a:hover {
      color: #E74011 !important;
      }
/*--------------------------------------------------------------
      # Media Qeries  Mobile CSSS adapation
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
  .center {
   font-size: 26px;
  }
  .ccd {
  line-height: 21.6px !important;
  font-size:18px !important;
  }
  .cmail{
  font-size: 16px !important;
  line-height: 19.2px !important;
    margin-top: 0px;
  }

  .ccaption {
    padding-left: 32px;
    padding-top: 24px;
    height: 216px;
    width: 312.5px;}
}