@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');

@import url('https://fonts.googleapis.com/css?family=Raleway:400,700&display=swap');
/* ==========================================================================
Overall
========================================================================== */

html, body {
    height: 100%;
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    color: #161c2d;
    text-align: left;
}

body {
  position: relative;
}

section{
    height: auto;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

p{
    box-sizing: inherit;
    display: inline-block;
    line-height: 1.5em;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

h1, h2, h3, h4, h5{
    font-family: 'Roboto','Franklin Gothic Medium',sans-serif;
}

h1{
    font-size: 46px;
    font-weight: 500;
}

h2 {
    font-size: 36px;
    line-height: 1.1666666667;
    display: block;
    margin: 0 0 24px;
    font-weight: 500;
}

h3 {
    font-size: 24px;
    line-height: 1.1666666667;
    display: block;
    margin: 0 0 24px;
    font-weight: 300;
}

h4{
    font-size: 21px;
    font-weight: 500;
    line-height: 1.1666666667;
    margin: 0 0 8px;
    box-sizing: inherit;
    display: block;
}



h6{
    line-height: 1.55;
    font-size: 0.75em;
}

h6.text-uppercase{
    letter-spacing: .08em;
    font-size: 0.75em;
}

p {
    display: block;
}

ul {
    display: block;
    list-style-type: none;
}

div{
    display: block;
}



.card{
    border-radius: .5rem;
}

.card-border::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-top-width: 2px;
    border-bottom-width: calc(.375rem - 2px);
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: inherit;
    border-bottom-color: transparent;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
}

.border-green{
    border-color: #42ba96!important;
}

.border-top {
    border-top: 1px solid #161c2d !important;
}

.text-blue{
    color: #553D67;
}

.text-yellow{
    color: #fad776;
}

.text-green {
    color: #28a745;
}

.text-green2{
    color: #42ba96;
}

.text-red{
    color: blue;
}

.bg-green{
    background-color: rgba(66,186,150,.65) !important;
    color: #fff;
}

.bg-darkGray{
    background-color: #2E3338;
    z-index: 9 !important;
}

.bg-darkblue{
   background-color: #262F46;
}

.bg-red{
   background-color: #C94105;
}


.bg-cream{
    background-color: #FBF7F7;
}

.bg-peach{
    background-color: #EAE5E1;
}

.bg-black{
    background-color: #171219!important;
}

.menu-bg{
    background-color: #f8f9fa!important;
}
.menu-bg-white{
    background-color: #fff!important;
    transition: .3s ease,transform;
    box-shadow: 0 1px 28px 0 rgba(0,0,0,.05);
}

.container{
    height: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}

.row{
    display: flex;
    flex-wrap: wrap;
    margin-right: -20px;
    margin-left: -20px;
}

.font-weight-bold {
    font-weight: 600!important;
}

.mb-3, .my-3 {
    margin-bottom: .75rem;
}

.badge {
    border-radius: 10rem;
    display: inline-block;
    padding: .30rem .75rem;
    font-size: 75%;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;

}

.badge-pill {
    padding-right: .75rem;
    padding-left: .75rem;
    background-color: rgba(66,186,150,.15);
    color: #42ba96 !important;
    border-radius: 50rem;
}

.btn {
    display: inline-block;
    font-weight: 600;
    color: #161c2d;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .8125rem 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.6;
    border-radius: .375rem;
}

.btn-success {
    color: #fff;
    line-height: 2;
    background-color: #42ba96;
    padding: .5615rem 2.2rem;
    border:none;
    box-shadow: none;
}

.btn-primary {
    color: #fff;
    background-color: #335eea;
}

.divider{
    width: 100%;
}

.bg-white{
    background-color: #fff;
}

.flip-y {
    transform: scaleY(-1);
}

.input-group-text{
    background-color: #fff;
    border-right: none;
}

.underMarked{
    height: 24px;
    font-weight: 700;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(50%, transparent),color-stop(0, rgba(249,157,120,.5)));
    background-image: linear-gradient(180deg,transparent 50%,rgba(250,215,118) 0);
    background-position-y: 3px;
    background-position-x: 4px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

.underMarked:hover{
    padding-right: 4px;
    padding-bottom: 2px;
    background-position: top 8px right -2px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent),color-stop(0, #f99d78));
    background-image: linear-gradient(180deg,transparent 60%,rgba(250,215,118) 0);
}
.underMarked-L{
    height: 24px;
    font-weight: 700;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(50%, transparent),color-stop(0, rgba(249,157,120,.5)));
    background-image: linear-gradient(180deg,transparent 65%,rgba(250,215,118) 0);
    background-position-y: 3px;
    background-position-x: 4px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

.underMarked-L:hover{
    padding-right: 4px;
    padding-bottom: 2px;
    background-position: top 8px right -2px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent),color-stop(0, #f99d78));
    background-image: linear-gradient(180deg,transparent 60%,rgba(250,215,118) 0);
}

.underMarkedN{
    height: 32px;
    font-weight: 700;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(100%, transparent),color-stop(0, rgba(249,157,120,.5)));
    background-image: linear-gradient(180deg,transparent 100%,rgba(250,215,118) 0);
    background-position-y: 0px;
    background-position-x: 15px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

.underMarkedN:hover{
    padding-right: 4px;
    padding-bottom: 2px;
    background-position: top 8px right -2px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent),color-stop(0, #f99d78));
    background-image: linear-gradient(180deg,transparent 70%,rgba(250,215,118) 0);
    background-position-y: 4px;
    background-position-x: 10px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

.underMarkedN:active{
    padding-right: 4px;
    padding-bottom: 2px;
    background-position: top 8px right -2px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent),color-stop(0, #f99d78));
    background-image: linear-gradient(180deg,transparent 60%,rgba(250,215,118) 0);
    background-position-y: 3px;
    background-position-x: 4px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

.underMarkedN > .selected{
    padding-right: 4px;
    padding-bottom: 2px;
    background-position: top 8px right -2px;
    background-image: -webkit-gradient(linear,left top, left bottom,color-stop(60%, transparent),color-stop(0, #f99d78));
    background-image: linear-gradient(180deg,transparent 60%,rgba(250,215,118) 0);
    background-position-y: 3px;
    background-position-x: 4px;
    background-repeat: no-repeat;
    -webkit-transition: .15s ease;
    transition: .15s ease;
}

::selection {
  background: #fad776; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #fad776; /* Gecko Browsers */
}

.fw-400{
    font-weight: 400;
}

/* fade image in after load */
.lazyload,
.lazyloading {
    opacity: 0;
}
.lazyloaded {
    opacity: 1;
    transition: opacity 300ms;
}


a:hover{
    color: #42ba96;
}

@media (max-width: 620px) {
    h1{
        font-size: 36px;
    }

    h3{
        font-size: 18px;
    }

    .btn.btn-success.lift{
        display: none;
    }
}

.g-recaptcha{
    margin-bottom: 1rem;
}

/* ==========================================================================
SVG
========================================================================== */

.position-relative {
    position: relative!important;
}

/* ==========================================================================
Header
========================================================================== */

#header{
    background-color: transparent;
    transition: .3s ease,transform;
    z-index: 9000;
    font-family: 'Montserrat', sans-serif;
}

.navbar-toggler{
    border: none;
}

.nav-link{
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.1666666667;
    box-sizing: inherit;
    display: block;
    color: #161c2d !important;
    margin-bottom: 0;
}

@media (max-width: 620px) {
    .navbar{
        background-color: #FBF7F7;
    }

    .navbar-nav{
        padding-bottom: 0.3em;
        list-style-position: inside;
    }
    .navbar-nav li{
        margin: 0.2em;
    }

    .nav-link{
        font-weight: 500;
    }
}

/* ==========================================================================
Home
========================================================================== */
#home{
    height: 100%;
    position: relative;
}

#home > *{
    z-index: 10;
}

@media (max-width: 620px) {

    .banner{
       padding-bottom: 13.5vw;
    }

    #home{
        min-height: 100%;
    }
}

/* ==========================================================================
About
========================================================================== */
#about {
    height: 100%;
    position: relative;
}

#about .container{
    padding-top:6rem;
    padding-bottom:6rem;
    overflow: hidden;
}

.business-img{
    padding: 10px;
}

.businessInfo{
    padding: 20px;
}

.businessText{
    text-align: justify;
    text-justify: inter-word;
}

.aboutImage{
    z-index: 0;
}

.justify-C{
    text-align: center;
}

.bannerImage{
    margin-bottom: 2.75em;
    width: 90%;
}

.mainHeading{
     margin-bottom: .25em;
}


.mainSubHeading{
    margin-bottom: 1em;
    font-size: 1.75rem;
    font-weight: 400;
}

@media (max-width: 620px) {

    #about{
        height: 120%;
    }

    #about .container{
        padding-top:1rem;
        padding-bottom:20rem;
        overflow: hidden;
    }

    .aboutImage{
        display: none;
    }
}

/* ==========================================================================
Services-Intro
========================================================================== */

.s-intro{
    padding: 10px;
}

#services-intro{
    height: auto;
}

#services-intro .container{
    height: auto;
    padding-top:6rem;
    padding-bottom: 50px;
}

.serviceText{
    padding-right: 15px;
}

@media (max-width: 620px) {
    #services-intro .container{
        padding-top:1rem;
        padding-bottom: 0;
    }

    .serviceText{
        padding-right: 0px;
    }

    .serviceIntro{
        padding-right: 1.5rem;
        padding-left: 1.5rem;
    }


}

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

#services .container{
    padding-bottom:7rem;
}

  #services .card {
    padding: 30px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(22,28,45,.05)!important;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    transition: all .8s ease; }
    #services .card h5 {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 20px; }
    #services .card p {
      font-size: 16px;
      display: block; }
    #services .card:hover {
        box-shadow: 0px 0px 25px 0px rgba(95, 95, 95, 0.24);
        -moz-transition: all .8s ease;
        -webkit-transition: all .8s ease;
        transition: all 1s ease; }

    #services .card:hover .card-body h5{
      color: #20c997;
    }


.left {
    transition: .2s linear,transform .2s linear;
}

.left:focus, .left:hover {
    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem;
    transform: translate3d(-12px,0,0);
}

.right {
    transition: .2s linear,transform .2s linear;
}

.right:focus, .right:hover {
    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem;
    transform: translate3d(12px,0,0);
}

.card-text{
    min-height: 72px;
}

.business-img{
    overflow: hidden;
}

@media (max-width: 620px) {
    #services .container{
        padding-top: 0;
        padding-bottom:3rem;
    }

    #services .card {
        padding: 15px;
    }
}

/* ==========================================================================
Numbers
========================================================================== */
#numbers .container{
    padding-top:6rem;
    padding-bottom:6rem;
}

/* ==========================================================================
Partners
========================================================================== */
#partners{
    height: auto;
    position: relative;
}
#partners .container{
    padding-top:6rem;
    padding-bottom:7rem;
}

.partner{
    max-width: 250px;
}

.partners{
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.partners .col{
    padding: 2.2rem;
}

.second .col{
    padding-top: 0;
}

@media (max-width: 620px) {
    #partners .container{
        padding-top:3rem;
        padding-bottom:4rem;
    }
}

/* ==========================================================================
Contact
========================================================================== */

#contact-form{
    position: relative;
    margin-bottom: 0;
}

#contact-form .container{
    padding-bottom: 6rem;
}

.cont:hover{
    color: #fad776;
}

#contact .container{
    padding-top:6rem;
    padding-bottom: 3rem
}

#contact-info .container{
     padding-bottom: 6rem
}

#contact-form .card{
    box-shadow: 0 10px 100px 0 rgba(0,0,0,.05);
    z-index: 2;
}

.btn:hover {
    background-color:#007bff;
    border-color: #007bff;
}
.lift {
    transition: .25s ease,transform .25s ease;
}

.lift:focus, .lift:hover {
    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1)!important;
    transform: translate3d(0,-3px,0);
}

.btn-success:hover {
    color: #fff;
    background-color: #389e7f;
    border: none;
}

.link-green {
    color: #42ba96;
}

.link-green:hover {
    color: #389e7f;
}

.form-check-input#agreeTerms {
  height: 1rem;
  width: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
}

.form-check-input#agreeTerms:checked {
    accent-color: #42ba96;
    background-color: #42ba96;
    border-color: #42ba96;
}

.form-check-input#agreeTerms:hover {
    border-color: #389e7f; /* green-500 */
}

.form-check-input#agreeTerms:focus {
  outline: none;
  box-shadow: none; /* removes Bootstrap's default blue glow */
}


.contact-text{
    padding-right: 0rem;
}

.description-text{
    padding-right: 150px;
    padding-left: 150px;
}

.linkTo{
    color: #161c2d;
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1666666667;
    margin: 0 0 8px;
}

.contactRowLeft{
    border-right: 1px solid #dee2e6;
}

.reCapt{
    padding-top: 1rem;
    font-size: 12px;
    text-align: center;
    opacity: 0.7;
}

.grecaptcha-badge {
    visibility: hidden;
}

.card-body {
  padding-bottom: 2rem !important;  /* 3rem - 0.5rem */
  padding-top: 2rem !important;
}

@media (max-width: 620px) {
    #contact .container{
        padding-bottom: 2rem;
    }

    .p-5.card-body{
        padding-left: 30px !important;
        padding-right: 30px !important;
        padding-bottom: 30px !important; 
    }

    #contact-info .container{
        padding-bottom: 3rem;
    }

    #contact .container{
        padding-top:3rem;
    }

    #contact-form .container{
        padding-bottom: 2rem;
    }

    .contactRowLeft{
        border-right: none;
        padding-bottom: 3rem;
    }
}


/* ==========================================================================
Footer
========================================================================== */


footer .container{
    padding-top:9rem;
    padding-bottom:9rem;
}

.footer-container{
    z-index: 999;
}

.footer-link a{
    color: darkgray !important;
    font-size: 11pt;
}

.footer-link p{
    color: darkgray;
    font-size: 11pt;
}

.copy {
    color: gray;
    font-size: 8pt;
}

.footerHeader{
    color: gainsboro;
}

@media (max-width: 620px) {
    ul {
        padding-inline-start: 0px;
        padding-bottom: 2rem;
    }
    .footerLogos{
        display: block;
        border-bottom: gray 1px solid;
    }

    footer .container{
        padding-top:2rem;
        padding-bottom:4rem;
    }
}

/* ==========================================================================
Back-To-Top
========================================================================== */

.btn.back-to-top {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 1020;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1rem 2.5rem rgba(22,28,45,.1),0 .5rem 1rem -.75rem rgba(22,28,45,.1)!important;
}

.btn.back-to-top:hover {
    color: #fff;
    background-color: #389e7f;
    border: none;
}

.position-curve{
    position: absolute;
    width: 100%;
    border: none;
}

section{
    width: 100vw !important;
}


@media (max-width: 620px) {
    .back-to-top{
        display: none !important;
    }
}

/* ==========================================================================
Background pseudos
========================================================================== */


@media (min-width: 1200px) {
    #home::before{
        content: "";
        width: 70%;
        height: 70%;
        display: block;
        background: url("../images/illustrations/Hardegal_Home1.svg") left center no-repeat;
        position: absolute;
        top: 15%;
        left: 0;
        z-index: 0;
    }

    #home::after{
        content: "";
        display: block;
        width: 70%;
        height: 70%;
        background: url("../images/illustrations/Hardegal_Home2.svg") right center no-repeat;
        position: absolute;
        top: 32.5%;
        right: 0;
        z-index: 0;
    }
}


@media (max-width: 620px) {
    #home::before {
        display: none;
    }
}

@media (max-width: 900px) {
    #home::before {
        width: 60%;
        height: 60%;
    }
}

@media (max-width: 900px) {
    #home::after {
        width: 60%;
        height: 60%;
    }
}

@media (max-width: 620px) {
    #home::after {
       display: none;
    }
}

.shapeLine::after{
    content: "";
    display: block;
    width: 35%;
    height: 35%;
    background: url("../images/illustrations/Hardegal_Home3.svg") center no-repeat;
    position: absolute;
    top: 63%;
    right: 37.5%;
    z-index: 0;
}

@media (max-width: 620px) {
    .shapeLine::after{
        width: 60%;
        height: 60%;
        top: 45%;
        right: 5.5%;
        background: url("../images/illustrations/Hardegal_Home4.svg") center no-repeat;
    }
}

.shapeLine::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url("../images/illustrations/Hardegal_Home4.svg") center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

.banner::before{
    content: "";
    display: block;
    width: 50%;
    height: 50%;
    background: url("../images/illustrations/Hardegal_Home4.svg") center no-repeat;
    position: absolute;
    top: -75%;
    right: 0;
    z-index: 0;
}

@media (max-width: 620px) {
    .banner::before{
        display: none;
    }
}

#about::before{
    content: "";
    display: block;
    width: 18%;
    height: 18%;
    background: url("../images/illustrations/Hardegal_Home4.svg") center no-repeat;
    position: absolute;
    top: 76%;
    right: 20.2%;
    z-index: 0;
}

@media (max-width: 620px) {
    #about::before {
        display: none;
    }
}


.serviceImage::after{
    content: "";
    display: block;
    width: 105%;
    height: 105%;
    background: url("../images/illustrations/Hardegal_Teenused.svg") right center no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

@media (max-width: 1100px) {
    .serviceImage::after{
        content: "";
        display: none;
    }
}

@media (max-width: 620px) {
    .serviceImage::after {
        background: url("../images/illustrations/Hardegal_Teenused.svg") left center no-repeat;
        width: 50%;
        display: block;
        position: absolute;
        height: 50%;
        top: -25%;
        right: 5%;
    }
}

#partners::before{
    content: "";
    display: block;
    width: 15%;
    height: 15%;
    background: url("../images/illustrations/Hardegal_Home4.svg") center no-repeat;
    position: absolute;
    top: 92.6%;
    left: 20%;
    z-index: 0;
}

@media (max-width: 620px) {
    #partners::before {
        width: 45%;
        height: 45%;
        top: 77.6%;
        left: 10%;
    }
}

#contact-form::before{
    content: "";
    width: 100%;
    height: 150%;
    display: block;
    background: url("../images/illustrations/Hardegal_Kontakt1.svg") left no-repeat;
    top: calc(-50% + 2px);
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 620px) {
    #contact-form::before {
       display: none;
    }
}

@media (min-width: 1600px) {
    #contact-form::after{
        content: "";
        display: block;
        width: 100%;
        height: 150%;
        background: url("../images/illustrations/Hardegal_Kontakt2.svg") right center no-repeat;
        position: absolute;
        top: calc(-50% + 2px);
        z-index: 0;
        pointer-events: none;
    }
}


@media (max-width: 620px) {
    #contact-form::after {
        display: none;
    }
}

/* ==========================================================================
Mobile Menu
========================================================================== */