/*=====================================================================
@Template Name: HostHub Construction 
@Developed By: Naim Lasker
=====================================================================*/
/*=================== fonts ====================*/
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500|Rubik:500,700");
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Medium Layout: 1280px */
/* Tablet Layout: 768px */
/* Mobile Layout: 320px */
/* Wide Mobile Layout: 480px */
/*---------------------------------------------------- */
/*----------------------------------------------------*/
body 
{
  line-height: 26px;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #777777;
  background: url(../img/body-bg.png) no-repeat center; 
}

h1,
h2,
h3,
h4,
h5,
h6 
{
  font-family: "Rubik", sans-serif;
  font-weight: 500;
  color: #000000; 
}

/* Main Title Area css
============================================================================================ */
.main_title h2 
{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 50px;
    text-transform: uppercase; 
    @media (max-width: 991px) 
}
.main_title h2 br 
{
    display: none;  
    @media (max-width: 767px)
}

.main_title h2 
{
    font-size: 30px;
    line-height: 34px;  
}
.main_title p 
{
    margin-bottom: 0px; 
    @media (max-width: 991px) 
}
.main_title p br 
{
    display: none;  
}
.main_title.white h2 
{
    color: #fff; 
}
.main_title.white p 
{
    color: #fff;
    opacity: .6; 
}

/* End Main Title Area css
============================================================================================ */

.header_area 
{
  position: absolute;
  width: 100%;
  z-index: 9999;
  background: #ffffff; 
}
.header_area .menu_nav 
{
    width: 100%; 
}
.header_area .navbar 
{
    background: transparent;
    padding: 0px;
    border: 0px;
    border-radius: 0px;
    width: 100%; 
}
.header_area .navbar .nav .nav-item 
{
      margin-right: 45px; 
}
.header_area .navbar .nav .nav-item .nav-link 
{
        font: 500 14px/100px "Rubik", sans-serif;
        text-transform: uppercase;
        color: #000000;
        padding: 0px;
        display: inline-block; 
}
.header_area .navbar .nav .nav-item .nav-link:after 
{
          display: none; 
}
.header_area .navbar .nav .nav-item:hover .nav-link, .header_area .navbar .nav .nav-item.active .nav-link 
{
        color: #4458dc; 
}

/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Home Banner Area css
============================================================================================ */
.home_banner_area 
{
    z-index: 1;
    background: url() no-repeat top center;
    background-position: center;
    background-size: cover; 
}
.home_banner_area .banner_inner 
{
    width: 100%; 
}
.home_banner_area .banner_inner .home_right_img 
{
    padding-top: 197px; 
    @media (max-width: 1480px) 
}
.home_banner_area .banner_inner .home_right_img img 
{
    max-width: 100%;
    height: auto; 
    @media (max-width: 991px) 
}
.home_banner_area .banner_inner .col-lg-7 
{
    vertical-align: middle;
    align-self: center; 
}
.home_banner_area .banner_inner .banner_content 
{
    text-align: left; 
    @media (max-width: px) 
}
.home_banner_area .banner_inner .banner_content 
{
    margin-top: 150px; 
}
.home_banner_area .banner_inner .banner_content h3 
{
    font-size: 40px;
    margin-bottom: 20px;
    position: relative; 
}
.home_banner_area .banner_inner .banner_content h3:after 
{
    content: '';
    width: 410px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 23%;
    background: #000000; 
    @media (max-width: 575px) 
}
.home_banner_area .banner_inner .banner_content h3:after 
{
    display: none; 
}
.home_banner_area .banner_inner .banner_content h1 
{
    margin-top: 20px;
    font-size: 70px;
    line-height: 60px;
    margin-bottom: 25px; 
    @media (max-width: 1024px) 
}
.home_banner_area .banner_inner .banner_content h1 
{
    font-size: 60px; 
    @media (max-width: 767px) 
}
.home_banner_area .banner_inner .banner_content h1 
{
    font-size: 50px;  
}
.home_banner_area .banner_inner .banner_content h5 
{
    font-size: 24px;
    margin-bottom: 35px; 
}
.home_banner_area .banner_inner .banner_content .primary_btn 
{
    margin-right: 20px; 
}

/* End Home Banner Area css
============================================================================================ */


/* ==================================== */
/*    About Page styles
/* ==================================== */

*
{
    margin 0;
    padding 0;
    box-sizing: border-box;
}
body
{
    background: #efefef;
    font-family: sans-serif;
}
.profile-img 
{
    width: 35%;
    float: right;
}
.profile-img img
{
    width: 70%;
    height: 70%;
}
.about
{
    margin-left: 15px;
}
.profile-info
{
    width: 60%;
    height: 100vh;
    float: left;
    padding: 0 30px;
    overflow: scroll;
    overflow-x: hidden;
    
}
.profile-info h1
{
    margin-top: 50px;
    margin-bottom: 30px;
}
.profile-info h2
{
    margin-top: 50px;
    margin-bottom: 15px;
}
.expertise img
{
    height: 5%;
    margin: 5px;
}
.expertise
{
    display: inline-block;
    width: 28%;
    padding: 30px 10px;
    margin: 2%;
    text-align: center;
    box-shadow: 0 0 15px 1px rgba(37, 73, 214, 0.18);
    background: #fff;
}
.expertise small
{
   padding-top: 10px;
   display: block;
}
.projects img
{
    width: 28%;
    padding: 4px;
    margin-bottom: 5px;
    margin-left: 5px;
}
.form-box
{
    margin-top: 30px;
}
.input-group input
{
    width: 45%;
    border: 0;
    outline: none !important;
    padding: 10px;
    margin: 2%;
    display: inline-block;
    background: #fff;
}
.text-area textarea
{
   width: 95%;
   border: 0;
     outline: none !important;
    padding: 10px;
    margin: 2%;
    background: #fff;
}
.submit-btn
{
   border: 0;
    outline: none !important;
    padding: 10px 20px;
    margin: 2%;
    background: #2ab0ff;
    cursor: pointer;
    color: #fff;
}
.contact img
{
    width: 20px;
}
.contact span
{
    margin: 5%;
}
.contact
{
    margin: 5% 0 5% 25%;
    width: 65%;
}
.copyright
{
    text-align: center;
    margin-bottom: 20px;
}
@media only screen and (max-width:900px)
{
    .profile-info
    {
        width: 100%;
        overflow: inherit;
    }
    .profile-img
    {
        width: 100%;
    }
    .expertise
    {
        width: 95%;
        margin-bottom: 10%;
    }
    .expertise img
    {
        height: 8%;
        margin: 10px 0;
    }
    .projects img
    {
      width: 47%;  
    }
    span
    {
        display: block;
    }
}
/*----------------------------------------------------*/
/*----------------------------------------------------*/

/* =================================== */
/*  Elements Page Styles
/* =================================== */

h1 {
  font-size: 36px; }

h2 {
  font-size: 30px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 18px; }

h5 {
  font-size: 16px; }

h6 {
  font-size: 14px; }

.typography h1, .typography h2, .typography h3, .typography h4, .typography h5, .typography h6 {
  color: #777777; }


/* Start Portfolio Area css
============================================================================================ */
.portfolio_area 
{
    padding-bottom: 120px; 
    @media (max-width: 991px)
}     
.portfolio_area 
{
      padding-bottom: 50px; 
} 
.portfolio_area .filters ul 
{
    padding-left: 0;
    margin-bottom: 50px; 
    @media (max-width: 991px)
} 
.portfolio_area .filters ul 
{
    margin-bottom: 20px; 
} 
.portfolio_area .filters ul li 
{
      display: inline-block;
      margin-right: 50px;
      font-size: 14px;
      font-weight: 500;
      text-transform: uppercase;
      color: #222222;
      cursor: pointer;
      -webkit-transition: all 0.4s ease 0s;
      -moz-transition: all 0.4s ease 0s;
      -o-transition: all 0.4s ease 0s;
      transition: all 0.4s ease 0s; 
}
.portfolio_area .filters ul li:hover, .portfolio_area .filters ul li.active 
{
    color: #854fee; 
    @media (max-width: 767px) 
}            
.portfolio_area .filters ul li 
{
    margin-right: 20px; 
} 

.portfolio_box 
{
    margin-bottom: 80px; 
    @media (max-width: 767px) 
}
.portfolio_box 
{
    margin-bottom: 35px; 
}
.portfolio_box .short_info 
{
    margin-top: 30px; 
    @media (max-width: 767px) 
}
.portfolio_box .short_info 
{
        margin-top: 20px; 
} 
.portfolio_box .short_info h4 
{
      text-transform: uppercase;
      font-size: 20px;
      margin-bottom: 0px;
}
.portfolio_box .short_info h4 a 
{
        color: #000000; 
}

.single_portfolio 
{
  position: relative; 
}
.single_portfolio .overlay 
{
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s; 
}
.single_portfolio .icon 
{
    position: absolute;
    top: 25%;
    left: 25%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s; 
}
.single_portfolio .icon span 
{
      font-size: 100px;
      display: inline-block;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
      -o-transform: rotate(135deg);
      transform: rotate(135deg);
      color: #ffffff;
      cursor: pointer; 
}
.single_portfolio:hover .overlay 
{
    background: rgba(77, 87, 222, 0.5); 
}
.single_portfolio:hover .icon 
{
    opacity: 1;
    visibility: visible;
    top: 50%;
    left: 50%; 
}

.portfolio_details_inner .row 
{
    margin-bottom: 65px; 
    @media (max-width: 480px) 
}
.portfolio_details_inner .row 
{
    margin-bottom: 30px; 
} 
.portfolio_details_inner p 
{
    margin-bottom: 30px;
    font-size: 14px; 
}
  .portfolio_details_inner p:last-child 
{
    margin-bottom: 0px; 
}
.portfolio_details_inner .portfolio_right_text 
{
  margin-top: 50px; 
}
.portfolio_details_inner .portfolio_right_text h4 
{
    font-size: 20px;
    margin-bottom: 18px; 
}
.portfolio_details_inner .portfolio_right_text p 
{
    margin-bottom: 25px;
    font-size: 14px; 
}
.portfolio_details_inner .portfolio_right_text .list li 
{
    margin-bottom: 7px;
    font-weight: normal;
    font-size: 14px; 
}
.portfolio_details_inner .portfolio_right_text .list li span 
{
      font-family: "Rubik", sans-serif;
      color: #000000;
      font-size: 16px;
      font-weight: 500;
      width: 97px;
      display: inline-block; 
}
.portfolio_details_inner .portfolio_right_text .list li:last-child 
{
      margin-bottom: 0px; 
}
.portfolio_details_inner .portfolio_right_text .list li i 
{
      color: #f1cd09; 
}

/* End Portfolio Area css
============================================================================================ */

/*---------------------------------------------------- */
/*----------------------------------------------------*/
  /* Main Menu Area css
============================================================================================ */
  .header_area .navbar .search {
    margin-left: 40px; }

  /* End Main Menu Area css
============================================================================================ */ 

  /* Main Menu Area css
============================================================================================ */
  .header_area .navbar .nav .nav-item {
    margin-right: 28px; }

    /* End Main Menu Area css
============================================================================================ */
  
    /* Home Banner Area css
============================================================================================ */
  .home_banner_area .banner_inner {
    padding: 100px 0px; }

    /* End Home Banner Area css
============================================================================================ */
  .header_area .navbar .primary_btn {
    margin-left: 40px; }

  .home_banner_area .banner_inner .banner_content h2 br {
    display: none;
    font-size: 36px; }

  .home_banner_area .banner_inner .banner_content h2 {
    font-size: 36px;
    line-height: 45px; } 
@media (max-width: 991px) {
  
    /* Main Menu Area css
============================================================================================ */
  .navbar-toggler {
    border: none;
    border-radius: 0px;
    padding: 0px;
    cursor: pointer;
    margin-top: 27px;
    margin-bottom: 23px; }

  .header_area .navbar {
    background: #000; }

  .navbar-toggler[aria-expanded="false"] span:nth-child(2) {
    opacity: 1; }

  .navbar-toggler[aria-expanded="true"] span:nth-child(2) {
    opacity: 0; }

  .navbar-toggler[aria-expanded="true"] span:first-child {
    transform: rotate(-45deg);
    position: relative;
    top: 7.5px; }

  .navbar-toggler[aria-expanded="true"] span:last-child {
    transform: rotate(45deg);
    bottom: 6px;
    position: relative; }

  .navbar-toggler span {
    display: block;
    width: 25px;
    height: 3px;
    background: #fff;
    margin: auto;
    margin-bottom: 4px;
    transition: all 400ms linear;
    cursor: pointer; }

  .navbar .container {
    padding-left: 15px;
    padding-right: 15px; }

  .nav {
    padding: 0px 0px; }

  .header_area + section,
  .header_area + row,
  .header_area + div {
    margin-top: 117px; }

  .header_top .nav {
    padding: 0px; }

  .header_area .navbar .nav .nav-item .nav-link {
    line-height: 40px;
    margin-right: 0px;
    display: block;
    border-bottom: 1px solid #ededed33;
    border-radius: 0px;
    color: #fff; }

  .header_area .navbar .search {
    margin-left: 0px; }

  .header_area .navbar-collapse {
    max-height: 340px;
    overflow-y: scroll; }

  .header_area .navbar .nav .nav-item.submenu ul .nav-item .nav-link {
    padding: 0px 15px; }

  .header_area .navbar .nav .nav-item {
    margin-right: 0px; }

  .header_area + section,
  .header_area + row,
  .header_area + div {
    margin-top: 0px; }

  .header_area.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
    line-height: 40px;
    color: #fff; }

  .header_area.white_menu.navbar_fixed .main_menu .navbar .nav .nav-item .nav-link {
    line-height: 40px;
    color: #fff; }

  .header_area.white_menu .navbar .nav .nav-item .nav-link {
    color: #222; }

  /* End Main Menu Area css
  ============================================================================================ */
  
    /* Start Home banner Area css
============================================================================================ */
  .home_banner_area {
    margin-top: 0; }

  .home_right_img {
    display: none; }

  /* Footer Area css
  ============================================================================================ */
  .footer_area {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    background-image: none !important;
    background-color: #777777; }

  
  /* Footer Area css
  ============================================================================================ */
  .footer_area .col-sm-6 {
    margin-bottom: 30px; }

  .footer_area .footer_inner {
    margin-bottom: -30px; }

  /* End End Footer Area css
  ============================================================================================ */

  .home_banner_area {
    min-height: 300px; }

  .home_banner_area .banner_inner {
    min-height: 300px;
    padding-top: 200px;
    padding-bottom: 50px; }

  .home_banner_area .banner_inner .banner_content {
    margin-top: 0px; }
    .home_banner_area .banner_inner .banner_content .primary_btn {
      display: none; }

  /* Blog Page Area css
============================================================================================ */


  /* End Blog Page Area css
============================================================================================ */
  .home_banner_area .banner_inner .banner_content h3 {
    font-size: 30px; }

  .home_banner_area .banner_inner .banner_content p br {
    display: none; }

  .home_banner_area .banner_inner .banner_content h3 span {
    line-height: 45px;
    padding-bottom: 0px;
    padding-top: 0px; }

  /* Footer Area css
============================================================================================ */
  
  .made_life_inner .nav.nav-tabs li {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 15px; }

  .made_life_inner .nav.nav-tabs {
    margin-bottom: -15px; }

  .made_life_area.made_white .left_side_text {
    margin-bottom: 0px;
    margin-top: 30px; } }
@media (max-width: 575px) {
  .header_area + section,
  .header_area + row,
  .header_area + div {
    margin-top: 0px; }

  /* Home Banner Area css
============================================================================================ */
  .home_banner_area .banner_inner .banner_content h2 {
    font-size: 28px;
    line-height: 38px; }

  .home_banner_area {
    min-height: 450px; }

  .home_banner_area .banner_inner {
    min-height: 450px; }

  .home_banner_area .banner_inner .banner_content img {
    display: none; }

  .home_banner_area .banner_inner .banner_content h5 {
    margin-top: 0px; }

  /* End Home Banner Area css
  ============================================================================================ */
  .section_gap {
    padding-top: 70px;
    padding-bottom: 70px; }

  .main_title h2 {
    font-size: 25px; }

  
  /* Footer Area css
  ============================================================================================ */
  .footer-area {
    padding: 70px 0px; }

  .news_widget {
    padding-left: 0 !important; }

  /* End End Footer Area css
  ============================================================================================ */
  .pad_top {
    padding-top: 70px; }

  .pad_btm {
    padding-bottom: 70px; } }
@media (max-width: 480px) {
  /* Main Menu Area css
  ============================================================================================ */
  .header_area .navbar-collapse {
    max-height: 250px; }

  /* End Main Menu Area css
  ============================================================================================ */
  /* Home Banner Area css
  ============================================================================================ */
  .home_banner_area .banner_inner .banner_content {
    padding: 30px 15px;
    margin-top: 0px; }

  .home_banner_area .banner_inner .banner_content h3 {
    font-size: 24px; }

  /* End Home Banner Area css
  ============================================================================================ */
  .banner_area .banner_inner .banner_content h2 {
    font-size: 32px; }

  /* Blog Page Area css
  ============================================================================================ */
  .comments-area .thumb {
    margin-right: 10px; }

  /* End Blog Page Area css
  ============================================================================================ */
  
  /* Start Brand Carousel Area css
  ============================================================================================ */
  .brand-carousel .single-brand-item {
    height: 100px;
    width: 140px; } }
/*---------------------------------------------------- */
/*----------------------------------------------------*/
/* Footer Area css
============================================================================================ */


.footer_area 
{
  padding: 120px 0;
  position: relative; 
}
.footer_area:before 
{
    content: '';
    position: absolute;
    top: 60px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: ;
    z-index: -1; 
    @media (max-width: 1024px)
} 
.footer_area 
{
      padding: 60px 0;  
}
.footer_area .footer_logo 
{
    text-align: center; 
}
.footer_area .footer_logo h4 
{
      font-size: 20px;
      color: #000000;
      margin-top: 35px;
      text-transform: uppercase; 
}
.footer_area .footer_social 
{
    text-align: center;
    margin: 25px 0px 30px; 
}
.footer_area .footer_social a 
{
      padding: 0 20px; 
}
.footer_area .footer_social a i 
{
    color: ;
    font-size: 22px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s; 
    @media (max-width: 576px)
} 
.footer_area .footer_bottom 
{
    text-align: center; 
}
.footer_area .footer_bottom p 
{
    margin-bottom: 0; 
}

/* End Footer Area css
============================================================================================ */
/*---------------------------------------------------- */

/*# sourceMappingURL=style.css.map */