/* Default styles - small devices (Mobile, screen width < 768px) */

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body {
    /* font-family: "Libre Franklin", serif; */
    font-family: "Arial", sans-serif;
    font-size: 1.125rem;
}

*SIDE MENUE*/

ul.leftnav {
  list-style: none;
}

.inner-about ul {
  list-style-type: none;
}

.sitemap a {color:#000;}

.current{background-color: #000000;}

li a.current{background-color: #000;color:#fff;}
li a.head{background-color: #868889;color:#fff;font-weight:600;}


h1, h2, h3, h4, h5, h6 {
    font-family: "Barlow Condensed", serif;
    text-transform: uppercase;
}
a.more {
    color: var(--black);
    text-decoration: none;
    text-transform: capitalize;
}

.breadcrumb {color:#000000:}
.breadcrumb a{color:#000000:}

.more::before {
    content: "\00BB";
    margin-right: .25rem;
    display: inline-block;
    transition: all .3s;
}

.surf {
    color: var(--surf);
}
.surfLite {
    color: var(--surfLite);
}
.section-clip {
    clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
    padding-bottom: 5rem;
}
.section-clip-top {
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    padding-bottom: 5rem;
}
.line-title {
    position: relative;
    /* position: relative;
    display: flex;
    justify-content: center; */
}
.line-title .line:first-child {
    left: 0;
}
.line-title .line-left {
    position: absolute;
    height: 3px;
    background-color: rgba(175, 157, 204, .2);
    left: 0;
    right: 0;
    z-index: -1;

}
.line-title .title {
    background-color: var(--white);
    padding: .25em;
    width: fit-content;
    border: 3px solid rgba(175, 157, 204, .2);
}
.line-title .title-inner {
    padding: .5rem 1.75rem;
    border: 4px solid rgba(175, 157, 204, .2)
    ;
}
.line-title h2 {
    font-size: 3.5rem;
    letter-spacing: .2em;
    color: var(--surf);
    margin-bottom: 0;
    font-size: 2.6rem;
}
/*--------------------------------------------------------------
# Main Navigation
--------------------------------------------------------------*/
.navbar-toggler {
    border: none;
}

#main-nav .active {
    background-color: var(--surf);
}
#main-nav a {
    color: var(--white);
    transition: all .3s;
    font-family: "Barlow Condensed", serif;
}
#main-nav .nav-item a {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.5rem;
    opacity: 1;
}

#main-nav .nav-item a:hover {
    opacity: .8;
}


#main-nav .btn {
    font-size: 18px;
}

#main-nav .active a {
     color: #ffffff;
}

#main-nav .btn {
    font-size: 18px;
}

.nav-outer .container {
    padding: 0;
}


.navbar ul {
    padding: 0;
}

.navbar ul li, .site-logo-top, .navbar-toggler, .mobile-search-btn {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
}

.navbar-nav .nav-item, .navbar ul li:first-child:not(.dropdown ul li) {
    padding: .9rem calc(var(--bs-gutter-x) * .5);
    border-top: thin solid var(--lightGray);
}

.navbar a {
    padding: 0;
}
.nav-contact-contain {
    padding: 0 calc(var(--bs-gutter-x) * .5);
}
#main-nav .navbar-nav .nav-item:first-of-type{
    margin-top: 1rem;
}
#main-nav .navbar-nav li:last-of-type {
    /* border-bottom: thin solid var(--lightGray); */
    /* margin-top: 1rem; */
    margin-bottom: 5rem;
}

/* Collapse Button Mobile */
.animated-icon {
    cursor: pointer;
    height: 20px;
    margin: 0px;
    position: relative;
    width: 30px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

    .animated-icon span {
        border-radius: 9px;
        display: block;
        height: 3px;
        position: absolute;
        left: 0;
        opacity: 1;
        width: 100%;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }

    .animated-icon span {
        background: var(--white);
    }

        .animated-icon span:nth-child(1) {
            top: 0px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(2) {
            top: 10px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

        .animated-icon span:nth-child(3) {
            top: 20px;
            -webkit-transform-origin: left center;
            -moz-transform-origin: left center;
            -o-transform-origin: left center;
            transform-origin: left center;
        }

    .animated-icon.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 8px;
    }

    .animated-icon.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }

    .animated-icon.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 8px;
    }

    #main-nav .logo-top {
        padding-left: calc(var(--bs-gutter-x)* .5);
        width: 11rem;
    }


#main-nav .nav-item.active ul {
    background-color: var(--surf)!important;
}

#main-nav {
z-index: 9;
}

#main-nav .nav-item.active ul li a.dropdown-item.active {
    color: #ffffff!important;
}
#main-nav a#navbarDropdown:hover {
    color: var(--white)!important;
}

.top-contact {
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    
}

.top-contact a {
    text-decoration: none;
    color: var(--white);
    transition: all .3s;
}

.top-contact a:hover {
    color: var(--surf)!important;
}

/* .nav-outer {
    background: rgb(33,30,32);
background: linear-gradient(98deg, rgba(000,000,000,0.7) 0%, rgba(000,000,000,1) 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
} */

.nav-outer .navbar-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgb(33,30,32);
    background: linear-gradient(98deg, rgba(000,000,000,0.7) 80%, rgba(000,000,000,0.7) 40%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%);
    z-index: -1
}

#main-nav .navbar {
    position: relative;
}
#main-nav .navbar-toggler {
    margin-top: -5rem;
}
#main-nav .logo-top {
    margin-bottom: -1.25rem;
}
/* #main-nav .logo-absolute {
    position: absolute;
    left: calc(var(--bs-gutter-x) * .5);
}
#main-nav .hidden-spacer{
   visibility: hidden;
} */
.top-contact div svg {
    width: 1rem;
    margin-right: .5rem;
}

.top-contact-desktop {
    background: rgb(51,55,69);
    background: linear-gradient(98deg, rgba(51,55,69,0.7) 0%, rgba(51,55,69,1) 80%);
}

.fb-top {
    height: 1.65rem;
}

.fixed-top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}


/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
.hero {
    height: fit-content;
   
}
.hero img {
    filter: grayscale(0%);
}
.hero-text {
    color: var(--white);
    margin-right: 1.5rem;
    text-transform: uppercase;
    z-index: 9;

}
.hero-text h2 {
    font-size: 4rem;
}
.hero-text .large {
    font-size: 4.75rem;
}
.hero-text .sub {
    font-size: 3rem;
    margin-bottom: 2rem;
}
.hero-text .surf {
    color: var(--surf);
}
.hero .swiper-slide {
    position: relative;
    padding-top: 20rem;
    padding-bottom: 8rem;
}
.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30%;
    position: absolute;
    top: 0;
    z-index: -1;
}
.hero .swiper-slide {
    position: relative;
}
.hero .hero-gradient {
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(98deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 50%);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}


/*--------------------------------------------------------------
# Hero Inner
--------------------------------------------------------------*/
.hero1 {
    height: fit-content;
    height:300px;
   
}
.hero1 img {
    filter: grayscale(100%);
}
.hero-text1 {
    color: var(--white);
    margin-right: 1.5rem;
    text-transform: uppercase;
    z-index: 9;

}
.hero-text1 h2 {
    font-size: 5rem;
}
.hero-text1 .large {
    font-size: 5.75rem;
}
.hero-text1 .sub {
    font-size: 3rem;
    margin-bottom: 2rem;
}
.hero-text1 .surf {
    color: var(--surf);
}
.hero1 .swiper-slide {
    position: relative;
    padding-top: 20rem;
    padding-bottom: 8rem;
}
.hero1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30%;
    position: absolute;
    top: 0;
    z-index: -1;
}
.hero1 .swiper-slide {
    position: relative;
}
.hero1 .hero-gradient {
    position: absolute;
    background: rgb(255,255,255);
    background: linear-gradient(98deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.6) 50%);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}






/*--------------------------------------------------------------
# Landing Cards Home
--------------------------------------------------------------*/
.landing-cards-home {
    background-color: #383B4F;
    padding-bottom: 5rem;
}
a.home-card {
    text-decoration: none;
}

.home-card .icon-box {
    width: 95px;
}

.home-card .icon {
    width: 100%;
    height: 100%;
}
.home-card .text-box {
    background-color: rgba(45, 44, 57, .9);
    width: 70%;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-left: 4px solid var(--surf);
    transition: all .3s;
}
.home-card .text-box h3 {
    color: var(--white);
    font-weight: 400;
    margin-bottom: 0;
    font-size: 1.5rem;
    letter-spacing: .2em;
   
}
a.home-card .icon-box svg rect {
    transition: all .3s;
}
a.home-card:hover .text-box {
    background-color: rgba(000, 000, 000, .75);
}
a.home-card:hover .icon-box svg rect {
    fill: rgba(000, 000, 000, .75)!important;
}
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/

.about {
    padding-top: 3rem;
    padding-bottom: 10rem;
    position: relative;
}
.about p {
    font-family: "Barlow Condensed", serif;
    font-size: 1.8rem;
    font-weight: 300;
}
.about .img-fluid {
    width: 100%;
}

/*--------------------------------------------------------------
# Quote
--------------------------------------------------------------*/
.quote {
    background-color: var(--surf);
    margin-top: -5rem;
    padding-top: 5rem;
    padding-bottom: 4rem;
}
.quote a {
    text-decoration: none;
}
.quote h2 {
    color: var(--surfLite);
    width: fit-content;
    font-size: 2.5rem;
    letter-spacing: .2em;
    margin-bottom: 0;
    margin-right: 2rem;
    font-weight: 400;
    transition: all .3s;
}
.quote svg {
    width: 4rem;
}

.quote a:hover h2 {
    color: var(--white);
}
.quote a:hover svg g g .pound {
    fill: var(--white)!important;
}
.quote a svg g g .pound {
    transition: all .3s;
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog-cards a.card {
    text-decoration: none;
    border: none;
    border-radius: 0;
}
.blog-cards h3, .blog-cards .more, .blog-cards .date, .blog-cards p {
    font-family: "Arial", sans-serif;
}
.blog-cards h3 {
    text-transform: none;
}

.blog-cards .date, .blog-cards .more {
    color: var(--surf);
    margin-bottom: .75rem;
}
.blog-cards h3 {
    color: var(--black);
    font-size: 2.25rem;
    margin-bottom: .75rem;
    transition: all .3s;
}
.blog-cards .more {
    text-transform: capitalize;
    font-weight: 600;
    transition: all .3s;
}
.blog-cards .date {
    font-weight: 100;
    font-size: 1.5rem;
    transition: all .3s;
}
.blog-cards .img-fluid {
    width: 100%;
    height: 17rem;
    object-fit: cover;
    transition: all .3s;
}
.blog-cards a.card:hover .more::before {
    transform: translateX(.15rem);
    color: rgba(000, 000, 000, .5);
}

.blog-cards a.card:hover img {
    opacity: .8;
}
.blog-cards a.card:hover .more, .blog-cards a.card:hover h3, .blog-cards a.card:hover .date {
    color: rgba(000, 000, 000, .5);
}

/*--------------------------------------------------------------
# Full Img
--------------------------------------------------------------*/

.full-img {
    width: 100%;
    height: 75vw;
    padding-bottom: 0;
}
.full-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/

.testimonials {
    margin-top: -5rem;
    padding-top: 10rem;
    z-index: 9999;
    background-color: #ffffff;
}

.testimonials.section-clip-top {
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0% 100%);
}


.testimonial-img .quote-author-img {
   width: 33%;
    /* height: 100%; */
    object-fit: cover;
    border-radius: 50%;
    margin-top: 2rem;
}
.testimonial-img svg {
    width: 30%;
}
.testimonials .more, .testimonials .more::before {
    transition: all .3s;
}
.testimonials .more:hover::before {
    transform: translateX(.15rem);
    color: var(--surf);
}
.testimonials .more:hover {
    color: var(--surf)
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

footer {
    background-color: var(--surf);
    padding-top: 15rem;
    padding-bottom: 0!important;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffffff;
}

footer .contacts svg {
    height: 4rem;
    margin-bottom: 2rem;
}

footer p {
    font-size: 1.5rem;
}

footer .footer-sub p {
    font-size: 1rem;
    font-weight: 300;
}

footer .contact {
    margin-bottom: 4rem;
}