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

Template Name: Sofol - Corporate Business Template
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents
        
    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home Page
    22. Services Page
    23. About Page
    24. Projects Page
    25. Pricing Page
    26. PHP Contact Form
    27. Others

*/


/*
** General Styles for HTML tags
*/

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

 * {
     padding: 0;
     margin: 0;
}
 html {
     width: 100%;
     height: 100%;
     position: relative;
     overflow: visible;
}
 body {
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 26px;
     overflow-x: hidden;
     background-color: #ffffff;
}
 html, body, .wrapper {
     height: 100%;
}
 h1, h2, h3, h4, h5, h6 {
     color: #232323;
     font-weight: normal;
     line-height: 1.2;
     font-family: 'Inter', sans-serif;
     letter-spacing: 0;
     margin: 0;
     margin-bottom: 20px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 27px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 14px;
}


 img {
     border: none;
     outline: none;
     max-width: 100%;
}
 label {
     display: inline-block;
     font-weight: normal;
     margin-bottom: 5px;
     max-width: 100%;
}
 a, .btn, button {
     transition: all 0.35s ease-in-out;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     outline: medium none;
}
 a img, iframe {
     border: none;
}
 p {
     color: #000;
     line-height: 26px;
     margin: 0 0 15px;
     text-transform: none;
     font-weight: 400;
     margin-bottom: 20px;
}
 hr {
     margin-top: 0;
     margin-bottom: 0;
     border: 0;
     border-top: 1px solid #eee;
}
 pre {
     display: block;
     margin: 0 0 30px;
     padding: 9.5px;
     word-wrap: break-word;
     word-break: break-all;
     color: #333;
     border: 1px solid #ededed;
     border-radius: inherit;
     background-color: #f9f9f9;
     font-size: 13px;
     line-height: 1.42857143;
}
 input:focus, textarea:focus, 
 select:focus {
     outline: none;
     box-shadow: inherit;
}
 ul {
     margin: 0;
     list-style-type: none;
}
 a, a:active, a:focus, a:hover {
     outline: none;
     text-decoration: none;
     color: #232323;
}
 a:hover {
     color: #232323;
}
 a {
     transition: all 0.35s ease-in-out;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     text-decoration: none;
     font-family: 'Inter', sans-serif;
}
 b, strong {
     font-weight: 600;
}
 .btn.active, .btn:active {
     background-image: inherit !important;
}
 .btn.focus, 
 .btn:active:focus, 
 .btn:active:hover, 
 .btn:focus, 
 .btn:hover {
     outline: 0;
}
 .btn.active, .btn:active {
     outline: 0;
     -webkit-box-shadow: inherit;
     box-shadow: inherit;
}
 input {
     border: 1px solid #e7e7e7;
     border-radius: inherit;
     box-shadow: inherit;
     min-height: 50px;
}
/* Default CSS */
 .container-half {
     margin: 0 auto;
     width: 60%;
     padding: 0 15px;
}
 .bg-cover {
     background-position: center center;
     background-size: cover;
}
 .bg-fixed {
     background-attachment: fixed;
     background-position: center top;
     background-size: cover;
}
 .bg-gray {
     background-color: #f3f6f8;
}
 .bg-light {
     background-color: #f7f7f7;
}
 .bg-theme {
     background-color: #e22a31;
}
 .text-light h1, 
 .text-light h2, 
 .text-light h3, 
 .text-light h4, 
 .text-light h5, 
 .text-light h6, 
 .text-light p, 
 .text-light a {
     color: #ffffff;
}
 .shadow {
     position: relative;
     z-index: 1;
}
 .shadow.dark::after {
     background: #000000 none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.5;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .shadow.dark-hard::after {
     background: #1c1c1c none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.75;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .shadow.light::after {
     background: #ffffff none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.3;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .shadow.theme::after {
     background: #e22a31 none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.7;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .default-padding {
     padding-top: 80px;
     padding-bottom: 80px;
}
 .default-padding.bottom-less {
     padding-top: 80px;
     padding-bottom: 50px;
}
 .padding-xl {
     padding-top: 150px;
     padding-bottom: 150px;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

 .btn {
     display: inline-block;
     font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
     line-height: 25px;
     text-transform: uppercase;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .btn-md {
     padding: 14px 40px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
 .btn-sm {
     padding: 12px 40px;
     font-size: 12px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
 .btn.btn-sm-pro {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     font-size: 14px;
     font-weight: 600;
     margin-top: 5px;
     padding: 12px 40px;
     display: inline-block;
}
 .btn-border-light {
     border: 2px solid #ffffff !important;
}
 .btn.btn-sm-pro.btn-border-light:hover, 
 .btn.btn-sm-pro.btn-border-light:focus {
     background-color: #ffffff;
     color: #232323;
     border: 2px solid #ffffff !important;
}
 .btn-dark {
     background-color: #232323;
     color: #ffffff;
     border: 2px solid #232323 !important;
}
 .btn-dark.border {
     background-color: transparent;
     color: #232323;
     border: 2px solid #232323 !important;
}
 .btn-dark.border:hover {
     background-color: #232323;
     color: #ffffff !important;
     border: 2px solid #232323 !important;
}
 .btn.btn-light {
     background: #ffffff none repeat scroll 0 0;
     border: 2px solid #ffffff !important;
     color: #232323;
}
 .btn.btn-light:hover, 
 .btn.btn-light:focus {
     background: transparent none repeat scroll 0 0;
     border: 2px solid #ffffff !important;
     color: #ffffff;
}
 .btn.btn-light.effect:hover, 
 .btn.btn-light.effect:focus {
     background-color: #e22a31;
     color: #ffffff !important;
     border: 2px solid #e22a31 !important;
}
 .btn.btn-light.border {
     background: transparent;
     border: 2px solid #ffffff !important;
     color: #ffffff;
}
 .btn.btn-light.border:hover {
     background: #ffffff none repeat scroll 0 0 !important;
     border: 2px solid #ffffff !important;
     color: #232323 !important;
}
 .btn-dark:hover, 
 .btn-dark:focus {
     color: #232323 !important;
     background: transparent;
}
 .bg-dark {
     background: #1c1c1c none repeat scroll 0 0;
}
 .btn-theme {
     background-color: #e22a31;
     color: #ffffff;
     border: 2px solid #e22a31 !important;
}
 .btn-theme.border {
     background-color: transparent;
     color: #e22a31;
     border: 2px solid #e22a31 !important;
}
 .btn-theme.border:hover {
     background-color: #e22a31;
     color: #ffffff !important;
     border: 2px solid #e22a31 !important;
}
 .btn-theme.effect:hover, 
 .btn-theme.effect:focus {
     background: #ffffff none repeat scroll 0 0;
     border: 2px solid #ffffff !important;
     color: #232323;
}
 .btn-theme:hover, 
 .btn-theme:focus {
     color: #e22a31 !important;
     background: transparent;
}
 .btn.btn-sm-lm {
     font-size: 12px;
     padding: 12px 40px;
}
 .bg-fixed {
     background-attachment: fixed;
     background-position: center center;
     background-size: cover;
}
 .bg-cover {
     background-position: center center;
     background-size: cover;
}
 .oh {
     overflow: hidden;
}

/* ============================================================== 
     # Banner 
=================================================================== */
 body, .banner-area, 
 .banner-area div {
     height: 100%;
}

.banner-area {
    overflow: hidden;
}

 .banner-area .box-cell {
     display: table-cell;
     vertical-align: middle;
     width: 100%;
}
 .banner-area .box-table {
     display: table;
     width: 100%;
}
 .banner-area .box-cell, 
 .banner-area .box-cell div {
     height: auto;
}
 .banner-area {
     position: relative;
}
.banner-area .carousel-item h1 {
    line-height: 1;
    font-size: 120px;
    font-weight: 700;
    text-transform: capitalize;
}

 .banner-area .carousel-item p {
     font-size: 16px;
     line-height: 30px;
}
 .banner-area .carousel-control {
     font-size: 30px;
     height: 50px;
     line-height: 50px;
     padding: 0;
     position: absolute;
     top: 50%;
     width: 50px;
     margin-top: -25px;
     background: transparent;
     opacity: 1;
     z-index: 1;
     display: inline-block;
     text-align: center;
}

 .banner-area .carousel-control.light {
     color: #ffffff;
}
 .banner-area .carousel-item a {
     margin-right: 10px;
     margin-top: 15px;
}
 .banner-area .carousel-control.left {
     left: -50px;
}
 .banner-area:hover .carousel-control.left,
 .banner-area .carousel-control.focus.left {
     left: 15px;
}
 .banner-area .carousel-control.right {
     right: -50px;
}
 .banner-area:hover .carousel-control.right,
  .banner-area .carousel-control.focus.right {
     right: 15px;
}
/* Animation delays */
 .banner-area .carousel-item h1:first-child, 
 .banner-area .carousel-item h2:first-child, 
 .banner-area .carousel-item h3:first-child, 
 .banner-area .carousel-item h4:first-child, 
 .banner-area .carousel-item h5:first-child, 
 .banner-area .carousel-item h6:first-child {
     animation-delay: .5s;
}
 .banner-area .carousel-item h1:nth-child(2), 
 .banner-area .carousel-item h2:nth-child(2), 
 .banner-area .carousel-item h3:nth-child(2), 
 .banner-area .carousel-item h4:nth-child(2), 
 .banner-area .carousel-item h5:nth-child(2), 
 .banner-area .carousel-item h6:nth-child(2) {
     animation-delay: .7s;
}
 .carousel-caption h1:nth-child(3), 
 .carousel-caption h2:nth-child(3), 
 .carousel-caption h3:nth-child(3), 
 .carousel-caption h4:nth-child(3), 
 .carousel-caption h5:nth-child(3), 
 .carousel-caption h6:nth-child(3) {
     animation-delay: .9s;
}
 .banner-area .carousel-item p {
     animation-delay: .5s;
}
 .banner-area .carousel-item a, 
 .banner-area .carousel-item button {
     animation-delay: .7s;
}
/* Carousel Fade Effect */
 .carousel-fade .carousel-inner .carousel-item {
     -webkit-transition-property: opacity;
     transition-property: opacity;
}
 .carousel-fade .carousel-inner .carousel-item, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
     opacity: 0;
}
 .carousel-fade .carousel-inner .active, 
 .carousel-fade .carousel-inner .next.left, 
 .carousel-fade .carousel-inner .prev.right {
     opacity: 1;
}
 .carousel-fade .carousel-inner .next, 
 .carousel-fade .carousel-inner .prev, 
 .carousel-fade .carousel-inner .active.left, 
 .carousel-fade .carousel-inner .active.right {
     left: 0;
     -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
}
 .carousel-fade .carousel-control {
     z-index: 2;
}
/* Slider Zoom Effect */
 @-webkit-keyframes zoom {
     from {
         -webkit-transform: scale(1, 1);
    }
     to {
         -webkit-transform: scale(1.5, 1.5);
    }
}
 @-moz-keyframes zoom {
     from {
         -moz-transform: scale(1, 1);
    }
     to {
         -moz-transform: scale(1.5, 1.5);
    }
}
 @-o-keyframes zoom {
     from {
         -o-transform: scale(1, 1);
    }
     to {
         -o-transform: scale(1.5, 1.5);
    }
}
 @keyframes zoom {
     from {
         transform: scale(1, 1);
    }
     to {
         transform: scale(1.5, 1.5);
    }
}
 .carousel-inner .carousel-item > .thumbnail-fixed {
     -webkit-animation: zoom 20s;
     animation: zoom 20s;
}
 .banner-area .carousel-zoom .thumbnail-fixed {
     height: 100%;
     position: absolute;
     width: 100%;
}

 .banner-area a {
    margin-right: 10px;
    margin-top: 10px;
 }


 .banner-area.text-center a,
 .banner-area .text-center a {
    margin-right: 5px;
    margin-left: 5px;
 }

 .banner-area p {
    padding-right: 25%;
 }

  .banner-area.text-center p ,
 .banner-area .text-center p  {
    padding-right: 15%;
    padding-left: 15%;
 }

 .banner-area.text-large h1 {
    font-size: 100px;
    line-height: 1;
    text-transform: capitalize;
}

 .banner-area.text-medium h1 {
    font-size: 80px;
    line-height: 1;
    text-transform: capitalize;
}

.banner-area.top-pad-90 .carousel-item {
    padding-top: 90px;
}

/* ============================================================== 
     # Topbar 
=================================================================== */
 .top-bar-area {
     padding: 15px 0;
}
 .top-bar-area .top-address li {
     color: #ffffff;
     display: inline-block;
     font-family: 'Inter', sans-serif;
     margin-right: 20px;
}
 .top-bar-area li, 
 .top-bar-area a {
     font-weight: 600;
}
 .top-bar-area a {
     font-size: 16px;
}
 .top-address li i {
     margin-right: 10px;
}
 .topbar-social li {
     display: inline-block;
}
 .top-bar-are .topbar-social li a {
     color: #ffffff;
}
 .topbar-social li {
     margin-left: 20px;
}

/* ============================================================== 
     # Bradcrumb 
=================================================================== */
 .breadcrumb-area .breadcrumb {
     background: transparent none repeat scroll 0 0;
     display: inline-block;
     margin: 0;
     position: relative;
     z-index: 1;
}
 .breadcrumb-area .breadcrumb::after {
     background: #1c1c1c none repeat scroll 0 0;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.6;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .breadcrumb-area h1 {
     display: block;
     font-weight: 600;
     text-transform: uppercase;
}
.breadcrumb-area .breadcrumb a, 
.breadcrumb-area .breadcrumb li {
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    position: relative;
}
.breadcrumb-area .breadcrumb li {
    margin: 0 5px;

}
.breadcrumb-area .breadcrumb li:after {
    padding: 0 5px;
    color: #ffffff;
    content: "/\00a0";
    right: -9px;
    position: relative;
}

.breadcrumb-area .breadcrumb li:last-child:after {
    display: none;
}
 .breadcrumb-area .breadcrumb li.active {
     color: #e22a31;
}



/* ============================================================== 
     # Services 
=================================================================== */
.site-heading h2 {
  display: block;
  font-weight: 800;
  padding-bottom: 20px;
  margin-bottom: 0;
  position: relative;
  line-height: 1.4;
}

.site-heading.less-info h2 {
  margin-bottom: 0;
}

.site-heading h5 {
  color: #666666;
  font-weight: 800;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  overflow: inherit;
}

.bg-dark .site-heading h5 {
  color: #cccccc;
}

.site-heading.clean h2 {
  padding-bottom: 0;
}

.site-heading.clean h2 span {
  color: #f1cf69;
}

.site-heading h2 span {
  color: #f1cf69;
}

.site-heading.barber h2 span {
  color: #bc9355;
}

.site-heading p {
  margin: 0;
  margin-top: 20px;
  padding: 0 7%;
}

.site-heading h2::before {
  background: #FF1949 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 40px;
}

.site-heading h2::after {
  background: #FF1949 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: 20px;
  position: absolute;
  width: 5px;
}

.site-heading.text-left h2::before {
  left: 0;
  margin-left: 0;
}

.site-heading.text-left h2::after {
  left: 45px;
  margin-left: 0;
}

.shadow .site-heading h2, 
.shadow .site-heading p {
  color: #ffffff;
}

.bg-theme .site-heading h2::before,
.shadow .site-heading h2::before {
  background: #ffffff none repeat scroll 0 0;
}

.site-heading h2 span {
  color: #f1cf69;
}

.site-heading {
  margin-bottom: 60px;
  margin-top: -5px;
}
 .site-heading {
     margin-bottom: 60px;
     overflow: hidden;
}
 .services-items .equal-height {
     margin-bottom: 30px;
}
.services-items .item i {
    font-size: 60px;
    margin-bottom: 40px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    position: relative;
    z-index: 1;
    display: inline-block;
    color: #232323;
}

.services-items .item i::after {
    position: absolute;
    left: -20px;
    top: -50%;
    content: "";
    height: 80px;
    width: 80px;
    background: url(assets/img/shape/1.png);
    background-size: contain;
    z-index: -1;
    opacity: 0.05;
    background-repeat: no-repeat;
    transform: rotate(45deg);
}

.shape-standard .services-items .item i::after {
    display: none;  
}

.shape-less .services-items .item i::after {
    display: none;
}

.shape-standard .services-items .item .icon {
    display: inline-block;  
    position: relative; 
    z-index: 1; 
}

.shape-standard .services-items .item .icon i {
    color: #e22a31;
}

.shape-standard .services-items .item .icon::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    height: 60px;
    width: 60px;
    background: #e22a31;
    z-index: -1;
    opacity: 0.09;
    background-repeat: no-repeat;
    border-radius: 50%;
    transform: inherit;
}
.shape-standard .services-items .item .icon::before {
    position: absolute;
    left: -15px;
    top: -15px;
    content: "";
    height: 30px;
    width: 30px;
    background: #e22a31;
    z-index: -1;
    opacity: 0.09;
    background-repeat: no-repeat;
    border-radius: 50%;
    transform: inherit;
}
 .services-area.icon-color .services-items .item i {
     color: #e22a31;
}
 .services-items .item:hover i {
     color: #e22a31;
}
 .services-area.icon-color .services-items .item:hover i {
     color: #232323;
}
 .services-items .item p {
     margin: 0;
}
 .services-items .item h4 {
     font-weight: 600;
     text-transform: capitalize;
     margin-bottom: 10px;
}
 .services-area.active-hover .services-items .item i {
     color: #333333;
}
 .services-items .equal-height .item {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     padding: 67px 40px 64px;
}
 .services-items.center-item .equal-height .item {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     padding: 67px 40px 64px;
}

/* ============================================================== 
     # About 
=================================================================== */
 .about-area .content h2 {
     font-weight: 600;
     margin-bottom: 25px;
}
 .about-area .content h3 {
     color: #e22a31;
     font-weight: 500;
     line-height: 1.3;
     margin-bottom: 25px;
}
 .about-area .content a {
     margin-top: 10px;
}
 .about-area img {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     padding: 15px;
}
 .about-area .thumb {
     padding-left: 30px;
}

/* ============================================================== 
     # Process 
=================================================================== */
 .process-item .icon i {
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     -moz-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
     box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
     color: #232323;
     font-size: 30px;
     height: 80px;
     line-height: 75px;
     text-align: center;
     width: 80px;
     border: 3px solid;
}
 .process-item .count {
     background: #ffffff none repeat scroll 0 0;
     float: left;
     vertical-align: top;
}
 .process-item .info {
     display: table;
     padding-left: 30px;
}
 .process-item {
     border-bottom: 1px solid #e7e7e7;
     margin-bottom: 30px;
     padding-bottom: 30px;
     position: relative;
     z-index: 1;
}
 .process-item:last-child {
     border: medium none;
     margin: 0;
     padding: 0;
}
 .process-item .info h4 {
     margin-bottom: 10px;
     text-transform: capitalize;
     font-weight: 600;
}
 .process-item .info p {
     margin: 0;
}
 .process-item .count {
     background: #ffffff none repeat scroll 0 0;
     color: #e22a31;
     float: left;
     font-family: 'Inter', sans-serif;
     font-size: 30px;
     font-weight: 600;
     vertical-align: top;
}
 .process-content img {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     padding: 15px;
}
 .process-items {
     padding-left: 30px;
}

/* ============================================================== 
     # On Gong Projects 
=================================================================== */
 .ogp-area .container-fluid {
     padding: 0;
}
 .ogp-area .container-fluid .og-item {
     background-color: #1c1c1c;
     display: table-cell;
     float: none;
     vertical-align: middle;
}
 .ogp-area .container-fluid .og-item img {
     background-size: cover;
}
 .ogp-area .container-fluid .content {
     padding: 67px 40px 64px;
}
 .ogp-area .og-item h4 {
     color: #ffffff;
     text-transform: capitalize;
     font-weight: 600;
}
 .ogp-area .og-item p {
     color: #cccccc;
}
 .ogp-area .og-item h5 {
     color: #e22a31;
     margin-bottom: 20px;
     text-transform: uppercase;
     font-weight: 600;
}

/* ============================================================== 
     # Video 
=================================================================== */
 .video-area h2 {
     font-weight: 600;
}
 .video-area p {
     font-size: 16px;
     line-height: 32px;
}
 .video-area .video a {
     background: rgba(255, 255, 255, 0.7) none repeat scroll 0 0;
     border: 3px solid #ffffff;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     color: #e22a31;
     display: inline-block;
     font-size: 35px;
     height: 80px;
     line-height: 80px;
     margin-top: 30px;
     position: relative;
     text-align: center;
     width: 80px;
     z-index: 1;
     animation: 2s ease 0s normal none infinite running animatedButton;
     background-color: #fff;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     margin-bottom: 15px;
     vertical-align: top;
}
 @keyframes animatedButton {
     0% {
         box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
    }
     50% {
         box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.4);
    }
     100% {
         box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2);
    }
}
 .video-area .video h4 {
     font-weight: 600;
     margin-top: 10px;
     text-transform: uppercase;
}

.video-area .video a i {
    font-size: 30px;
    position: relative;
    left: 3px;
    top: -3px;
}

/* ============================================================== 
     # Portfolio 
=================================================================== */
 .hover-effect .pf-item {
     margin-bottom: 30px;
}
 .portfolio-area .mix-item-menu button {
     display: inline-block;
     font-weight: 600;
     padding: 0 15px;
     text-transform: uppercase;
     border: none;
     box-shadow: inherit;
     background: transparent;
}
 .portfolio-area .mix-item-menu {
     margin-bottom: 30px;
}
 .portfolio-area .mix-item-menu button.active, 
 .portfolio-area .mix-item-menu button:hover {
     color: #e22a31;
}
 .portfolio-area .portfolio-items .pf-item {
     float: left;
     margin-bottom: 30px;
     padding: 0 15px;
     width: 33.3333%;
}
 .portfolio-effet {
     width: 100%;
     height: 100%;
     float: left;
     overflow: hidden;
     position: relative;
     text-align: center;
     cursor: default;
}
 .portfolio-effet .thumb {
     position: relative;
     overflow: hidden;
     z-index: 1;
}
 .portfolio-effet .overlay {
     left: 0;
     margin-top: -40px;
     position: absolute;
     top: 50%;
     width: 100%;
     z-index: 1;
}
 .portfolio-effet img {
     display: block;
     position: relative;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .portfolio-effet:hover img {
     -webkit-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
}
 .portfolio-effet a {
     background: #ffffff none repeat scroll 0 0;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     color: #232323 !important;
     display: inline-block;
     height: 40px;
     line-height: 40px;
     margin: 2px;
     width: 40px;
}
 .portfolio-effet a, .portfolio-effet h4{
     -webkit-transform: scale(0.7);
     -ms-transform: scale(0.7);
     transform: scale(0.7);
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     opacity: 0;
     color: #fff;
     text-transform: capitalize;
}
 .portfolio-effet:hover a:hover {
     color: #e22a31;
}
 .portfolio-effet:hover a, .portfolio-effet:hover h4{
     opacity: 1;
     -webkit-transform: scale(1);
     -ms-transform: scale(1);
     transform: scale(1);
}
 .portfolio-area .pf-item .thumb::after {
     background: #1c1c1c none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     opacity: 0;
     -webkit-transition: all 0.4s ease-in;
     transition: all 0.4s ease-in;
}
 .portfolio-effet:hover .thumb::after {
     opacity: .7;
}

/* ============================================================== 
     # What We Do 
=================================================================== */
 .we-do .col-md-6 {
     display: table-cell;
     float: none;
     padding: 0;
}
 .we-do .info {
     padding: 80px;
}

/* ============================================================== 
     # Blog 
=================================================================== */
 .blog-area .blog-items .item {
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
}
 .blog-area .blog-items .info {
     background: #ffffff none repeat scroll 0 0;
     padding: 30px;
}
 .blog-area .blog-items .item .thumb {
     overflow: hidden;
}
 .blog-area .blog-items .item .thumb img {
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .blog-area .blog-items .item:hover .thumb img {
     -webkit-transform:scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
}
 .blog-area .blog-items .info .meta {
     border-top: 1px solid #e7e7e7;
     padding-top: 15px;
}
 .blog-area .blog-items .info .meta li {
     display: inline-block;
     font-size: 12px;
     margin-right: 10px;
     text-transform: uppercase;
}
 .blog-area .blog-items .info .meta li a {
     display: inline-block;
     font-weight: 400;
}
 .blog-area .blog-items .info .meta li i {
     margin-right: 5px;
}
 .blog-area .blog-items .info a {
     display: inline-block;
     font-weight: 600;
}
 .blog-area .blog-items .info a:hover {
     color: #e22a31;
}
 .blog-area.full-blog .blog-items .item-box {
     margin-bottom: 20px;
}
 .blog-area.full-blog .blog-items .info {
     background: #ffffff none repeat scroll 0 0;
     padding: 30px 30px 15px 0;
}
 .blog-area.full-blog .blog-items .item {
     box-shadow: inherit;
}
 .sidebar-item h4 {
     font-weight: 600;
     text-transform: uppercase;
}
 .sidebar-item {
     background: #ffffff none repeat scroll 0 0;
     margin-bottom: 50px;
}
 .blog-area.full-blog .sidebar {
     padding-left: 35px;
}
 .sidebar-item:last-child {
     margin: 0;
}
.sidebar-item.recent-post li a {
    color: #232323;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
}
 .sidebar-item.recent-post li a:last-child {
     display: inline-block;
     font-size: 12px;
     font-weight: 400;
     text-transform: capitalize;
}
 .sidebar-item.recent-post li a:hover {
     color: #e22a31;
}
 .sidebar-item.recent-post li a span {
     display: inline-block;
}
.sidebar-item.recent-post li span {
    display: inline-block;
    margin-top: 10px;
    text-transform: capitalize;
    font-size: 12px;
    color: #666666;
}
 .sidebar-item.recent-post li{
     color: #555555;
}
 .sidebar-item.recent-post li {
     border-bottom: 1px solid #e7e7e7;
     margin-bottom: 15px;
     padding-bottom: 15px;
}
 .sidebar-item.recent-post li:last-child {
     border: medium none;
     margin: 0;
     padding: 0;
}
 .sidebar-item.recent-post li:last-child {
     margin: 0;
}
 .sidebar-item.recent-post li .thumb {
     display: table-cell;
     padding-top: 5px;
     vertical-align: top;
     width: 80px;
}
 .sidebar-item.recent-post .thumb img {
     width: 100%;
}
 .sidebar-item.recent-post li .info {
     color: #666666;
     display: table-cell;
     line-height: 26px;
     padding: 0 0 0 20px !important;
     vertical-align: top;
     font-size: 12px;
}
 .sidebar-item.category ul li {
     border-bottom: 1px solid #e7e7e7;
     display: block;
}
 .sidebar-item.category ul li a {
     display: inline-block;
     padding: 10px 0;
     text-transform: capitalize;
}
 .sidebar-item.category ul li a:hover {
     color: #e22a31;
}
 .sidebar-item.category ul li:last-child {
     border: medium none;
}
 .sidebar-item.category ul li:last-child a {
     padding-bottom: 0;
}
 .sidebar-item.social-sidebar li {
     display: inline-block;
}
 .sidebar-item.social-sidebar li a {
     background: #232323 none repeat scroll 0 0;
     border: medium none;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     color: #ffffff;
     display: inline-block;
     font-size: 16px;
     height: 40px;
     line-height: 40px;
     margin-right: 5px;
     text-align: center;
     width: 40px;
}
 .sidebar-item.social-sidebar li a:hover {
     background: #e22a31;
     color: #ffffff;
}
 .sidebar-item.tags ul li {
     display: inline-block;
}
 .sidebar-item.tags ul li a {
     border: 1px solid #e7e7e7;
     display: inline-block;
     margin-bottom: 8px;
     margin-right: 5px;
     padding: 3px 20px;
     text-transform: capitalize;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px 
}
 .sidebar-item.tags ul li a:hover {
     background: #e22a31;
     border: 1px solid #e22a31;
     color: #ffffff;
}
 .sidebar-item.search input[type="text"] {
     border: 1px solid #e7e7e7;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     box-shadow: inherit;
     width: 100%;
}
 .sidebar-item.search form {
     position: relative;
}
 .sidebar-item.search input[type="submit"] {
     background: #232323 none repeat scroll 0 0;
     border: medium none;
     -webkit-border-radius: 0 5px 5px 0;
     -moz-border-radius: 0 5px 5px 0;
     border-radius: 0 5px 5px 0;
     color: #ffffff;
     font-weight: 600;
     padding: 0 20px;
     position: absolute;
     right: 0;
     text-transform: capitalize;
     top: 0;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .sidebar-item.search input[type="submit"]:hover {
     background: #e22a31;
     color: #ffffff;
}
 .blog-area .pagi-area {
     padding: 0;
}
.blog-area .pagi-area .pagination {
    margin: 0;
    margin-top: 50px;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: block;
}
.blog-area .pagi-area .pagination li {
    display: inline-block;
    float: none;
    margin: 3px;
}
.blog-area .pagi-area .pagination li a {
    color: #232323;
    font-weight: 600;
    padding: 16px 25px;
    background: #f7f7f7;
    display: inline-block;
}
 .blog-area .pagi-area .pagination li.active a {
     background: #e22a31 none repeat scroll 0 0;
     border: 1px solid #e22a31;
     color: #ffffff !important;
}
 .blog-area .pagi-area .pagination li a:hover {
     color: #e22a31;
}
 .blog-area.single-blog .blog-items .info .meta {
     border-bottom: 1px solid #e7e7e7;
     border-top: medium none;
     margin-bottom: 30px;
     padding-bottom: 15px;
     padding-top: 0;
}
 .blog-area.single-blog .blog-items .info h2 {
     font-weight: 600;
}
 .post-tags {
     border-top: 1px solid #e7e7e7;
     display: block;
     padding-top: 30px;
     width: 100%;
}
 .post-tags span {
     display: block;
     font-size: 18px;
     font-weight: 600;
     text-transform: uppercase;
}
 .post-tags a {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     color: #232323;
     display: inline-block;
     font-weight: 600;
     margin-right: 5px;
     text-transform: uppercase;
}
 .post-tags a:hover {
     color: #e22a31;
}
 .blog-area.full-blog.left-sidebar .blog-content {
     float: right;
}
 .blog-area.full-blog.left-sidebar .sidebar {
     float: left;
     padding-left: 15px;
     padding-right: 30px;
}
 .author-bio {
     border: 1px solid #e7e7e7;
     display: block;
     margin-top: 30px;
     padding: 30px;
     width: 100%;
}

.blog-area .author-bio .content span {
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

 .author-bio .avatar {
     display: table-cell;
     vertical-align: top;
     width: 100px;
}
 .author-bio .content {
     display: table-cell;
     padding: 0 0 0 30px;
     vertical-align: top;
}
 .author-bio .content p {
     margin: 0;
}
 .blog-area.single-blog .blog-content .item-box {
     margin-bottom: 0;
}
 .blog-area.single-blog .blog-content .item-box .form-group.submit {
     margin-bottom: 0;
}

.blog-area .comments-title .commen-item .comments-info {
    margin-bottom: 15px;
}

 .comments-list .commen-item .avatar {
     float: left;
     height: 80px;
     width: 80px;
}
 .comments-list .commen-item .content {
     display: table-cell;
     vertical-align: top;
}
 .comments-list .commen-item .avatar img {
     height: 60px;
     width: 60px;
}
 .comments-list .commen-item {
     margin-bottom: 30px;
}
 .comments-list .commen-item.reply {
     padding-left: 80px;
}
 .comments-area {
     margin-top: 30px;
}
 .comments-area .comments-title h3 {
     border-bottom: 1px solid #e2e2e2;
     font-weight: 600;
     margin-bottom: 30px;
     padding-bottom: 15px;
}
 .comments-list .commen-item .content h5 {
     font-weight: 600;
     margin-bottom: 5px;
     text-transform: uppercase;
}
 .comments-info a {
     display: inline-block;
     margin-left: 14px;
}
 .comments-info a:hover {
     color: #e22a31;
}
 .comments-info a i {
     margin-right: 5px;
}
 .comments-form input, .comments-form textarea {
     border: 1px solid #e2e2e2;
     box-shadow: inherit;
}
 .comments-form textarea {
     min-height: 150px;
}
 .comments-form button {
     background-color: #232323;
     border: 1px solid #232323;
     border-radius: 5px;
     color: #ffffff;
     display: inline-block;
     font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-weight: 600;
     line-height: 25px;
     margin-top: 20px;
     padding: 12px 40px;
     text-transform: uppercase;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .comments-form button:hover {
     color: #ffffff;
     background-color: #e22a31;
     border: 1px solid #e22a31;
}
 .comments-form .title h3 {
     font-weight: 600;
}

/* ============================================================== 
     # Case Studies 
=================================================================== */
 .case-studies-area .item {
     height: 100%;
     overflow: hidden;
     position: relative;
     width: 100%;
     z-index: 1;
     display: block;
}
 .case-studies-area .item .overlay-title {
     bottom: 0;
     content: "";
     left: 0;
     padding: 20px;
     position: absolute;
     width: 100%;
     z-index: 1;
}
 .case-studies-area .item::after {
     background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%) repeat scroll 0 0;
     content: "";
     height: 60%;
     left: 0;
     position: absolute;
     bottom: 0;
     width: 100%;
}
 .case-studies-area .item img {
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
}
 .case-studies-area .item:hover img {
     -webkit-transform:scale(1.2);
     -moz-transform: scale(1.2);
     -ms-transform: scale(1.2);
     transform: scale(1.2);
}
.case-studies-area .item .overlay-title p {
    color: #ffffff;
    margin-bottom: 0;
    text-transform: uppercase;
    font-size: 12px;
    margin-right: 5px;
}
 .case-studies-area .item .overlay-title h4 {
     color: #ffffff;
     font-weight: 600;
     margin: 0;
     margin-top: 10px;
}
 .case-studies-area .item .overlay-title a {
     color: #ffffff;
}
 .case-studies-area .equal-height {
     margin-bottom: 30px;
}

/* ============================================================== 
     # Testimonials 
=================================================================== */
 .testimonial-items .item img {
     border: 3px solid #ffffff;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     border-radius: 50%;
     display: inline-block;
     font-size: 35px;
     height: 100px;
     line-height: 100px;
     margin-bottom: 20px;
     position: relative;
     text-align: center;
     width: 100px;
     z-index: 1;
     padding: 5px;
}
 .testimonial-items .item span {
     color: #ffffff;
     font-size: 16px;
}
 .testimonial-items .item h4 {
     color: #ffffff;
     font-weight: 600;
     margin: 25px 0 0;
     text-transform: uppercase;
}
 .testimonials-area .site-heading h2 {
     color: #ffffff;
}
 .testimonials-area .site-heading h2::after {
     background: #ffffff none repeat scroll 0 0;
}
 .owl-theme .owl-dots {
     margin-top: 30px;
}
 .testimonials-area .testimonial-items .owl-dots {
     margin-top: 20px !important;
}
 .testimonials-area .testimonial-items .owl-dots span {
     background: #ffffff none repeat scroll 0 0;
     border-radius: inherit;
     height: 4px;
     width: 30px;
     margin: 0 7px;
}
 .owl-theme .owl-dots .owl-dot.active span, 
 .owl-theme .owl-dots .owl-dot:hover span {
     background: #e22a31 none repeat scroll 0 0;
}

/* ============================================================== 
     # Contact Info 
=================================================================== */
 .contact-info-area .contact-items .contact-info i {
     color: #e22a31;
     font-size: 40px;
     margin-bottom: 30px;
     display: inline-block;
}
 .contact-info-area .contact-items .item {
     margin-bottom: 30px;
}
 .contact-info-area .contact-items .contact-info h4 {
     font-weight: 600;
}
 .contact-info-area .contact-items .contact-info p {
     margin: 0;
}
 .subscribe-box {
     margin-bottom: 80px;
     overflow: hidden;
     padding: 50px;
}
 .subscribe-box .subscribe-info h4 {
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: capitalize;
}
 .subscribe-box .subscribe-info p {
     margin: 0;
}
 .subscribe-form form {
     position: relative;
}
.subscribe-form form input {
    border: medium none;
    box-shadow: inherit;
    width: 100% !important;
    min-height: 60px;
    border-radius: 30px;
    padding: 26px;
}
.subscribe-form form button {
    background: #232323 none repeat scroll 0 0;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    color: #ffffff;
    min-height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    min-height: 60px;
    border-radius: 30px;
    padding: 0 35px;
}
 .subscribe-form form button:hover, 
 .subscribe-form form button:focus {
     background: #e22a31 none repeat scroll 0 0;
     color: #ffffff;
}
 .subscribe-now .subscribe .subscribe-box {
     margin-bottom: 0;
}
/* contact form alert */
 .contact-form .loader {
     display: inline-block;
     margin-left: 10px;
     margin-top: 5px;
     position: absolute;
     top: 50%;
}
 .alert {
     border: 1px solid transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     color: red;
     font-weight: 400;
     margin-bottom: 0 !important;
     padding: 0;
     text-align: center;
}
 .alert-msg {
     background: #ffffff none repeat scroll 0 0;
     color: #685654;
     display: none;
     font-size: 12px;
     font-weight: 600;
     padding: 10px;
     text-align: left;
     margin-top: 20px;
}
 #message b {
     color: red;
}
 .alert.alert-success {
     background: transparent none repeat scroll 0 0;
}
 .alert.alert-success > h3 {
     color: green;
     margin-bottom: 5px;
}
 .alert.alert-success > p {
     color: #232323;
}
 .alert-notification {
     padding: 0;
}

/* ============================================================== 
     # Quick Contact 
=================================================================== */
 .quick-contact-area {
     padding: 50px 0;
}
 .quick-contact-area h2 {
     font-weight: 600;
     margin: 0;
}

/* ============================================================== 
     # Contact 
=================================================================== */
 .contact-form-area .maps {
     position: relative;
     z-index: 1;
}
 #google-maps iframe {
     border: 15px solid #ffffff;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     display: block;
     height: 100%;
     right: 0;
     top: 0;
     width: 100%;
     min-height: 380px;
}
 .contact-form-area .contact-form .contact-form {
     padding-right: 20px;
}
 .contact-form-area .contact-form input, 
 .contact-form-area .contact-form textarea {
     border: medium none;
     box-shadow: inherit;
}
 .contact-form-area .contact-form textarea {
     line-height: 40px;
     min-height: 180px;
}
 .contact-form-area .contact-form button {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     font-size: 12px;
     padding: 12px 40px;
     background-color: #232323;
     border: 1px solid #232323;
     color: #ffffff;
     display: inline-block;
     font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-weight: 600;
     line-height: 25px;
     text-transform: uppercase;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     margin-top: 20px;
}
 .contact-form-area .contact-form button i {
     margin-left: 5px;
}
 .contact-form-area .contact-form button:hover {
     background-color: #e22a31;
     border: 1px solid #e22a31;
     color: #ffffff;
}

/* ============================================================== 
     # Team Members 
=================================================================== */
 .team-member {
     overflow: hidden;
}
 .team-member, .team-member .team-img {
     position: relative;
}
 .team-member .team-img img {
     height: auto;
     width: 100%;
}
 .team-member .team-info {
     bottom: 0;
     left: 0;
     padding: 14px 20px;
     position: absolute;
     text-align: center;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     width: 100%;
     z-index: 1;
}

.team-members-area.standard .team-member .team-info {
    left: 30px;
    right: 30px;
    width: auto;
    bottom: 30px;
}

.team-members-area.standard .team-member:hover .team-info {
    bottom: -100px;
}

.team-members-area.standard .team-member .team-info h4 {
    color: #232323;
}

.team-members-area.standard .team-member .team-info span {
    color: #666666;
}

.team-members-area.standard .team-member .team-info::after {
    background: #ffffff;
    opacity: 1;
    border-radius: 7px;
}

 .team-member .team-info::after {
     background: #1c1c1c none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.7;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .team-overlay {
     bottom: 0;
     left: 0;
     margin: 0;
     opacity: 0;
     position: absolute;
     right: 0;
     top: 0;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     z-index: 9;
}
 .team-overlay::after {
     background: #1c1c1c none repeat scroll 0 0;
     content: "";
     height: 100%;
     left: 0;
     opacity: 0.9;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: -1;
}
 .team-member:hover .team-overlay, 
 .team-member:hover .team-overlay .bio, 
 .team-member:hover .team-overlay .social-link {
     opacity: 1;
}
 .team-member:hover .team-info {
     bottom: -100%;
}
 .team-member:hover .team-overlay .social-link {
     bottom: 10%;
}
 .team-member:hover .team-overlay .bio {
     top: 35%;
}
 .team-overlay .bio {
     opacity: 0;
     padding: 0 20px;
     position: absolute;
     top: 0;
     transform: translateY(-50%);
     -webkit-transition: all 0.3s ease 0.2s;
     -moz-transition: all 0.3s ease 0.2s;
     -ms-transition: all 0.3s ease 0.2s;
     -o-transition: all 0.3s ease 0.2s;
     transition: all 0.3s ease 0.2s;
     width: 100%;
}
 .team-overlay .social-link {
     bottom: 0;
     font-size: 35px;
     opacity: 0;
     position: absolute;
     text-align: center;
     -webkit-transform:translateY(50%);
     -moz-transform: translateY(50%);
     -ms-transform: translateY(50%);
     transform: translateY(50%);
     -webkit-transition: all 0.3s ease 0.2s;
     -moz-transition: all 0.3s ease 0.2s;
     -ms-transition: all 0.3s ease 0.2s;
     -o-transition: all 0.3s ease 0.2s;
     transition: all 0.3s ease 0.2s;
     width: 100%;
}
 .team-member .team-info h4 {
     color: #ffffff;
     font-weight: 600;
     margin-bottom: 5px;
}
 .team-member .team-info span {
     color: #ffffff;
     font-weight: 600;
     text-transform: uppercase;
}
 .team-member .team-overlay .bio h4 {
     color: #ffffff;
     font-weight: 600;
}
 .team-member .team-overlay .bio p {
     color: #ffffff;
}
 .team-overlay .social-link a {
     color: #ffffff;
     font-size: 20px;
     margin: 5px;
}
 .team-overlay .social-link a:hover {
     color: #e22a31;
}

/* ============================================================== 
     # Our Goal 
=================================================================== */
 .our-goal .goal-info h2 {
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 25px;
}
 .our-goal .goal-achive .item::before {
     background: #e7e7e7 none repeat scroll 0 0;
     bottom: 0;
     content: "";
     height: 1px;
     left: 0;
     margin-bottom: -1px;
     position: absolute;
     width: 100%;
}
 .our-goal .goal-achive .item::after {
     background: #e7e7e7 none repeat scroll 0 0;
     content: "";
     height: 100%;
     margin-right: -1px;
     position: absolute;
     right: 0;
     top: 0;
     width: 1px;
}
 .our-goal .goal-achive .item {
     padding: 30px;
}
 .our-goal .goal-achive .fun-factor {
     overflow: hidden;
}

.our-goal .goal-achive .fun-fact i {
    font-size: 50px;
    margin-bottom: 30px;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    -ms-transition: all 0.35s ease-in-out;
    -o-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    color: #e22a31;
    display: inline-block;
}

 .our-goal .goal-achive .item:nth-child(2) .fun-fact i {
    color: #4154F1;
 }


 .our-goal .goal-achive .item:nth-child(3) .fun-fact i {
    color: #1FC07D;
 }


 .our-goal .goal-achive .item:nth-child(4) .fun-fact i {
    color: #E1A026;
 }



.our-goal .goal-achive .fun-fact .timer {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: capitalize;
    font-family: 'Inter', sans-serif;
    line-height: 1;
}
.goal-achive .fun-fact h4 {
    margin: 0;
    color: #666666;
    font-size: 16px;
}
 .our-goal .goal-achive .fun-fact p {
     margin: 0;
}
 .our-goal .goal-info a {
     margin-top: 10px;
}

/* ============================================================== 
     # Services 
=================================================================== */

.services-details .row {
    margin: 0;
}

 .services-details .item .thumb, 
 .services-details .item .info {
     display: table-cell;
     float: none;
     vertical-align: middle;
}
 .services-details .item .thumb img {
     width: 100%;
}
 .services-details .item .info {
     padding: 80px;
}
 .services-details .item .info h2 {
     font-weight: 600;
     text-transform: uppercase;
     margin-bottom: 25px;
}
 .services-details .item .info a {
     margin-top: 10px;
}
 .services-details .services-det-items .owl-nav {
     left: 50%;
     margin-bottom: 0;
     margin-right: 0;
     margin-top: -20px;
     position: absolute;
     top: 50%;
     width: 50%;
}
 .services-details .services-det-items .owl-nav .owl-prev, 
 .services-details .services-det-items .owl-nav .owl-next {
     font-size: 30px;
     height: 40px;
     left: 20px;
     line-height: 35px;
     padding: 0;
     position: absolute;
     text-align: center;
     width: 40px;
}
 .services-details .services-det-items .owl-nav .owl-next {
     left: auto;
     right: 20px;
}
 .services-details .services-det-items .owl-dots {
     left: 50%;
     margin-bottom: 0;
     margin-right: 0;
     margin-bottom: 20px;
     position: absolute;
     bottom: 0;
     width: 50%;
}
 .services-details .services-det-items .owl-dots .owl-dot span {
     background: #232323 none repeat scroll 0 0;
     border-radius: inherit;
     height: 4px;
     width: 30px;
}
 .services-details .services-det-items .owl-dots .owl-dot.active span, 
 .services-details .services-det-items .owl-dots .owl-dot span:hover {
     background: #e22a31 none repeat scroll 0 0;
}
 .about-area.reverse .thumb {
     padding-left: 15px;
     padding-right: 30px;
}

/* ============================================================== 
     # Clients 
=================================================================== */
 .clients-area .owl-dots .owl-dot span {
     background: #232323 none repeat scroll 0 0;
     border-radius: inherit;
     height: 5px;
     width: 25px;
}
 .clients-area .owl-dots .owl-dot.active span, 
 .clients-area .owl-dots .owl-dot span:hover {
     background: #e22a31 none repeat scroll 0 0;
}
 .clients-area .single-item {
     margin: 10px;
}
 .clients-area .single-item img {
     margin: 0 auto;
     max-height: 120px;
     padding: 10px;
     width: auto;
}

/* ============================================================== 
     # Creative Minds 
=================================================================== */
 .creative-item {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     margin-bottom: 30px;
}
 .creative-item .info {
     padding: 30px;
}
 .creative-items .cell-item {
     display: table-cell;
     float: none;
     vertical-align: middle;
     padding: 0;
}
 .creative-items .cell-item img {
     width: 100%;
}
 .creative-items .info h4 {
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: capitalize;
}

 .creative-items .info p {
    margin-bottom: 0;
 }
 .creative-items .info span {
     display: block;
     margin-bottom: 20px;
     text-transform: uppercase;
}
 .creative-items .info li {
     display: inline-block;
}
 .creative-items .info li a {
     display: inline-block;
     font-size: 20px;
     margin-right: 20px;
}
 .creative-items .info ul {
     margin-top: 20px;
}
 .creative-items .thumb {
     padding-right: 0;
}

/* ============================================================== 
     # Our Mission 
=================================================================== */
 .our-mission .mission-info .nav.nav-tabs li a, 
 .our-mission .mission-info .nav.nav-tabs li a:hover {
     background: transparent none repeat scroll 0 0;
     border-radius: inherit;
     color: #232323;
     font-weight: 600;
     margin-right: 15px;
     padding: 15px;
     position: relative;
     text-transform: uppercase;
     border: none;
}
 .our-mission .mission-info .nav.nav-tabs li a.active::after {
     background: #232323 none repeat scroll 0 0;
     bottom: -2px;
     content: "";
     height: 3px;
     left: 0;
     position: absolute;
     width: 100%;
}
 .our-mission .mission-info .nav.nav-tabs li a i {
     margin-right: 5px;
}
 .our-mission .mission-info .nav.nav-tabs {
     border-bottom: 1px solid #cdcdcd;
     margin-bottom: 30px;
     text-align: center;
}
 .our-mission .thumb {
     padding-left: 50px;
}
 .our-mission .mission-info li {
     display: inline-block;
     float: none;
}



/* ============================================================== 
     # Pricing Table 
=================================================================== */
 .pricing-item {
     background: #ffffff none repeat scroll 0 0;
     -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     -o-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     padding: 30px;
     position: relative;
     margin-bottom: 30px;
}

 .pricing-item ul {
    display: inline-block;
 }

 .pricing-simple.spicy li.pricing-header span.badge {
     background: #906f40 none repeat scroll 0 0;
     color: #ffffff;
}
 .pricing-simple li.pricing-header span.badge {
     background: #e22a31 none repeat scroll 0 0;
     border-radius: inherit;
     color: #ffffff;
     font-family: 'Inter', sans-serif;
     font-size: 12px;
     font-weight: 600;
     padding: 10px 0;
     position: absolute;
     right: -65px;
     text-transform: uppercase;
     top: 20px;
     -webkit-transform:rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
     width: 200px;
}
 .pricing-item.active {
     background: #1c1c1c none repeat scroll 0 0;
}
 .pricing-header h4 {
     text-transform: uppercase;
     font-weight: 600;
}
 .pricing-header h2 {
     font-size: 40px;
     font-weight: 600;
     margin-bottom: 0;
     color: #232323;
}
 .pricing-item .pricing-header span {
     font-weight: 600;
     text-transform: uppercase;
}
 .pricing-header {
     border-bottom: 1px solid #e5e5e5;
     margin-bottom: 20px;
     padding-bottom: 20px;
     text-align: center !important;
     display: block !important;
}
 .pricing-item.active .pricing-header {
     border-bottom: 1px solid #5a5a5a;
}
 .pricing-item .footer {
     margin-top: 20px;
     text-align: center !important;
     display: block;
}

 .pricing-item .footer a {
    display: block;
 }
 .pricing-item li {
     line-height: 40px;
     text-transform: capitalize;
     text-align: left;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .pricing-item.active li {
     color: #ffffff;
}

.pricing-item li i {
    padding-left: 25px;
    color: #00a37b;
}

.pricing-item li i.fa-times-circle {
    color: #ff99af;
}

/* ============================================================== 
     # 404 
=================================================================== */
 .error-page-area h1 {
  font-size: 150px;
  font-weight: 600;
  line-height: 120px;
  margin-bottom: 30px;
}
 .error-page-area h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 30px;
  text-transform: capitalize;
}
 .error-page-area a {
     margin-top: 15px;
}

/* ============================================================== 
     # Footer 
=================================================================== */
 footer {
     background: #1c1c1c none repeat scroll 0 0;
}
 footer .f-item h4 {
     color: #ffffff;
     font-weight: 600;
     margin-bottom: 30px;
     text-transform: uppercase;
}
 footer .f-item p {
     color: #cccccc;
     font-size: 14px;
}
 footer .f-item .address li {
     display: block;
     margin-bottom: 20px;
}
footer .f-item .address li i {
    color: #e22a31;
    display: table-cell;
    font-size: 30px;
    vertical-align: middle;
    width: 45px;
}
 footer .f-item .address li span {
     color: #cccccc;
     display: table-cell;
     vertical-align: middle;
}
 footer .f-item .address li:last-child {
     margin: 0;
}
 footer .f-item .address {
     margin-top: 30px;
}
 footer .instagram-feed li a {
     overflow: hidden;
     position: relative;
     z-index: 1;
     display: inline-block;
     float: left;
}
 footer .instagram-feed .overay {
     background: rgba(35, 35, 35, 0.8) none repeat scroll 0 0;
     bottom: -100%;
     color: #ffffff;
     display: block;
     font-size: 12px;
     left: 0;
     line-height: 20px;
     padding: 3px 0;
     position: absolute;
     text-align: center;
     -webkit-transition: all 0.35s ease-in-out;
     -moz-transition: all 0.35s ease-in-out;
     -ms-transition: all 0.35s ease-in-out;
     -o-transition: all 0.35s ease-in-out;
     transition: all 0.35s ease-in-out;
     width: 100%;
}
 footer .instagram-feed .overay i {
     margin-right: 4px;
     color: #e22a31;
}
 footer .instagram-feed li a:hover .overay {
     bottom: 0;
}
 footer .f-item.instagram-feed ul li {
     box-sizing: border-box;
     float: left;
     padding: 0 10px 10px 0;
     width: 33.333%;
     float: left;
}
 footer .f-item.instagram-feed ul li img {
     min-height: 70px;
     width: 100%;
}

footer .info .meta-title {
    font-size: 12px;
}

footer .info .meta-title a {
    text-transform: capitalize !important;
}

 footer .f-item.recent-post li a {
     color: #cccccc;
     display: block;
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
}
 footer .f-item.recent-post li a:last-child {
     display: inline-block;
     font-size: 12px;
     font-weight: 400;
}
 footer .f-item.recent-post li a:hover {
     color: #e22a31;
}
 footer .f-item.recent-post li a span {
     display: inline-block;
}
 footer .f-item.recent-post li span {
     display: inline-block;
     margin-top: 10px;
     text-transform: capitalize;
}
 footer .f-item.recent-post li{
     color: #555555;
}
 footer .f-item.recent-post li {
     border-bottom: 1px solid #232323;
     margin-bottom: 15px;
     padding-bottom: 15px;
}
 footer .f-item.recent-post li:last-child {
     border: medium none;
     margin: 0;
     padding: 0;
}
 footer .f-item.recent-post li:last-child {
     margin: 0;
}
 footer .f-item.recent-post li .thumb {
     display: table-cell;
     padding-top: 5px;
     vertical-align: top;
     width: 80px;
}
 footer .f-item .thumb img {
     width: 100%;
}
 footer .f-item.recent-post li .info {
     display: table-cell;
     padding-left: 20px;
     vertical-align: top;
     line-height: 26px;
     color: #cccccc;
}
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 40px;
    padding-top: 30px;
}

 .footer-bottom .col-md-6 {
     padding: 0;
}
 .footer-bottom p {
     color: #cccccc;
     font-size: 14px;
     margin: 0;
}
 .footer-bottom a {
     color: #e22a31;
     font-size: 14px;
}

/* ============================================================== 
     # Preloader 
=================================================================== */
 .no-js #loader {
     display: none;
}
 .js #loader {
     display: block;
     position: absolute;
     left: 100px;
     top: 0;
}
 .se-pre-con {
     position: fixed;
     left: 0px;
     top: 0px;
     width: 100%;
     height: 100%;
     z-index: 999999;
     background: url(assets/img/preloader.gif) center no-repeat #fff;
     text-align: center;
}