@font-face {
	font-family: 'CenturyGothic';
	src: url('CenturyGothic.eot');
	src: local('CenturyGothic'), local('CenturyGothic'),
		url('CenturyGothic.eot?#iefix') format('embedded-opentype');
/*
		url('CenturyGothic.woff2') format('woff2'),
		url('CenturyGothic.woff') format('woff'),
*/
/*		url('CenturyGothic.ttf') format('truetype');*/
        
	font-weight: bold;
	font-style: normal;
}
ul{
    list-style: none;
}

html{
    scroll-behavior: smooth;
    scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(100vh);
    scroll-snap-type: y mandatory;
}
 body {
     font-family: 'CenturyGothic';
     font-size: 14px;
     line-height: 1.7;
     overflow: hidden;
     letter-spacing: 1.5px;
     overflow-y: scroll;
 }


 .body-wraper {
/*     background: #272727 url("../img/body.png") repeat scroll 0 0 / contain;
/*
     overflow-y: scroll;
    overflow-x: hidden;
  height: 100vh;
  scroll-snap-type: mandatory;
  scroll-snap-points-y: repeat(100vh);
  scroll-snap-type: y mandatory;
     
*/
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     margin: 0;
     padding: 0;
/*     text-transform: uppercase;*/
     font-family: 'CenturyGothic';
     font-weight: 700;
     line-height: 1.6;
 }

 img {
     max-width: 100%;
 }

 a,
 a:hover,
 a:focus {
     text-decoration: none;
 }

 ul,
 li,
 a {
     margin: 0;
     padding: 0;
 }

 p {
     letter-spacing: 1px;
     font-size: 18px;
 }

 button:focus,
 input:focus {
     outline: none;
 }

 :-webkit-input-placeholder {
     color: inherit;
 }

 .section-padding {
/*     padding: 80px 0;*/
 }

 /*-- preloader part --*/

 #preloader {
     height: 100%;
     left: 0;
     position: fixed;
     top: 0;
     width: 100%;
     background-color: #272727;
     z-index: 99999;
 }

 #loader {
     display: block;
     position: relative;
     left: 50%;
     top: 50%;
     width: 150px;
     height: 150px;
     margin: -75px 0 0 -75px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #fff;
     -webkit-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
 }

 #loader:before {
     content: "";
     position: absolute;
     top: 5px;
     left: 5px;
     right: 5px;
     bottom: 5px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #fff;
     -webkit-animation: spin 3s linear infinite;
     animation: spin 3s linear infinite;
 }

 #loader:after {
     content: "";
     position: absolute;
     top: 15px;
     left: 15px;
     right: 15px;
     bottom: 15px;
     border-radius: 50%;
     border: 3px solid transparent;
     border-top-color: #fff;
     -webkit-animation: spin 1.5s linear infinite;
     animation: spin 1.5s linear infinite;
 }

 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         transform: rotate(0deg);
     }
     100% {
         -webkit-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 /***** section title *****/
section{
/*
    height: 100vh;
     scroll-snap-align: start;
*/
}
.parent{
    float: right;
    margin-right: 20px;
}
/*
.sec-nav{
    position: fixed;
    z-index: 999;
     top: 41%;
}
.parent ul li a{
    color: #fff;
    font-size: 9px;
}
.parent ul li.active a,
.parent ul li a:hover{
    color: #ff0;
}
*/




/*
.scrolling-navigation{
    display: none;
    width: 40px;
    height: 100%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
}

.scrolling-navigation ul{
    list-style: none;
    margin-right: 10px;
    margin-top: 10px;
    position: fixed;
    top: 40%;
    right: 10px;
    z-index: 10000;
}
.scrolling-navigation li{
    margin: 15px;
}
.scrolling-navigation li a{
    border: 4px solid #fff;
    border-radius: 100%;
    margin-bottom: 15px;
    padding: 5px;
    width: 10px;
    height: 10px;
}

.scrolling-navigation li a.active{
    background: #fff;
}
*/
/*
.sec-nav li a{
     position: relative;
  display: inline-block;
  margin-top: 20px;
}
.sec-nav li a[title]:hover:after{
  content: attr(title);
  position: absolute;
  top: -100%;
    background: none;
  right: 20px;
}
*/
.about-area {
    width: 100vw;
    height: 100vh;
}
.who-we-are{
    /*background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(255,255,255,0.5)), url(../img/who-we-are.jpg);*/
    background: url(../img/who-we-are.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    
} 

.work1{
     background: url(../img/works1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    
    
}
.team1{
    background: url(../img/team.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    
}

.client{
    background: url(../img/clientel.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    
}
.threedesign{
    
background: url(../img/wave1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}

.modular{
    background: url(../img/modular.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}

.problems{
    
    background: url(../img/.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    

}

.howwe
{
    
    background: url(../img/how-we-do-it.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
    

}

.serivces1{
    background: url(../img/services.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}
/*
.smooth-scroll{
    scroll-behavior: smooth;
    transition: 0.8s;
}
*/
 .section-title {
     left: 43px;
     position: absolute;
     top: -70px;
     z-index: 1;
 }

 .section-title h2 {
     font-size: 200px;
     font-weight: 800;
     color: #2c2c2c;
     font-family: "Open Sans", sans-serif;
     text-transform: capitalize;
     letter-spacing: 25px;
 }

 /***** section heading *****/

 .heading {
     margin-bottom: 97px;
     position: relative;
     z-index: 2;
 }

 .heading h2 {
     font-size: 36px;
     text-transform: uppercase;
     font-family: 'CenturyGothic bold';
     font-weight: 700;
     color: #fff;
     letter-spacing: 10px;
 }
 .heading h3 {
     font-size: 23px;
     text-transform: uppercase;
     font-family: 'CenturyGothic bold';
     font-weight: 700;
     color: #000;
     margin-top: 30px;
/*     letter-spacing: 10px;*/
 }
.how h3{
    text-align: center;
    font-family: 'CenturyGothic bold';
    margin-top: 30px;   
}
.timeline-panel h4{
/*    text-align: center;*/
    font-family: 'CenturyGothic bold';
    margin-top: 30px;  
}
.key h4{
    font-size: 24px;
    font-family: 'CenturyGothic bold';
}
.key p{
    font-size: 16px;
}

 .heading h2 span {
     color: #b5b5b5;
 }
.cont p{
        font-size: 15px;
    text-align: justify;
    padding-top: 100px;
}

.carousel-control.right, .carousel-control.left{
    background: none;
}
.timeline {
    position: relative;
    padding:4px 0 0 0;
    margin-top:22px;
    list-style: none;
}

.timeline>li:nth-child(even) {
    position: relative;
    margin-bottom: 50px;
    height: 180px;
    right:-100px;
}

.timeline>li:nth-child(odd) {
    position: relative;
    margin-bottom: 50px;
    height: 180px;
    left:-100px;
}

.timeline>li:before,
.timeline>li:after {
    content: " ";
    display: table;
}

.timeline>li:after {
    clear: both;
    min-height: 170px;
}

.timeline > li .timeline-panel {
  position: relative;
  float: left;
  width: 41%;
  padding: 0 20px 20px 30px;
  text-align: right;
}

.timeline>li .timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li .timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline>li .timeline-image {
    z-index: 0;
    position: absolute;
    left: 50%;
    border: 7px solid #000;
    border-radius: 100%;
    background-color: #fff;
/*    box-shadow: 0 0 5px #000;*/
    width: 200px;
    height: 200px;
    margin-left: -100px;
}

.timeline>li .timeline-image h4 {
    margin-top: 12px;
    font-size: 10px;
    line-height: 14px;
}

.timeline>li.timeline-inverted>.timeline-panel {
    float: right;
    padding: 0 30px 20px 20px;
    text-align: left;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
    right: auto;
    left: -15px;
    border-right-width: 15px;
    border-left-width: 0;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
    right: auto;
    left: -14px;
    border-right-width: 14px;
    border-left-width: 0;
}

.timeline>li:last-child {
    margin-bottom: 0;
}

.timeline .timeline-heading h4 {
  margin-top:22px;
    margin-bottom: 4px;
    padding:0;
    color: #b3b3b3;
}

.timeline .timeline-heading h4.subheading {
  margin:0;
  padding:0;
    text-transform: none;
    font-size:18px;
    color:#333333;
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
    margin-bottom: 0;
    color:#808080;
}
/*Style for even div.line*/
.timeline>li:nth-child(odd) .line:before {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 0;
    left: 690px;
    width: 4px;
    z-index: -1;
    height:340px;
    background-color: #000;
    -ms-transform: rotate(-44deg); /* IE 9 */
    -webkit-transform: rotate(-44deg); /* Safari */
    transform: rotate(-44deg);
/*    box-shadow: 0 0 5px #4582ec;*/
}
/*Style for odd div.line*/
.timeline>li:nth-child(even) .line:before  {
    content: "";
    position: absolute;
    top: 60px;
    bottom: 0;
    z-index: -1;    
    left: 450px;
    width: 4px;
    height:340px;
    background-color: #000;
    -ms-transform: rotate(44deg); /* IE 9 */
    -webkit-transform: rotate(44deg); /* Safari */
    transform: rotate(44deg);
/*    box-shadow: 0 0 5px #4582ec;*/
}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0px;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    left: 690px;
    margin-left: 0px;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 76%;
    padding: 0 0 20px 0px;
    text-align: left;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: right;
  }
  .timeline > li .line {
    display: none;
  }
}
/* Small Devices, Tablets */
@media (min-width: 768px) and (max-width: 991px) {
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0px;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    left: 520px;
    margin-left: 0px;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: left;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 70%;
    padding: 0 0 20px 0px;
    text-align: right;
  }
  .timeline > li .line {
    display: none;
  }
}
/* Custom, iPhone Retina */
@media only screen and (max-width: 767px) {
    .timeline-inverted{
        margin-top: 173px;
    }
    .marbtm{
            margin-top: 308PX;
    }
    .timeline .timeline-heading h4.subheading{
        margin-top: 10px;
    }
  .timeline > li:nth-child(even) {
    margin-bottom: 0px;
    min-height: 0px;
    right: 0px;
  }
  .timeline > li:nth-child(odd) {
    margin-bottom: 0px;
    min-height: 0px;
    left: 0px;
  }
  .timeline>li .timeline-image {
    position: static;
    width: 150px;
    height: 150px;
    margin-bottom:0px;
  }
  .timeline>li:nth-child(even) .timeline-image {
    left: 0;
    margin-left: 0;
  }
  .timeline>li:nth-child(odd) .timeline-image {
    float:right;
    left: 0px;
    margin-left:0;
  }
  .timeline > li:nth-child(even) .timeline-panel {
    width: 100%;
    padding: 0 0 20px 14px;
  }
  .timeline > li:nth-child(odd) .timeline-panel {
    width: 100%;
    padding: 0 14px 20px 0px;
  }
  .timeline > li .line {
    display: none;
  }
}
 /***** scroll up *****/

/*
 #scrollUp {
     background-color: #4B4B4B;
     border-radius: 3px;
     bottom: 20px;
     font-size: 20px;
     padding: 5px 0;
     right: 20px;
     -webkit-transition: all 0.5s ease 0s;
     -moz-transition: all 0.5s ease 0s;
     transition: all 0.5s ease 0s;
     z-index: 9 !important;
 }

 #scrollUp a.hvr-icon-bob::before {
     animation-delay: 0s, 0.3s;
     animation-direction: normal, alternate;
     animation-duration: 0.3s, 1.5s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1, infinite;
     animation-name: hvr-icon-bob-float, hvr-icon-bob;
     animation-timing-function: ease-out, ease-in-out;
     color: #fff;
     content: "";
     font-size: 22px;
     right: 12px;
     top: -16px;
     -webkit-transition: all 0.5s ease 0s;
     -moz-transition: all 0.5s ease 0s;
     transition: all 0.5s ease 0s;
 }
*/

 /***** pages title *****/

 .pages-title-area {
     height: 100vh;
     position: relative;
 }

 .pages-title-area::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(202, 202, 202, 0.47);
 }

 .page-title-content {
     position: relative;
     z-index: 1;
 }

 .page-title-content h2 {
     font-size: 48px;
     color: #EDB41E ;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     letter-spacing: 5px;
 }

 .page-title-content h2 span {
     color: #fff;
 }
.page-title-content1 h2{
    color: #f7b307c5;
    margin-top: 100px;
    
}
.about-area1 h4{
    font-size:18px;
    font-family: 'CenturyGothic bold';
    text-align: center; 
}
.about-area1 p{
    text-align: right;
    font-size: 15px;
    text-align: center;
    
}
.about-area1 h2{
    text-align: center;
    color: #EDB41E;
    
    
}
.about-area1 h3{
    font-weight: 600;
    font-family: 'CenturyGothic bold';
}
 .breadcrumb {
     background-color: transparent;
     padding: 20px 0 0;
     margin: 0;
 }

 .breadcrumb li a {
     color: #fff;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
     text-transform: uppercase;

 }

 .breadcrumb > .active {
     color: #c6a47e;
     letter-spacing: 2px;
     text-transform: uppercase;
     font-family: 'Oswald', sans-serif;
     font-weight: 400;
 }

 .breadcrumb > li + li::before {
     padding: 0 20px;
     color: #ccc;
     content: "|";
 }

 .page-social-link {
     display: none;
 }

 .page-social-link.link-fixed {
     display: block !important;
 }
.center-block{
     top: 50%;
  left: 50%;
}
 /*  ================================
    2. Header Area
    ================================ */
/*
.wrapper{
    position: sticky;
}
*/
 .header-area {
     left: 0;
     padding: 0 0 0;
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 9;
 }

 /* logo */

 .logo {
     display: inline-block;
     /* margin: 10px 0; */
 }

 .header-area .logo img{
     font-size: 24px;
     color: #f7f7f7;
     padding-left: 40px;
     position: relative;
     z-index: 999;
     transition: 0.5s;
     width: 200px;
    margin-left: 15px;

 }

 .header-area .logo.logo-fixed h2 {
     position: fixed;
 }

 .header-area .logo h2::before {
     background: rgba(0, 0, 0, 0) url("../img/after-before/logo-before.png") repeat scroll 0 0;
     content: "";
     height: 24px;
     left: 0;
     position: absolute;
     top: 4px;
     width: 22px;
 }

 .header-area .logo h2::after {
     background: rgba(0, 0, 0, 0) url("../img/after-before/logo-after.png") repeat scroll 0 0;
     content: "";
     height: 24px;
     left: 6px;
     position: absolute;
     bottom: 6px;
     width: 22px;
 }
.search a span{
    font-size: 23px;
    color: #000;
    float: right;
    margin-top: 20px;
}

 /* Main Menu */

 .menu-lightbox {
     position: fixed;
     top: 0%;
     right: 0;
     left: 0%;
     bottom: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background-color: rgba(237,180,30,.9);
     z-index: 99;
     color: #fff;
     display: none;
 }

 .menu-table {
     display: table;
     height: 100vh;
     width: 100%;
 }

 .menu-table-cell {
     display: table-cell;
     vertical-align: middle;
 }


 .menu-table-cell nav {
     left: 46%;
     position: absolute;
     top: 50%;
     transform: translate(-40%, -45%);
 }

 .primary-menu ul li {
     position: relative;
     list-style: none;
 }

 .primary-menu ul li a::before {
         content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    bottom: 5px;
    left: 0;
    background-color: #fff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transition: all .3s ease-in-out 0s;
 }

/*
 .primary-menu ul li a::after {
     background: rgba(0, 0, 0, 0) url("../img/after-before/menu-after.png") repeat scroll 0 0;
     content: "";
     height: 24px;
     right: -25px;
     position: absolute;
     bottom: 10px;
     width: 22px;
     opacity: 0;
     transition: all 0.5s ease 0s;
 }
*/

 .primary-menu ul li a {
     
     color: #fff;
     display: block;
     font-family: 'Montserrat', sans-serif;
     font-size: 22px;
     font-weight: 800;
     letter-spacing: 2.5px;
     padding: 0 0 10px;
     text-transform: uppercase;
     transition: all 0.5s ease 0s;
     position: relative;
     height: 100%;
     text-align: center;
/*     display: inline-block;*/
/*
     opacity: 1;
     transform: translate(0px, 30px);
*/
 }
.search{
        font-size: 20px;
    margin-top: 12px;
    display: inline-block;
    margin-right: 10px;
    color: #fff;
}
.primary-menu ul li p{
    margin-top: 100px;
    font-size: 16px;
    text-align: center;
    
}
 .menu-lightbox.menu-popup .primary-menu li a {
     opacity: 1;
     transform: translate(0px, 0px);
 }

 .primary-menu ul li a:hover,
 .primary-menu ul li.active a {
     color: #000;
     
 }

 .primary-menu ul li.active a::before,
 .primary-menu ul li.active a::after {
     visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
 }

 .primary-menu ul li a:hover::before,
 .primary-menu ul li a:hover::after {
     opacity: 1 !important;
 }

 .primary-menu ul li ul.drop-menu {
     position: absolute;
     left: 200px;
     top: 0;
     transition: all 0.5s ease 0s;
     visibility: hidden;
     z-index: 999;
     opacity: 0;
     width: 198px;
 }

 .primary-menu ul li:hover .drop-menu {
     opacity: 1;
     visibility: visible;
 }

 /* Menu button open */

 .menu-toggle {
     display: block;
     float: right;
     position: relative;
/*     background-color: #fff;*/
     width: 50px;
     height: 50px;
     margin-right: 25px;
     margin-top: 20px;
 }

 .menu-toggle span {
     background-color: #000;
     display: block;
     height: 3px;
     position: absolute;
     right: 10px;
     transition: all 0.6s ease 0s;
     width: 30px;
     top: 40%;
     transform: translate(0px, -50%);
 }

/*
 .menu-toggle span::before {
     background-color: #272727;
     content: "";
     display: block;
     height: 12px;
     left: -5px;
     position: absolute;
     transform: rotate(44deg);
     width: 9px;
 }
*/

 .menu-toggle span.line2 {
     right: 10px;
     top: 55%;
     transform: translate(0px, -50%);
     width: 30px;
 }

 .menu-toggle span.line3 {
     width: 30px;
     top: 70%;
     transform: translate(0px, -50%);
 }





 /* Menu button close */

 .menu-btn-close {
     position: relative;
     float: right;
     display: block;
     width: 40px;
     height: 25px;
     margin: 1px 0 0 0;
     top: 50px;
     color: #fff;
     right: 40px;
 }

 .menu-btn-close:hover,
 .menu-btn-close:focus {
     color: #c6a47e;
 }

 .menu-btn-close span {
     display: block;
     position: absolute;
     width: 100%;
     height: 0px;
     top: 40%;
     color: inherit;
     border: 1px solid;
     -webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     transform: translateZ(0);
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     transition: all 0.5s;
 }

 .menu-btn-close .line1 {
     transform: translateY(-6px);
 }

 .menu-btn-close .line2 {
     transform: translateY(6px);
 }

 .menu-btn-close.loaded .line1 {
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     transform: rotate(45deg);
 }

 .menu-btn-close.loaded .line2 {
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }

 /*  ================================
    3. Slider Area
    ================================ */
video{
    position: relative;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    -o-object-fit: cover;
    object-fit: cover;
    z-index: 0;

}
 .slider-area {
/*     background: rgba(0, 0, 0, 0);*/
/*     height: 100vh;*/
     position: relative;
     overflow: hidden;
 }
.slider-area img{
    top: 20%;
    left: 23%;
    position: absolute;
}
 .slider-area::before {
     position: absolute;
     top: 0;
     left: 0;
     content: "";
     width: 100%;
     height: 100%;
/*     background-color: rgba(43, 43, 43, 0.85);*/
 }

 .first-letter {
     display: inline-block;
     left: 50%;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
     font-family: inherit;
     opacity: .1;
     text-align: center;
 }

 .contact {
     font-family: 'Raleway', sans-serif;
     font-size: 18px;
     color: #757575;
     letter-spacing: 5.7px;
     left: 5%;
     position: absolute;
     bottom: 30%;
     transform: rotate(-90deg);
     z-index: 5;
 }

 .contact::after {
     border: 1px solid #777;
     content: "";
     height: 1px;
     position: absolute;
     right: -40%;
     top: 50%;
     width: 100px;
 }

 /* single slider */

 .slider-table {
     display: table;
     width: 100%;
     height: 100vh;
 }

 .slider-table-cell {
     display: table-cell;
     vertical-align: middle;
 }

 .slider-info h2,
 .slider-info h3 {
     color: #f7f7f7;
     font-size: 50px;
     letter-spacing: 10px;
 }

 .slider-info h2 span,
 .slider-info h3 span {
     color: #c6a47e;
 }

 .slider-wraper .owl-nav div {
     color: #fff;
     font-size: 22px;
     position: absolute;
     top: 50%;
     transform: translateY(0, -50%);
     transition: 0.5s;
 }

 .slider-wraper .owl-nav div:hover {
     color: #c6a47e;
 }

 .slider-wraper div.owl-prev {
     opacity: 0;
     left: -3%;
 }

 .slider-wraper div.owl-next {
     left: auto;
     opacity: 0;
     right: -3%;
 }

 .slider-area:hover .slider-wraper div.owl-prev {
     left: 1%;
     opacity: 1;
 }

 .slider-area:hover .slider-wraper div.owl-next {
     right: 1%;
     opacity: 1;
 }

 /* /.single slider */

 .details {
     position: absolute;
     left: 50%;
     bottom: 30%;
     transform: translate(-50%, -50%);
     color: #fff;
     z-index: 5;
     width: 100%;
     text-align: center;
 }

 .details span {
     font-size: 12px;
     letter-spacing: 3px;
     margin-right: 60px;
     text-transform: uppercase;
 }

 .details span i.fa {
     margin-right: 10px;
 }

 .header-link {
     position: relative;
 }

 .social-link {
    bottom: 5%;
    /* margin-bottom: 40px; */
    position: fixed;
    right: 50px;
    transition: all 0.5s ease 0s;
    z-index: 111111111;
 }

 .link-fixed {
     bottom: 5%;
     position: fixed;
     right: 12%;
 }

 .social-link i.fab {
/*
     width: 40px;
     height: 40px;
*/
     line-height: 40px;
     color: #fff;
/*     border: 1px solid #fff;*/
/*     text-align: center;*/
     margin-right: 5px;
     transition: 0.5s;
     font-size: 20px;
 }

 .social-link i.fab:hover {
     color: #fff;
     
 }
 .social-link1 i.fab {
     width: 40px;
     height: 40px;
     line-height: 40px;
     color: #fff;
     border: 1px solid #fff;
     text-align: center;
     margin-right: 5px;
     transition: 0.5s;
     font-size: 16px;
 }

.social-link1 a #insta:hover{
    color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

.social-link1 a #face:hover{
    color: #4267B2;
}

.social-link1 a #link:hover{
    color: #0077b5;
}

.social-link1 a #youtube:hover{
    color: red;
    
}
.social-link1 a #pin:hover{
    color:#c8232c;
}

 .slider-indicator.hvr-icon-hang {
     padding: 0;
 }

 .slider-indicator {
     border-radius: 50px;
    bottom: 0%;
    color: #fff;
    cursor: pointer;
    height: 35px;
    left: 0;
    font-size: 36px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 22px;
    z-index: 5;
     transform: translateX(10px;)
 }
 .slider-indicator-up {
     border-radius: 50px;
    bottom: 10%;
    color: #fff;
    cursor: pointer;
    height: 35px;
    left: 0;
    font-size: 36px;
    margin: 0 auto;
    position: absolute;
    right: 0;
    width: 22px;
    z-index: 5;
     transform: translateX(10px;)
 }

 .slider-line {
     background-color: #fff;
     bottom: 0;
     height: 70px;
     left: 0;
     margin: auto;
     position: absolute;
     right: 0;
     width: 1px;
 }

 .hvr-icon-hang::before {
     animation-delay: 0s, 0.3s;
     animation-direction: normal, alternate;
     animation-duration: 0.3s, 1.5s;
     animation-fill-mode: forwards;
     animation-iteration-count: 1, infinite;
     animation-name: hvr-icon-hang-sink, hvr-icon-hang;
     animation-timing-function: ease-out, ease-in-out;
     content: "|";
     font-size: 10px;
     right: 6px;
 }
.fa-angle-double-up{
    bottom: 25%;
}
 /*  ================================
    4. About & Service Area
    ================================ */
.what-we-do p{
    font-size: 18px;
    text-align: center;
}
.what-we-do p span{
    color: #000;
    font-weight: 600;
}
 .about-area {
     position: relative;
     
    /* padding-top: 60px; */
/*     background: url("../img/1bg.jpeg") no-repeat cover;*/
     
     
 }
.about-area .content{
       margin-left: auto;
    margin-right: auto;
    display: table;
    vertical-align: middle;
    text-align: center;
}

/*
 .about-area::before {
     background: url("../img/1bg.jpg") no-repeat;
     content: "";
     background-size: contain;
     background-position: center;
     height: 86px;
     left: 0;
     position: absolute;
     top: 45%;
     width: 86px;
 }
*/
.about-area h1{
    color: #000;
    margin-right: auto;
    font-family: 'CenturyGothic';
    font-size: 68px;
    letter-spacing: -2px;
    text-shadow: 
/*    line-height: 68px;*/
    letter-spacing: -2px;
    text-shadow: 2px 2px 0 rgba(255,255,255,.3);
}
.about-area a.btn{
        /*position: absolute;*/
    color: #fff;
    
    /*margin-left: -55px;*/
    /* margin-right: 51px; */
    /* bottom: 0; */
    /* margin-right: auto; */
    background: #edb41ed1;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #edb41e;
    
} 
.btn{
    border-radius: 0 !important;
}
.about-area a.btn1{
     position: absolute;
    color: #fff;
    top: 52%;
    margin-left: -58px;
    /* margin-right: 51px; */
    /* bottom: 0; */
    /* margin-right: auto; */
    background: #edb41ed1;
    padding: 15px;
    font-size: 16px;
    border: 2px solid #edb41e;
    border-radius: 0 !important;
}
/*
 .about-area::after {
     background: rgba(0, 0, 0, 0) url("../img/after-before/about-area-after.png") repeat scroll 0 0;
     content: "";
     height: 68px;
     right: 1%;
     position: absolute;
     top: 45%;
     width: 58px;
 }
*/

 .exprience {
     margin-bottom: 93px;
 }

 .about-img {
     box-shadow: 10px 10px 0 #303030;
 }

 .mobile-ver {
     display: none;
 }

 .about-title-wraper {
     margin-top: 35px;
     position: relative;
     z-index: 3;
 }

 .about-title-wraper h2 {
     color: #ffffff;
     font-size: 30px;
     letter-spacing: 1px;
 }

 .about-title-wraper p {
     color: #ffffff;
     font-weight: 700;
     padding-left: 60px;
     padding-right: 191px;
 }

 .about-title::before {
     background-color: #c6a47e;
     bottom: 0;
     content: "";
     height: 75px;
     left: -18px;
     position: absolute;
     width: 100px;
     z-index: -1;
 }

 .about-page {
     background: url("../img/1bg.jpg") no-repeat scroll center center / cover;
 }

 .about-top {
     margin-bottom: 180px;
 }

 .about-info-img {
     padding-left: 95px;
 }

 .about-details {
     width: 470px;
     padding: 80px 45px;
     background-color: #434343;
     position: absolute;
     top: 130px;
     right: 16%;
     z-index: 1;
 }

 .about-details h3 {
     color: #ffffff;
     font-size: 24px;
     font-family: "Open Sans", sans-serif;
     font-weight: 600;
     margin-bottom: 10px;
     text-transform: inherit;
 }

 .about-details h3 span {
     color: #c6a47e;
 }

 .about-details p {
     color: #fff;
 }

 .about-middle {
     overflow: hidden;
     margin-bottom: 30px;
 }

 .single-about {
     position: relative;
 }

 .single-about::before {
     position: relative;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(66, 66, 66, 0.58);
     content: "";
     transform: scale(0);
     transition: 0.5s;
 }

 .about-overflow {
     position: absolute;
     text-align: center;
     top: 50%;
     left: 50%;
     width: 70%;
     transform: translate(-50%, -50%);
     opacity: 0;
     transition: 0.5s;
 }

 .about-overflow img {
     margin-bottom: 10px;
 }

 .about-overflow p {
     color: #fff;
 }

 .single-about:hover.single-about::before {
     transform: scale(1);
 }

 .single-about:hover .about-overflow {
     opacity: 1;
 }

 .about-bottom {
     overflow: hidden;
 }

 .about-bottom-left {
     padding: 37px 75px 95px 151px;
     background: url("../img/about/dot-bg.png");
     color: #fff;
     position: relative;
 }

 .about-bottom-left::before {
     position: absolute;
     top: 25px;
     left: 0;
     width: 150px;
     border: 1px solid #c6a47e;
     content: "";
 }

 .about-bottom-right {
     position: relative;
 }

 .about-bottom-right::before {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     background-color: rgba(52, 54, 55, 0.8);
     content: "";
 }

 .about-bottom-right img {
     width: 100%;
 }

 .img_set {
     margin-left: 160px;
 }

 /* service */

.services .service_box {
    
    display: flex;
}
.services .service_box .service_box_content {
    width: 33.3%;
}

.service_box_content h5{
    margin-top: 60px;
    color: #000;
    font-weight: bold;
    font-family: 'CenturyGothic bold';
    font-size: 16px;
    text-align: center;

}
.service_box_content p {
    margin-top: 20px;
    font-size: 10px;
    color: grey;
    text-align: center;
}
 .service-dec {
     position: relative;
     margin-top: 60px;
 }

 .service-ovely-img {
     position: absolute;
     right: 0;
 }

 .service-ovely-img::before {
     background-color: rgba(43, 43, 43, 0.8);
     content: "";
     height: 100%;
     position: absolute;
     right: 0;
     top: 0;
     width: 100%;
 }

 .service-img {
     height: 330px;
     width: 330px;
     position: absolute;
     right: 0;
     top: 60px;
 }

 .service-img::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(43, 43, 43, 0.8);
     content: "";
 }

 .service-img img {
     width: 100%;
     height: 100%;
 }

 .short-dec {
     padding: 140px 0 60px 45px;
     position: relative;
 }

 .short-dec::before {
     background: rgba(0, 0, 0, 0) url("../img/after-before/about-before.png") repeat scroll 0 0;
     content: "";
     height: 116px;
     left: 35%;
     position: absolute;
     top: -15%;
     width: 116px;
 }

 .short-title {
     margin-bottom: 20px;
 }

 .short-title > h3 {
     font-size: 24px;
     color: #fff;
     font-weight: 600;
     font-family: "Open Sans", sans-serif;
 }

 .short-title > h3 span {
     color: #c6a47e;
 }

 .short-dec > p {
     color: #fff;
     padding-right: 80px;
 }

 .service {
     background: rgba(0, 0, 0, 0) url("../img/about/dot-bg.png") repeat scroll 0 0;
     bottom: -170px;
     padding: 60px 0 60px 65px;
     position: absolute;
     width: 100%;
 }

 .single-service {
     padding-top: 20px;
 }

 .single-service-over {
     position: relative;
 }

 .single-service img {
     margin-bottom: 20px;
 }

 .single-service h2 {
     color: #303030;
     font-family: "Open Sans", sans-serif;
     font-size: 72px;
     font-weight: 700;
     left: 25%;
     position: absolute;
     top: -16px;
 }

 .single-service h3 {
     color: #fff;
     font-size: 18px;
     letter-spacing: 2px;
     font-weight: 400;
 }

 .service-middle h3 {
     color: #c6a47e !important;
 }
.bluecross h2{
    font-family: 'CenturyGothic bold';
    font-size: 26px;
    margin-bottom: 30px;
}
.bluecross h5{
    font-size: 18px;
        font-family: 'CenturyGothic bold';
        font-weight: 600;
}
.bluecross p{
    font-size: 15px;
}
.thumbnail{
    border: none;
}
.client img{
        margin-bottom: 30px;
    border: 1px solid #000;
}
.team{
    margin-bottom: 40px;
    padding: 30px;
    background: #f8f8f8;
}
.team .img_section{
    position: relative;
    
}
.team .img_section .title_section{
    position: absolute;
    /* margin: 20px; */
    bottom: 0;
    left: 25px;
    right: 25px;
    bottom: 25px;
    height: 100px;
    background: #00000094;
    color: #fff;
    padding: 15px;
    transition: 0.5s ease-in-out;
    overflow: hidden;
    
}
.pt_20{
    padding-top: 20px;
}
.team .img_section:hover .title_section{
    height: calc(100% - 60px);
}
.team img{
    /* border-radius: 100%; */
}
.team p{
    font-size: 15px;
    text-align: center;
}
 /*  ================================
    5. Project Area
    ================================ */

 .project-area {
     position: relative;
 }

 .single-project {
     position: relative;
     /*width: 25%;*/
     float: left;
     display: block;
 }

 .single-project img {
     width: 100%;
 }

 .project-wraper {
     position: relative;
     z-index: 5;
 }

 .project-title {
     left: 0;
     top: 40px;
 }

 /*.single-project:first-child,
 .single-project:nth-child(4) {
     width: 50%;
 }*/

/*
 .single-project:hover.single-project img {
     -webkit-filter: blur(5px);
     filter: blur(5px);
 }
*/

 .project-overly {
     height: 100%;
     left: 0;
     padding-left: 30px;
     padding-top: 50px;
     position: absolute;
     top: 0;
     width: 100%;
   
 }

 .project-overly h3 {
     color: #fff;
     font-size: 18px;
     font-weight: 400;
     letter-spacing: 5px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     position: relative;
 }

 .project-overly h3::before {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 4%;
     background-color: #373737;
     content: "";
     height: 2px;
     opacity: 0;
     transition: all 0.5s ease 0s;
 }

 
 .single-project:hover .project-overly h3::before {
     opacity: 1;
 }

 .gallery_product:hover .project-overly {
     opacity: 1;
 }
.filter hdpe 
 
/* .project-overly {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
} */
 .project-overly p {
     color: #fff;
     opacity: 0;
     transition: all 0.5s ease 0s;
     padding-right: 5px;
 }

 .single-project:hover .project-overly p {
     opacity: 1;
 }

 .project-page {
     background: rgba(0, 0, 0, 0) url("../img/background/project-title-bg.jpg") no-repeat scroll center center / cover;
 }

 .project-list-area {
     margin: 20px 0 0;
 }

 /*isotope menu*/

 .iso-nav {
/*     margin-bottom: 40px;*/
     background-color: #000;
     padding: 10px 20px;
     position: relative;
 }

 .iso-nav::before {
     position: absolute;
     top: 0;
     left: -10%;
     width: 10%;
     height: 100%;
     content: "";
     background-color: #a9a9a9;
 }
 .iso-nav::after {
     position: absolute;
     top: 0;
     right: -10%;
     width: 10%;
/*     height: 100%;*/
     content: "";
     background-color: #a9a9a9;
 }

 .iso-nav ul li {
     color: #fff;
     cursor: pointer;
     padding-right: 10px;
     display: inline-block;
     text-transform: capitalize;
     transition: all 0.5s ease 0s;
     font-size: 14px;
 }
 .iso-nav ul li a{
     color:#fff;
 }

 .iso-nav ul li:hover {
     color: #f4c41e;
 }

 .iso-nav ul li img {
     width: 15px;
     margin: 0 6px;
 }

 .single-project-list {
     width: 100% !important;
     /* margin-bottom: 30px; */
 }

 .single-project-list .project-overly  h3 {
     opacity: 0;
     transition: 0.5s;
 }
 .single-project-list .project-overly{
     background-color: rgba(0, 0, 0, 0.527);
     opacity: 0;
     transition: 0.5s;
 }

 .gallery_product {
     padding: 0;

 }
.gallery_product:hover.project-overly {
    opacity: 1;

}
 .single-project-list:hover.single-project-list .project-overly  h3 {
     opacity: 1;
 }

 .single-project-list .project-overly p {
     padding-right: 45px;
 }

 .load-btn a {
     padding: 15px 25px;
     background-color: #C6A47E;
     color: #fff;
     margin: 30px 0 0;
     display: inline-block;
     text-transform: capitalize;
     transition: 0.5s;
 }

 .load-btn a i.fa {
     margin-right: 10px;
 }

 .load-btn a:hover {
     background-color: #2B2B2B;
 }

 .iso-nav ul li.project-active {
     color: #f4c41e;
 }

 /***** single project *****/

 .single-project-area {
     position: relative;
     padding-top: 80px;
 }

 .single-project-area .project-title {
     top: 0;
 }

 .project-details-page {
     background: rgba(0, 0, 0, 0) url("../img/background/project-details-bg.jpg") no-repeat scroll center center / cover;
 }

 .single-project-slider .owl-nav {
     display: flex;
     position: absolute;
     left: 0;
     bottom: 0;
 }

 .single-project-slider .owl-nav .owl-prev {
     border-right: 1px solid #F1F1F1;
 }

 .single-project-slider .owl-nav div {
     padding: 5px 25px;
     color: #272727;
     font-size: 18px;
     background-color: #fff;
     transition: 0.5s;
 }

 .single-project-slider .owl-nav div:hover {
     color: #C6A47E;
 }

 .progress-project {
     margin-top: 40px;
     overflow: hidden;
 }

 .progress-details {
     width: 150px;
     float: left;
     margin-right: 50px;
 }

 .progress-details h2 {
     font-size: 18px;
     color: #c6a47e;

     margin-bottom: 10px;
 }

 .progress-details h3 {
     font-size: 18px;
     color: #fff;
     font-weight: 300;
     text-transform: inherit;

 }

 .single-project-details p {
     color: #fff;
 }

 .single-project-details h2 {
     margin: 70px 0 30px;
     font-weight: 400;
     font-size: 30px;
     color: #fff;
     letter-spacing: 5px;
 }

 /*gutter*/

.project-wraper.gutter .single-project {
    padding: 10px;
}


/*project-wraper 2 grid*/

.project-wraper.col-2 .single-project {
    width: 49.99%;
}


/*project-wraper 3 grid*/

.project-wraper.col-3 .single-project {
    width: 33.3333333%;
}

/*project-wraper 4 grid*/

.project-wraper.col-4 .single-project {
    width: 24.98%;
}

/*project-wraper 5 grid*/

.project-wraper.col-5 .single-project {
    width: 19.99%;
}

/*project-wraper 6 grid*/

.project-wraper.col-6 .single-project {
    width: 16.666666667%;
}

 .share {
     margin-top: 70px;
 }

 .share span {
     font-size: 18px;
     color: #fff;
     margin-right: 30px;
 }

 .share a i.fab {
     color: #fff;
     margin-right: 20px;
     transition: 0.5s;
     font-size: 18px;
 }

 .share a i.fa:hover {
     color: #c6a47e;
 }

.box12{position:relative}
.box12 .box-content,.box12:after{position:absolute;transition:all .3s ease 0s}
.box12:after{content:"";width:65%;background:rgba(28,28,28,.8);padding-bottom:65%;opacity:0;top:50%;left:50%;transform:rotate(0) translate(-50%,-50%);transform-origin:0 0 0}
.box12:hover:after{transform:rotate(-45deg) translate(-50%,-50%);opacity:1}
.box12 img{width:100%;height:auto}
.box12 .box-content{width:100%;top:35%;left:0;opacity:0;z-index:1}
.box12:hover .box-content{opacity:1}
.box12 .title{padding:10px 0;color:#fff;margin:0;border-top:2px solid #fff;border-bottom:2px solid #fff}
.box12 .icon{padding:0;margin:12px 0 0;list-style:none}
.box12 .icon li a{display:block;width:35px;height:35px;line-height:35px;border-radius:50%;border:1px solid #fff;font-size:18px;color:#fff;margin-right:10px;transition:all .3s ease 0s}
.box12 .icon li a:hover{border-radius:0}
@media only screen and (max-width:990px){.box12{margin-bottom:20px}
}

 /*  ================================
    6. Video Area
    ================================ */

 .video-area {
     text-align: center;
     position: relative;
 }

 .video-title {
     right: 0;
     top: -84px;
     left: auto;
 }

 .overflow-box {
     background-color: #2c2c2c;
     color: #383838;
     height: 150px;
     padding-left: 30px;
     padding-top: 85px;
     position: absolute;
     text-align: left;
     top: 40%;
     width: 50%;
 }

 .overflow-box > h3 {
     font-size: 30px;
     font-weight: 400;
     letter-spacing: 10px;
 }

 .overflow-box::before {
     background: rgba(0, 0, 0, 0) url("../img/after-before/overflow-before.png") repeat scroll 0 0;
     content: "";
     height: 58px;
     left: 30px;
     position: absolute;
     top: -20px;
     width: 58px;
 }

 .video-box {
     width: 660px;
     height: 450px;
     background-color: #fff;
     padding: 24px 45px;
     border-radius: 10px;
     position: relative;
     z-index: 5;
     margin-top: 52px;
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }

 .video-box::before {
     position: absolute;
     width: 150px;
     border: 1px solid #C6A47E;
     content: "";
     top: 50%;
     right: -10%;
 }

 .video-box img {
     width: 100%;
     height: 100%;
 }

 .video-btn {
     left: 50%;
     margin: auto;
     position: absolute;
     top: 50%;
     transform: translate(-50%, -50%);
     cursor: pointer;
 }

 .video-btn i.fa {
     background-color: #fff;
     border-radius: 50%;
     height: 70px;
     line-height: 70px;
     width: 70px;
     font-size: 25px;
     color: #272727;
 }

 .video-btn.hvr-ripple-out::before {
     border-color: #fff;
     border-radius: 50%;
 }

 /*  ================================
    7. Team Area
    ================================ */

 .team-area {
     position: relative;
 }

 .team-title {
     left: 0;
     text-align: center;
     top: 18px;
     width: 100%;
 }

 .single-member {
     background-image: url("../img/member-bg.png");
     background-position: right bottom;
     background-repeat: no-repeat;
     overflow: hidden;
     position: relative;
     z-index: 2;
 }

 .member-img {
     width: 40%;
     float: left;
 }

 .member-img img {
     border-radius: 50%;
 }

 .member-info {
     float: right;
     padding: 10px 0 0 20px;
     width: 60%;
 }

 .member-info h2 {
     color: #c6a47e;
     font-weight: 700;
     font-family: "Open Sans", sans-serif;
     letter-spacing: 3.5px;
     font-size: 30px;
     text-transform: capitalize;
     padding-bottom: 3px;
 }

 .member-info h3 {
     color: #fff;
     font-size: 24px;
     font-family: "Open Sans", sans-serif;
     letter-spacing: 3.5px;
     font-weight: 400;
     text-transform: capitalize;
 }

 .member-info span {
     font-size: 12px;
     font-weight: 500;
     color: #fff;
     padding-bottom: 10px;
     display: block;
 }

 .member-info p {
     color: #fff;
     padding-bottom: 10px;
 }

 .member-social-link a i.fa {
     color: #fff;
     padding-right: 20px;
     transition: 0.5s;
 }

 .member-social-link a i.fa:hover {
     color: #c6a47e;
 }

 .team-wraper .owl-nav {
     display: flex;
     position: absolute;
     right: 11%;
     top: -30%;
     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }

 .team-wraper .owl-nav div {
     padding: 5px 22px;
     color: #fff;
     font-size: 18px;
     background-color: #272727;
     transition: 0.5s;
 }

 .team-wraper .owl-nav div:hover {
     color: #c6a47e !important;
 }

 .team-wraper .owl-nav .owl-prev {
     border-right: 1px solid #fff;
 }

 /*  ================================
    8. Brand Area
    ================================ */

 .brand-area {
     background-color: #282828;
     position: relative;
     margin-top: 260px;
 }

 .brand-area::before {
     top: -233px;
     content: "";
     height: 234px;
     left: 0;
     position: absolute;
     width: 100%;
     background: url("../img/section-before.png");
 }

 .brand-area::after {
     background-color: #c6a47e;
     top: -150%;
     content: "";
     height: 100px;
     right: 50%;
     position: absolute;
     width: 1px;
 }

 .before-none {
     background-color: transparent !important;
     margin-top: 125px;
 }

 .before-none::before,
 .before-none::after {
     display: none;
 }

 /*  ================================
    9. Contact Area
    ================================ */

 .contact-area {
     background-color: #282828;
     position: relative;
     padding: 80px 0 0;
 }

 .contact-page-area {
/*     padding-top: 200px;*/
 }

 .contact-title {
     left: 0;
     top: 43px;
 }

 .contact-title h2 {
     line-height: 1;
 }

 .contact-heading {
     margin-bottom: 0px;
 }

 .contact-form {
     background-color: #2b2b2b;
     padding: 68px 50px;
     position: relative;
     width: 100%;
     z-index: 1;
     overflow: hidden;
 }

 .contact-form input,
 .contact-form textarea {
     border: 1px solid #bfbfbf;
     background-color: #eaeaea;
     color: #747474;
     font-size: 12px;
     letter-spacing: 5px;
     margin-bottom: 20px;
 }
.contact-form input[type="submit"]{
     border: 1px solid #bfbfbf;
     background-color: #5f5f5f;
     color: #fff;
     font-size: 12px;
     letter-spacing: 5px;
     margin-bottom: 20px;
}
.contact-form input[type="submit"]:hover{
     
     background-color: #fff;
     color: #000;
     
}
 .contact-form textarea {
     height: 145px;
 }

 .form-control:focus {
     border-color: transparent;
     box-shadow: none;
 }

 .contact-form button {
     padding: 10px 40px;
     background-color: #c6a47e;
     letter-spacing: 5px;
     color: #fff;
     border: 0;
     border-radius: 5px;
     font-size: 14px;
     margin-top: 5px;
     transition: 0.5s;
 }

 .contact-form button:hover {
     background-color: #282828;
 }

 .contact-form button.sub-btn {
     width: 100%;
     background-color: #826e58;
 }

 .contact-form button.sub-btn:hover {
     background-color: #323232;
 }

 .map {
     background: rgba(0, 0, 0, 0) url("../img/map.png") no-repeat scroll center center / contain;
     height: 390px;
     margin-top: 70px;
     position: relative;
     z-index: 1;
 }

 .map::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(41, 41, 41, 0.7);
 }

 .contact-title-page {
     background: rgba(0, 0, 0, 0) url("../img/background/contact-us.jpg") no-repeat scroll bottom center / cover;
 }
 
  .join-title-page {
     background: rgba(0, 0, 0, 0) url("../img/background/join-us.jpg") no-repeat scroll center center / cover;
 }

 .google-map-area {
     position: relative;
     margin-bottom: 60px;
/*     z-index: 9;*/
 }

 #map {
     width: 100%;
     height: 100vh;
 }

 .address {
     position: absolute;
     top: 17%;
     right: 8%;
/*     z-index: 9;*/
     width: 470px;
     height: 430px;
     background-color: rgba(43, 43, 43, 0.8);
     padding: 85px 60px;
 }

 .address .section-title {
     width: 100%;
     left: 0;
     top: 8%;
 }

 .address .section-title h2 {
     font-size: 60px;
     color: #313131;
     font-family: 'Oswald', sans-serif;
     text-align: center;
     text-transform: uppercase;
 }

 .address .heading {
     margin-bottom: 30px;
 }

 .address .heading h2 {
     font-size: 18px;
     letter-spacing: 1px;
 }

 .address-info ul li {
     color: #fff;
     position: relative;
     padding-left: 25px;
     margin-bottom: 15px;
     list-style: none;
 }

 .address-info ul li i.fa {
     color: #fff;
     position: absolute;
     left: 0;
     top: 6px;
 }

 .address .share {
     margin-top: 0;
 }

 /*  ================================
    10. Blog Area
    ================================ */

 .blog-page {
     background: rgba(0, 0, 0, 0) url("../img/background/blog-title-bg.jpg") no-repeat scroll center center / cover;
 }

 .blog-grid-page {
     background: rgba(0, 0, 0, 0) url("../img/background/blog-grid-bg.jpg") no-repeat scroll center center / cover;
 }

 .blog-area {
     position: relative;
 }

 .blog-title {
     top: 0;
     left: 0;
 }

 .blog-list {
     position: relative;
     z-index: 1;
 }

 .single-blog-post {
     margin-top: 70px;
 }

 .single-blog-post a h2 {
     color: #fff;
     font-size: 30px;
     letter-spacing: 5px;
     font-weight: 400;
     padding-right: 200px;
     margin-bottom: 50px;
 }

 .grid-post a h2 {
     padding: 0;
 }

 .post-info {
     display: flex;
     padding: 20px 0;
     border-bottom: 2px solid #383838;
     margin-bottom: 40px;
 }

 .post-video,
 .post-img {
     position: relative;
     display: block;
 }

 .post-video::before,
 .post-img::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     background-color: rgba(43, 43, 43, 0.90);
     transform: scaleX(0);
     transition: all 0.5s ease 0s;
 }

 .post-video::after,
 .post-img::after {
     background-color: #C5A57F;
     border-radius: 50%;
     bottom: 0;
     color: #2B1D1C;
     content: "\f04b";
     font-family: fontawesome;
     font-size: 22px;
     height: 60px;
     left: 0;
     line-height: 60px;
     margin: auto;
     position: absolute;
     right: 0;
     text-align: center;
     top: 0;
     transform: scale(3);
     transition: all 0.5s ease 0s;
     width: 60px;
     opacity: 0;
 }

 .post-img::after {
     content: "";
 }

 .single-blog-post:hover .post-img::before,
 .single-blog-post:hover .post-img::after,
 .single-blog-post:hover .post-video::before,
 .single-blog-post:hover .post-video::after {
     transform: scale(1);
     opacity: 1;
 }

 .author-info {
     width: 60%;
 }

 .author-info img {
     border-radius: 50%;
     width: 60px;
     height: 60px;
     border: 2px solid #4f4f4f;
     margin-right: 15px;
 }

 .author-info a h3 {
     color: #fff;
     display: inline-block;
     font-size: 14px;
     font-family: "Open Sans", sans-serif;
 }

 .post-date {
     width: 40%;
     letter-spacing: 3px;
     padding: 15px 0;
 }

 .single-blog-post p a,
 .post-date a {
     color: #c6a47e;
 }

 .single-blog-post p {
     color: #fff;
 }

 .blog-comment-wraper {
     padding: 30px;
     margin-top: 30px;
     float: left;
 }

 .blog-comment-wraper h3 {
     border-bottom: 1px solid #fff;
     color: #fff;
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 40px;
     padding: 0 0 10px;
 }

 .comment-author {
     float: left;
     width: 15%;
 }

 .comment-author img {
     border-radius: 50%;
     height: auto;
     width: 80px;
 }

 .comment-author h4 {
     color: #272727;
     font-size: 14px;
     padding: 10px 0 0;
 }

 .reply-commnet-content .comment-author h4 {
     color: #fff;
 }

 .comment-content {
     float: right;
     margin: 0 0 30px;
     padding: 0 20px;
     width: 85%;
 }

 .comment-content i.fa {
     color: #fff;
 }

 .comment-content p {
     margin: 15px 0;
     color: #fff;
 }

 .comment-content a {
     color: #fff;
     float: right;
     font-weight: 700;
 }

 .comment-content a i.fa {
     margin-left: 5px;
     color: #fff;
 }

 .reply-commnet-content {
     overflow: hidden;
     padding-left: 110px;
     width: 100%;
 }

 .comment-content span {
     font-size: 16px;
     font-weight: 600;
     margin-left: 5px;
     margin-right: 15px;
     text-transform: capitalize;
     color: #fff;
 }

 h3.comment-heading {
     color: #4c4c4c;
     display: inline-block;
     font-size: 30px;
     font-weight: 400;
     margin: 40px 0;
     text-transform: uppercase;
 }

 .comment-form {
     float: left;
 }

 .comment-input-form {
     float: left;
     overflow: hidden;
     padding-right: 20px;
     width: 50%;
 }

 .comment-input-form:nth-child(2) {
     padding-right: 0;
 }

 .comment-input-form input {
     background-color: #323232;
     border: 0 none;
     color: #747474;
     height: 50px;
     padding: 0 20px;
     width: 100%;
     letter-spacing: 5px;
 }

 .comment-textarea {
     float: left;
     width: 100%;
 }

 .comment-textarea textarea {
     background-color: #323232;
     border: 0 none;
     color: #747474;
     font-weight: 400;
     height: 200px;
     letter-spacing: 5px;
     margin: 20px 0 0;
     padding: 20px;
     width: 100%;
 }

 .post-button {
     background-color: #C6A47E;
     border: 0;
     color: #fff;
     float: right;
     margin-top: 30px;
     padding: 10px;
     text-transform: uppercase;
     transition: 0.5s;
 }

 .post-button:hover {
     background-color: #383838;
 }

 /***** sidebar *****/

 .sidebar {
     margin-top: 210px;
     float: left;
 }

 .single-widget {
     margin: 0 0 60px;
 }

 .single-widget:last-child {
     margin: 0;
 }

 .single-widget h3 {
     color: #fff;
     letter-spacing: 3px;
     position: relative;
     padding: 0 0 20px;
     margin: 0 0 30px;
     font-size: 18px;
 }

 .single-widget span {
     padding: 10px 20px;
     color: #fff;
     background-color: #383838;
     display: inline-block;
     margin-bottom: 5px;
     transition: 0.5s;
     text-transform: capitalize;
 }

 .single-widget span:hover {
     background-color: #c6a47e;
 }

 .single-widget h3::before {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 20%;
     border: 1px solid #c6a47e;
     content: "";
 }

 .single-widget img {
     width: 118px;
     height: auto;
     border-radius: 50%;
     margin: 0 0 40px;
 }

 .single-widget p {
     color: #fff;
 }

 .recent-post {
     display: flex;
     margin-bottom: 10px;
 }

 .recent-post-img img {
     border-radius: 0;
     margin: 0;
 }

 .recent-post-info {
     color: #c6a47e;
     letter-spacing: 3px;
     padding-left: 20px;
     padding-top: 10px;
 }

 .recent-post-info h4 {
     color: #fff;
     font-size: 16px;
     font-weight: 400;
     padding-bottom: 15px;
     text-transform: capitalize;
     letter-spacing: normal;
 }

 /*  ================================
    11. Footer Area
    ================================ */
.footer{
    margin-top: 10px;
}
.footer a{
/*    margin-top: 100px;*/
        color: #fff;
    font-size: 20px;
}
.footer  p {
    color: #fff;
    font-size: 12px;
    text-align: justify;
    
}
.footer li i {
     color: #fff; 
}
.footer li p {
    color: #fff;
    text-align: justify;
}
.footer li span {
    text-align: justify;
}

.footer span {
    color: #fff;
    font-size: 12px;
}

 .social-link1 {
     right: 0;
     transition: all 0.5s ease 0s;
     z-index: 99;
 }
 .footer-area {
     padding: 30px 0;
     background-color: #282828;
 }
.footer-area img{
    margin-bottom: 20px;
}

 .bg-trans {
     background-color: transparent !important;
 }

 .copy-right-text {
     color: #fff;
     letter-spacing: 3.5px;
 }


 /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side */
  .flip-box-front {
    background-color: #bbb;
    color: black;
  }
  
  /* Style the back side */
  .flip-box-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }
  Vertical Flip
  To do a vertical flip instead of a horizontal, use the rotateX method instead of rotateY:
  
  Example
  .flip-box:hover .flip-box-inner {
    transform: rotateX(180deg);
  }
  
  .flip-box-back {
    transform: rotateX(180deg);
  }


  .body {
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .flip-box {
    background-color: transparent;
    width: 300px;
    height: 200px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
  }
  
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-inner {
    transform: rotateX(180deg);
  }
  
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    background-color: #bbb;
    color: black;
  }
  
  .flip-box-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateX(180deg);
  }
  .nav-pills {
      border-bottom: 1px solid black;
  }
 .bellow_partition {
     margin-top: 50px;
     margin-bottom: 50px;
 }

  .details_page {
      margin-top: 100px;
  }

  .details_content h3 {
      margin-top: 30px;
      font-weight: bold;
      margin-bottom: 30px;
  }

  .tab-content h4 {
      margin-top: 50px;
      margin-bottom: 50px;
  }

  .tab-content p {
      margin-top: 30px;
      list-style: circle;
  }
  .tab-content ul  li {
      list-style: disc;
  }


.tab-pane p {
    font-size:14px;
}