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

 01. Google fonts
 02. Basics style
 03. Selection style 
 04. Owl-Theme custom style
 05. Section style
 06. Navbar style
 07. Header style
 08. Slider style
 09. Slider Left Panel style
 10. Page Banner Header style
 11. Content Lines style
 12. About style 
 13. Team style
 14. Services style
 15. Projects style
 16. Clients style
 17. Gallery style
 18. Promo Video and Testimonials style
 19. Blog style
 20. Post style
 21. Contact style
 22. Buttons style
 23. Footer style
 24. Corner style
 25. Preloader style
 26. toTop Button style
 27. Accordion Box (for Faqs) style
 28. Pricing plan style
 29. Error Page - 404 style
 30. Responsive (Media Query)
 
----------------------------------------------------------------------------------- */


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


.owl-theme .owl-dots .owl-dot.active {border:inherit!important;}

.section-title {
    font-size: 40px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    position: relative;
    letter-spacing: 10px;
    word-spacing: 5px;
    margin-bottom: 30px;
}
.section-title span {
    color: #b19777;
}

/* ======= Basic style ======= */


/* ======= Selection style ======= */
::-webkit-selection {
    color: #999;
    background: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
    color: #999;
    background: rgba(0, 0, 0, 0.1);
}
::selection {
    color: #999;
    background: rgba(0, 0, 0, 0.1);
}


/* ======= Owl-Theme custom style ======= */
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 0px;
    line-height: .7;
    display: block;
}
.owl-theme .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    margin: 0 3px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: transparent;
    border: 1px solid #b19777;
}


/* owl-nav next and prev */
.owl-nav {
    position: absolute;
    bottom: 3%;
    left: 12%;
}
.owl-prev {
    float: left;
}
.owl-next {
    float: right;
}
.owl-theme .owl-nav [class*=owl-] {
    width: 40px;
    height: 40px;
    line-height: 34px;
    background: transparent;
    border-radius: 100%;
    color: rgba(255, 255, 255, 0.75);
    font-size: 11px;
    margin-right: 3px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
    transform: scale(1.0);
}
.owl-theme .owl-nav [class*=owl-]:hover {
    transform: scale(0.9);
    background: transparent;
    border: 1px solid #b19777;
    color: #b19777;
}
/*@media screen and (max-width: 768px) {*/
/*    .owl-nav {*/
/*        display: none;*/
/*    }*/
/*}*/




/* ======= Blog style ======= */

.bauen-blog {background-color:#272727;}

.bauen-blog .item {
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}
.bauen-blog .item:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-filter: brightness(75%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.bauen-blog .item:hover .con {
    bottom: 0;
}
.bauen-blog .item img {
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-filter: brightness(100%);
}
.bauen-blog .item .con {
    margin: -120px 20px 75px;
    padding: 15px 15px 25px 15px;
    background-color: #323232 !important;
    border: 1px solid #323232;
    border-radius: 0;
    overflow: hidden;
    -webkit-transition: .2s cubic-bezier(.3, .58, .55, 1);
    transition: .2s cubic-bezier(.3, .58, .55, 1);
    bottom: -55px;
    position: relative;
}
.bauen-blog .item .con .category {
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 0;
    letter-spacing: 1px;
    color:#fff;
}
.bauen-blog .item .con .category a {
    margin-right: 5px;
    position: relative;
    color:#fff;
}
.bauen-blog .item .con .category a:hover {
    color: #b19777;
}
.bauen-blog .item .con .category a:last-child {
    margin-right: 0;
}
.bauen-blog .item .con .category a:last-child:after {
    display: none;
}
.bauen-blog .item .con h5,
.bauen-blog .item .con h5 a {
    color: #b19777;
    font-size: 25px;
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
    margin-bottom: 0px;
    letter-spacing: 1px;
}
.bauen-blog .item .con h5:hover,
.bauen-blog .item .con h5 a:hover {
    color: #b19777;
}
.bauen-blog .item .con p {
    color: #fff;
    font-size: 17px;
}
.bauen-blog .item .con i {
    color: #fff;
    font-size: 20px;
}





.default-btn {
    padding: 7px 27px 12px;
    background-color: #414141;
    color: #fff;
    position: relative;
    z-index: 1;
    font-size: 16px;
    text-decoration: none
}

.default-btn i {
    font-size: 30px;
    line-height: 1;
    position: relative;
    top: 5px;
    margin-left: 10px;
    font-weight: 400
}

.default-btn::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background-color: #08104d;
    opacity: 0;
    -webkit-transition: .7s;
    transition: .7s
}

.default-btn:hover {
    background-color: #08104d;
    color: #fff
}

.default-btn:hover::before {
    height: 100%;
    opacity: 1;
    border-radius: 5px
}


.offer-card {
    margin-bottom: 50px;
    background-color: #fff;
    padding: 50px 30px;
    border: 1px solid #414141;
    margin-right: 20px;
    position: relative;
    height:570px;
}

.offer-card::before {
    content: '';
    position: absolute;
    top: 20px;
    right: -21px;
    height: 100%;
    width: 20px;
    background-color: #f3f3f3;
    -webkit-transition: .7s;
    transition: .7s
}

.offer-card::after {
    content: '';
    position: absolute;
    bottom: -21px;
    right: -20px;
    height: 20px;
    width: 100%;
    background-color: #f3f3f3;
    -webkit-transition: .7s;
    transition: .7s
}

.offer-card:hover::before {
    opacity: 0;
    height: 0
}

.offer-card:hover::after {
    opacity: 0;
    width: 0
}

.offer-card h3 {
    margin-bottom: 15px
}

.offer-card p {
    margin-bottom: 30px;
    font-size:15px;
}

.offer-card .offer-icon {
    font-size: 70px;
    color: #747474;
    line-height: 1
}

.offer-card .learn-btn {
    margin-top: 10px;
    font-size: 17px;
    color: #414141;
    display: block;
    font-weight: 600;
    -webkit-transition: .9s;
    transition: .9s
}

.offer-card .learn-btn i {
    font-size: 30px;
    line-height: 1;
    position: relative;
    top: 7px;
    margin-left: 10px;
    font-weight: 400
}

.offer-card .learn-btn:hover {
    letter-spacing: .25px;
    color: #9a9a9a
}

.offer-item {
    margin-bottom: 50px;
    background-color: #fff;
    padding: 50px 45px;
    border: 1px solid #414141;
    position: relative;
    z-index: 1
}

.offer-item::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: 0;
    left: 0;
    bottom: -3px;
    height: 3px;
    width: 100%;
    background-color: #414141;
    -webkit-transition: .7s;
    transition: .7s
}

.offer-item::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    background-image: url(../img/shape/offer-shape.png);
    -webkit-transition: .7s;
    transition: .7s;
    opacity: 0
}

.offer-item:hover {
    background-color: #414141
}

.offer-item:hover::before {
    opacity: 0;
    width: 0
}

.offer-item:hover::after {
    opacity: 1;
    height: 100%
}

.offer-item:hover h3 {
    color: #fff
}

.offer-item:hover p {
    color: #c6c6c6
}

.offer-item:hover .offer-item-icon {
    color: #c6c6c6
}

.offer-item:hover .learn-btn {
    color: #fff
}

.offer-item h3 {
    margin-bottom: 15px
}

.offer-item p {
    margin-bottom: 30px
}

.offer-item .offer-item-icon {
    font-size: 70px;
    color: #747474;
    line-height: 1
}

.offer-item .learn-btn {
    margin-top: 10px;
    font-size: 17px;
    color: #414141;
    display: block;
    font-weight: 600;
    -webkit-transition: .9s;
    transition: .9s
}

.offer-item .learn-btn i {
    font-size: 30px;
    line-height: 1;
    position: relative;
    top: 7px;
    margin-left: 10px;
    font-weight: 400
}

.skill-content {
    margin-top: 70px;
    margin-bottom: 30px;
    background-color: #f7f7f7;
    position: relative;
    max-width: 750px;
    padding: 70px 110px 70px 70px;
    margin-left: auto
}

.skill-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/skill-img/skill-shape.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat
}

.progressbar-area {
    margin-top: 40px
}