@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

* {margin: 0; padding: 0;}
section {
   padding: 80px 0px;
}

body {
   font-family: 'Work Sans', sans-serif;
   font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
   font-family: 'Oswald', sans-serif;
   font-weight: 500;
}
.topbarMain {
   background: #f5f5f5;
   height: 50px;

}

.container {
   width: 1000px;
   padding-right: 15px;
   padding-left: 15px;
   margin: auto;
}

.phone {
   width: 210px;
   float: left;
   border-right: 1px solid #ddd;
   border-left: 1px solid#ddd;
   padding: 15px 10px

}
.phone i {
color: #ff5200;
}
.phone i:hover {
color: black;
transition: 0.3s;
}
.email {
   width: 600px;
   float: left;
   padding: 15px 10px;
}
.email i {
color: #ff5200;
}
.email i:hover {
color: black;
transition: 0.3s;
}
.social {
   float: left;
}

.social i:hover {
color: #ff5200;
transition: 0.3s;
}
.topbarWrapper {
   overflow: hidden;
}
.social a {
   display: block;
   float: left;
   padding: 15px;
   color: #2b2b2b;
   border-left: 1px solid #ddd;
  }
  .social i {
   color: #2b2b2b;
  }
.social a:last-child {
border-right: 1px solid #ddd;
}

.primaryWrapper {
   display: table;
   width: 100%;
}

.logo {
   width: 150px;
   float: left;
   margin-top: 20px;
}

.menu {
   width: 850px;
   float: left;
}

.menu ul {
   list-style: none;
   float: right;
}

.menu ul li {
   float: left;
   position: relative;
}

.menu ul li a {
   text-decoration: none;
   font-family: Oswald;
   text-transform: uppercase;
   font-size: 16px;
   display: block;
   padding: 30px 15px;
   color: #0e0e0e;
   font-weight: 500;
   transition: 0.5s;
}

.menu ul li a:hover {
  color: #ff5200;
}
#searchBtn a i {
color: #0e0e0e;
}
#searchBtn:hover a i {
color: #ff5200;
}

#homeSlider {
  background: url(../images/slide-2.jpg) ;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 82px;
  padding: 0px;
}

.sliderContent {
  color: white;
  width: 600px;
}

.sliderContent h1 {
font-size: 55px;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 30px;
margin-top: 160px;
float: left;

}

.sliderContent p {
font-weight: 600;
line-height: 25px;
width: 380px;
margin-bottom: 30px;
}

#sliderWorkbutton {
background: #ff5200;
color: white;
border: none;
padding: 15px 30px;
border-radius: 3px;
font-size: 15px;
font-weight: 600;
margin-bottom:100px;
transition: 0.6s;
letter-spacing: 1px;
}
#sliderWorkbutton:hover {
background: #2b2a2a;
}
.sliderNav {
   width: 60px;
   margin: auto;
   padding: 60px 0px;
}
.sliderNav span {
   width: 9px;
   height: 9px;
   background: transparent;
   border: 4px solid #ddd;
   display: block;
   border-radius: 100%;
   cursor: pointer;
   float: left;
   margin: 4px 4px;

}
.sliderNav span:last-child {
   background: #ff5200;
   border-color: #ff5200;
}

#services {
   background: #f5f6f6;
}
.sboxWrapper {
   overflow: hidden;
}
.singleBox {
  width: 192px;
  background: white;
  padding: 20px;
  float: left;
  margin-right: 17px;
  border-radius: 4px;
  transition: 0.3s;
}
.singleBox:hover {
   background-color:#ff5200;
   color: white;
   cursor: pointer;
}
.singleBox i {
   color:#ff5200;
}
.singleBox:hover .sboxIcon i {
   color: white;
}
.singleBox:hover h2, i {
   color: white;
}
.singleBox:hover .sboxLink a {
   color: white;
}
.singleBox:hover i.fa-arrow-right {
   color: white;
}
.singleBox i.fa-arrow-right {
   color: #ff5200;
}
.sboxIcon {
text-align: center;
font-size: 40px;
color: #ff5200;
margin: 15px 0px;
}
.sboxDesc {
text-align: center;
margin: 15px 0px;
}
.sboxLink {
text-align: center;
margin: 15px 0px;
}
.sboxLink a {
text-decoration: none;
color: #ff5200;
font-weight: 500;
}
.sboxTitle {
   text-align: center;
   width: 150px;
   margin: auto;
}
.sboxTitle h2 {
   font-size: 20px;
   letter-spacing: -1.1px;
   color: #333;
   line-height: 28px;
   text-transform: uppercase;
   margin: 25px 0px;
}
.sboxActive {
   background: #ff5200;
   color: white;
}
.sboxActive h2 {
   color: white;
}
.sboxActive a {
   color: white;
}
.sboxActive i {
   color: white;
}
.sboxActive i.fa-arrow-right {color: white;}

.teamContent {
   overflow: hidden;
}

.teamImage {
   width: 480px;
   float: left;
}

.teamImage img {
   max-width: 100%;
}

.teamDetails {
   width: 480px;
   float: right;
}

.teamDesc h2 {
font-size: 35px;
margin-bottom: 12px;
}

.teamDesc p {
color: #656565;
text-transform: capitalize;
line-height: 20px;
margin-bottom: 25px;
}
.teamFacilities ul {
margin: 0px;
padding: 0px;
list-style: none;
width: 240px;
float: left;
}
.teamFacilities ul li {
line-height: 40px;

}

.teamFacilities ul li a {
color: #333333;
text-decoration: none;
font-weight: 500;
font-size: 18px;
transition: 0.3s;
}
.teamFacilities {
overflow: hidden;
padding-bottom: 17px;
}
.teamFacilities ul li a i {
color: #333333;
font-size: 10px;

}
.teamFacilities ul li:hover a {
color: #ff5200;
}
.teamFacilities ul li:hover i {
color: #ff5200;
}

.teamContactBtn a {
background: #ff5200;
color: white;
padding: 18px;
text-decoration: none;
font-weight: 600;
font-size: 20px;
display: block;
width: 130px;
text-align: center;
border-radius: 4px;
margin-top: 8px;
transition: 0.3s;
}
.teamContactBtn a:hover {
color: white;
background: #333;
}

#whyChooseus {
   background: linear-gradient(#00000085, #00000085), url(../images/customerNum.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
}

.iconWrapper {
   overflow: hidden;
}

.singleIcon {
   width: 180px;
   text-align: center;
   color: white;
   float: left;
   margin-right: 50px;
}

.sIcon {
   font-size: 40px;
   margin-top: 14px;
}

.singleIcon h2 {
   font-size: 60px;
   font-weight: 700;
   letter-spacing: 1px;
   margin: 15px;
   font-family: 'Work Sans', sans-serif;
}
.singleIcon h4 {
   font-size: 19px;
   margin-bottom: 14px;
}
.singleIcon:first-child {
  margin-left: 60px;
}

#blogPost {
    background: #f5f6f6;
}
.secTitle {
    text-align: center;
    margin-bottom: 45px;
}
.secTitle h2 {
  font-size: 42px;
  margin-bottom: 25px;
  position: relative;
}
.secTitle h2:after {
    content: "";
    width: 55px;
    height: 2.5px;
    position: absolute;
    left: 50%;
    background: #ff5200;
    top: 105%;
    transform: translate(-49%, -105%);
    margin-top: 8px;
  }
  .secTitle p {
    width: 500px;
    margin: auto;
    line-height: 22px;
    font-size: 15px;
    color: #666;
  }
  .postWrapper {
    overflow: hidden;
  }
  .singlePost {
    width: 230px;
    overflow: hidden;
    float: left;
    margin-right: 25px;
  }
  .singlePost:last-child {
    margin-right: 0px;
  }
.singlePost img {
  width: 100%;
}
.postImage {
  margin-bottom: 10px;
}
.postInfo p {
  margin-top: 10px;
  color: #666;
  line-height: 22px;
}

.tableList {
    display: table;
    margin-bottom: 110px;
}
.singleTable {
    width: 250PX;
    overflow: hidden;
    float: left;
    border: 1px solid #eaeaea;
    padding: 30px;
    margin-right: 17px;
    border-radius: 4px;
    background: #ffffff;
}
.singleTable h3 {
    font-size: 25px;
    margin-top: 11px;
}
.singleTable h1 {
    font-size: 55px;
    font-family: arial;
    font-weight: 600;
    margin: 15px 0px;
}
.singleTable h1 span {
    font-size: 20px;
    font-weight: 600;
    font-family: arial;
}
.singleTable ul {
    list-style: none;
}
.singleTable ul li {
    line-height: 35px;
    color: #57647c;
}
.singleTable ul li i {
    color: #ff5200;
    font-size: 10px;
}
button#tableGetStarted {
    background: #ff5200;
    color: white;
    border: none;
    padding: 15px 32px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 17px;
    font-family: 'Oswald';
    margin: 20px 0px;
    letter-spacing: 1px;
    transition: 0.3s;
}
button#tableGetStarted:hover {
    background: #2b2a2a;
    color: white;
    cursor: pointer;
}
.singleTable:last-child {
    margin-right: 0px;
    box-shadow: 20px 0px 8px #f6f6f6;
}
.singleTable:first-child {
  box-shadow: -20px 0px 8px #f6f6f6;
}

#pricing {
  background: #fafafa;
}

.ideaLeftImg {
  background: url(../images/idea1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 50%;
  float: left;
  position: absolute;
  height: 100%;
  overflow: hidden;
}

section#ideas {
    overflow: hidden;
    position: relative;
    padding: 0px;
}

.rightContent {
    width: 50%;
    float: right;
    overflow: hidden;
    background: #222222;
    color: white;
    /* height: 100%; */
    display: block;
}

.rContentTitle {
    padding:50px;
    padding-bottom: 0px;
    margin-bottom: 50px;
}
.rContentTitle h1 {
    font-size: 30px;
    margin-bottom: 35px;
}
.rContentTitle p {
    line-height: 25px;
}
.rContentIcon {
     overflow: hidden;

  
}
.riconSingle {
    width: 300px;
    float: left;
    overflow: hidden;
    margin-bottom: 40px;
    padding-left: 50px;
}
.rIcon i {
    width: 60px;
    overflow: hidden;
    float: left;
    font-size: 50px;
    color: #ff5200;
    padding-top: 12px;
    text-align: center;
  
}
.riconTitle {
    width: 200px;
    overflow: hidden;
    float: right;
}
.riconTitle h2 {
    font-size: 20px;
    margin-bottom: 10px;
    transition: 0.3s;
    cursor: pointer;
}
.riconSingle:hover h2 {
    color: #ff5200;
}
.riconTitle p {
    font-size: 16px;
    color: #ddd;
}

#ourTeam {
  padding-top: 150px;
}

.teamPersons {
    overflow: hidden;
}

.singlePerson {
    width: 235px;
    overflow: hidden;
    float: left;
    margin-right: 15px
}

.singlePerson:last-child{
    margin-right: 0px;
}
.singlePerson img {
    width: 100%;
    transition: 0.3s;
}
.personInfo {
    padding: 15px;
    text-align: center;
}
.personInfo p {
    color: #656565;
    margin-top: 4px;
}
.joinTeamButton {
    padding: 50px;
    display: grid;
    place-items: center;
}
.joinTeamButton button {
    background: #2b2a2a;
    color: white;
    border: none;
    padding: 16px 35px;
    font-family: Oswald, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 500;
    border-radius: 4px;
    transition: 0.3s;
}
.joinTeamButton button:hover {
    background: #ff5200;
    cursor: pointer;
}
.personImg {
  overflow: hidden;
  position: relative;
}
.socialIcons {
  width: 154px;
  position: absolute;
  bottom: 50px;
  text-align: center;
  left: 50%;
  transform: translateX(-50%);
}
.socialIcons a {
  width: 20px;
  height: 20px;
  display: block;
  float: left;
  overflow: hidden;
  background: red;
  display: grid;
  place-items: center;
  text-decoration: none;
  border-radius: 100%;
  padding: 4px;
  color: white;
  margin: 5px;
  transition: 0.3s;
}
.socialIcons a:first-child {
  background: #3b5998;
  opacity: 0;
  transition: 0.90s;
}
.socialIcons a:nth-child(2) {
  background: #00ACEE;
  opacity: 0;
  transition: 0.70s;
}
.socialIcons a:nth-child(3) {
  background: #DB4A39;
  opacity: 0;
  transition: 0.50s;
}
.socialIcons a:last-child {
  background: #0072b1;
  opacity: 0;
  transition: 0.30s;
}
.socialIcons a:hover {
 background: white;
 color: black;
}
.socialIcons a i:hover {
 color: black;
}
.socialIcons i {
 height: 100%;
 width: 100%;
 padding-top: 4px;
}
.singlePerson:hover .socialIcons a:first-child {
 transform: translateY(20px);
 opacity: 1;
}
.singlePerson:hover .socialIcons a:nth-child(2) {
 transform: translateY(20px);
 opacity: 1;
}
.singlePerson:hover .socialIcons a:nth-child(3) {
 transform: translateY(20px);
 opacity: 1;
}
.singlePerson:hover .socialIcons a:last-child {
 transform: translateY(20px);
 opacity: 1;
}
.singlePerson:hover .personImg img {
  transform: scale(1.1);
}
.personImg:hover {
  cursor: pointer;
}

#projects {
 background: #f5f6f6;
}

.projectWrapper {
   overflow: hidden;
   column-count: 3;
   margin: 20px;  
}

.singleProject {
   width: 300px;
   float: left;
   margin: 18px;
   position: relative;
   overflow: hidden;
   margin-bottom: 0px;
}
.singleProject:last-child {
   margin-right: 0px;
}
.singleProject img {
   width: 300px;
}
.projectInfo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
  padding: 20px 20px;
  background: linear-gradient(to top, black, transparent 140px);
  color: white;
  overflow: hidden;
  padding-bottom: 0px;
  transition: 0.3s;
}
.projectMeta {
  width: 260px;
  margin-bottom: 0px;
}
.projectMeta a {
  color: white;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}
a#learnMoreBtn {
  display: block;
  color: white;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transform: translateX(-125px);
  visibility: hidden;
  padding-top: 20px;
  
}
a#learnMoreBtn i {
  font-size: 15px;
  font-weight: 600;
}
.singleProject:hover .projectInfo {
  padding-block: 45px 35px !important;
  background: linear-gradient(to top, black, transparent 180px) !important;
}
.singleProject:hover a#learnMoreBtn {
  transform: translateX(0px);
  visibility: visible;
  transition: 0.3s;
  transition-delay: 0.3s;
  transition-timing-function: cubic-bezier(0, 0.43, 0.15, 1.09);
}

.newsWrapper {
   overflow: hidden;
}

.singleNews {
   width: 310px;
   margin: 10px;
   float: left;
   overflow: hidden;
   margin-bottom: 30px;
}
.singleNews:last-child {
   margin-right: 0px
}
.newsImage {
   overflow: hidden;
}
.newsImage img {
   width: 100%;
   transition: 0.3s;
   cursor: pointer;
}
.newsImage:hover img {
   transform: scale(1.1);
}
.newsMeta {
   padding: 25px;
   border-left: 1px solid #e9e9e9;
   border-right: 1px solid #e9e9e9;
   border-bottom: 1px solid #e9e9e9;
}

.newsCatagory {
   margin-bottom: 15px;
   overflow: hidden;
   position: relative;
}
.newsCatagory::after {
  content: "";
  width: 20px;
  border-bottom: 2px solid #ff5200;
  position: absolute;
  top: 10px;
  left: 100px;
  
}
.newsCatagory a {
   text-decoration: none;
   color: #777777;
   font-weight: 500;
   display: block;
   width: 120px;
   float: left;
}
.newsCatagory a:first-child {
  color: #a9a5a5;
}
.newsCatagory a:last-child {
   margin-left: 8px;
  transition: 0.3s;
 }
.newsCatagory a:last-child:hover {
  color: #ff5200;
}
.newsTitle h2 a {
  color: #333333;
  text-decoration: none;
  transition: 0.3s;
}
.newsTitle h2:hover a {
  color: #ff5200;
}
.newsTitle h2 {
   margin-bottom: 12px;
   font-size: 20px;
}
.newsTitle p {
  color: #727272;
  margin-bottom: 15px;
  line-height: 25px;
}
a#newsReadMore {
  color: #ff5200;
  text-decoration: none;
  font-weight: 600;
}
a#newsReadMore i {
  color: #ff5200;
  font-weight: 600;
  font-size: 12px;
}

footer#footer {
    background: #1a1a1a;
    padding-top: 200px;
}

.copyrightContainer {
    overflow: hidden;
    color: #999;
    border: 1px solid #333;
}
.copyrightContainer .container {
  overflow: hidden;
}
.copyrightText {
  width: 510px;
  float: left;
  padding: 25px 0px;
}
.copyrightText a {
  color: #ff5200;
  text-decoration: none;
  font-weight: 500;
  font-size: 17px;
  font-family: "Open Sans", sans-serif;
}
.copyrightMenu {
  width: 440px;
  float: right;
}
.copyrightMenu ul {
  list-style: none;
  float: right;
  overflow: hidden;
}
.copyrightMenu ul li {
  float: left;
}
.copyrightMenu ul li a {
  color: #ababab;
  display: block;
  padding: 25px 15px;
  text-decoration: none;
}
.fboxWrapper {
   overflow: hidden;
   margin-bottom: 30px;
}

.fbox {
   overflow: hidden;
   width: 220px;
   float: left;
   margin-right: 30px;
   color: #ababab;
}
.fbox:last-child {
   margin-right: 0px
}
.fbox h3 {
   color: #ffffffe6;
   margin-bottom: 23px;
   
}
.fbox p {
   line-height: 24px;
   font-size: 14px;
   margin-bottom: 25px;
}
span#contacts {
   display: block;
   margin-bottom: 15px;
   font-size: 14px;
}
span#contacts i {
   color: #ff5200;
   margin-right: 10px;
}
ul#ufLinks {
   list-style: none;
}
ul#ufLinks li {
   line-height: 12px;
}
ul#ufLinks li a {
   color: #ababab;
   text-decoration: none;
   display: block;
   padding: 15px 0px;
   border-bottom: 1px dashed #393737;
   transition: 0.3s;
}
ul#ufLinks li a i {
  font-size: 10px;
  color: #ababab;
  font-weight: 600;
}
ul#ufLinks li:last-child a {
  border-bottom: 0px;
}
ul#ufLinks a:hover {
  color: #ff5200;
}
ul#ufLinks a:hover i {
  color: #ff5200;
}
.fRPostMeta {
    width: 40px;
    background: #ffffff1a;
    padding: 3px 8px;
    border-radius: 3px;
    color: white;
    float: left;
    text-align: center;
}
.fRPostMeta span:first-child {
  font-weight: 900;
  font-size: 20px;
}
.fRPostMeta span:last-child {
  font-weight: 700;
  font-size: 12px;
  margin-top: 3px;
  display: block;
  line-height: 28px;
}
.fRPostTitle {
    width: 150px;
    float: right;
    padding-left: 10px;
}
.fRPostTitle h3 {
    margin: 0;
    margin-bottom: 10px;
    font-size: 12px;
    color: #ababab;
    transition: 0.3s;
} 
.fRPostTitle h3:hover {
  color: #ff5200;
}
.fRPostTitle a {
    color: #ababab;
    text-decoration: none;
    font-size: 13px;
    margin-right: 5px;
}
.fRPostTitle i {
    color: #ababab;
    font-size: 13px;
}
.fRPost {
    margin-bottom: 30px;
    float: left;
}
.fIcons i {
    display: block;
    width: 20px;
    display: grid;
    place-items: center;
    padding: 5px;
    float: left;
    margin-right: 8px;
    color: #ababab;
    transition: 0.3s;
  text-decoration: none;
}
.fIcons i:hover {
  color: #ff5200;
}
.subsBoxWrapper {
   overflow: hidden;
   background: #ff5200;
   border-radius: 3px;
   padding-bottom: 20p
}

.subsBoxSingle {
   width: 270px;
   float: left;
   padding: 30px;
   overflow: hidden;
   color: white;
   padding-bottom: 25px;
}
.subsBoxSingle:last-child {
   margin-right: 0px;
}
.subsBoxSingle h2 {
   color: white;
   margin-bottom: 18px;
   font-size: 21px;
}
.subsBoxSingle p {
  margin-bottom: 10px;
}
.inputbox {
   overflow: hidden;
}
.inputbox input:first-child {
   width: 100%;
   padding: 15px;
   border: none;
   border-bottom-left-radius: 50px;
   border-top-left-radius: 50px;    
   letter-spacing: 1px;
   font-size: 12px;
}
.inputbox {
   position: relative;
}
.inputbox input:first-child {
   width: 80%;
   padding: 15px;
   border: none;
   border-bottom-left-radius: 50px;
   border-top-left-radius: 50px;    
   letter-spacing: 1px;
   font-size: 12px;
}

input#subsSubmit {
   padding: 14px;
   border: none;
   background: black;
   color: white;
   font-weight: 500;
   letter-spacing: 1px;
   font-size: 15px;
   width: 120px;
   border-radius: 50px;
   position: absolute;
   top: 0;
   right: 0;
}
.subsFollowIcon {
    overflow: hidden;  
}

.subsFollowIcon a {
    width: 35px;
    height: 35px;
    float: left;
    border: 1px solid white;
    display: grid;
    place-items: center;
    border-radius: 100%;
    margin-right: 10px;
    color: white;
    text-decoration: none;
    transition: 0.3s;
}
.subsFollowIcon a:hover {
    background: white;
    color: black;
}
.subsFollowIcon a:hover i {
    color: black;
}
section#subscribe {
  position: relative;
  margin-bottom: -125px;  
}
ul.subMenu { 
  list-style: none;
  width: 200px;
  position: absolute;
  top: 83px;
  background: white;
  border-top: 1px solid #ddd;
  padding: 20px 35px;
  visibility: hidden;
  transform: scaleY(0);
  transition: 0.3s;
  transform-origin: top; 
 ;
}
ul.subMenu li {
  float: none;
  position: relative;
}
ul.subMenu li a {
  display: block;
  padding: 10px;
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
   position: relative;
  transition: 0.6s;
  
}
ul.subMenu li a:before {
  content: "";
  display: inline-block;
  background: #ff5200;
  width: 0px;
  height: 2px;
  vertical-align: middle;
  margin-right: 10px;
  transition: 0.6s;
}
ul.subMenu li:hover a:before {
  width: 20px;
}
.menu ul li:hover ul.subMenu{
  visibility: visible;
  transform: scaleY(1);
}
.menu ul li:nth-child(2) i {
  color: #231111;
  font-size: 14px;
  padding-left: 4px;
  transition: 0.3s;
}
.menu ul li:nth-child(4) i {
  color: #231111;
  font-size: 14px;
  padding-left: 4px;
  transition: 0.3s;
}
.menu ul li:hover i {
  color: #ff5200;
}
.subMenu2 {
  list-style: none;
  width: 200px;
  position: absolute;
  top: 0;
  left: 234px;
  background: white;
  border-left: 1px solid #ddd;
  padding: 20px 35px;
  visibility: hidden;
  transform: scaleX(0);
  transition: 0.3s;
  transform-origin: left;
}
ul.subMenu li:hover ul.subMenu2 {
   visibility: visible;
  transform: scaleX(1);
}
ul.subMenu2 li a:before {
  content: "";
  display: inline-block;
  background: #ff5200;
  width: 0px !important;
  height: 2px;
  vertical-align: middle;
  margin-right: 10px;
  transition: 0.6s;
}
ul.subMenu2 li:hover a:before {
  width: 20px !important;
}