/* @import url('http://example.com/example_style.css'); */





.hero__houses__img{
        mask-image: url(https://49337498.fs1.hubspotusercontent-eu1.net/hubfs/49337498/Koirasaaren%20Kruunukorttelit/Theme/concave_mask_left.svg);
        mask-position: left;
        mask-repeat: no-repeat;
        mask-size: 100%;
}



.house-details .house-details__img .module__inner {
    display:flex;
    justify-content: center;
}

.house-details__text .module__inner {
    padding: 64px 48px; 64px; 48px;
    border-radius: 300px 300px 24px 24px;
}
.house-details__text.house-details__text__forma .module__inner {
    background-color: #EAE7DC;
}
.house-details__text.house-details__text__flora .module__inner {
    background-color: #F7E2DF;
}
.house-details__text.house-details__text__fauna .module__inner {
    background-color: #F7ECD2;
}



/* MOBILE STYLES */
@media (max-width: 767px) {
    .hero__houses__img{
        mask-image: url(https://49337498.fs1.hubspotusercontent-eu1.net/hubfs/49337498/Koirasaaren%20Kruunukorttelit/Theme/concave_mask_bottom.svg);

        mask-position: bottom;
        mask-repeat: no-repeat;
        mask-size: 100%;
    }

    .house-details-flora .row-fluid {
        flex-direction: column-reverse;

    }

    .koirasaari-map .row-fluid {
        flex-direction: column-reverse;
    }
    .house-details__text table td:nth-child(2) {
    text-align: right;
}
}

/* TABLET STYLES */
@media (min-width: 767px ) and (max-width: 1139px)  {
    .hero__houses__img{
        mask-image: url(https://49337498.fs1.hubspotusercontent-eu1.net/hubfs/49337498/Koirasaaren%20Kruunukorttelit/Theme/concave_mask_bottom.svg);
        mask-position: bottom;
        mask-repeat: no-repeat;
        mask-size: 100%;
    }
}




/* Hero Section styles */
.hero__main{ 
    text-align: center;
    padding-top: 6.25rem;
    padding-bottom: 35.25rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;


}

/* MOBILE STYLES */
@media (max-width: 767px) {
    .hero__main{ 
    padding: 5rem 0 20rem 0;
}

}

/* TABLET STYLES */
@media (min-width: 767px ) and (max-width: 1139px)  {
    .hero__main{ 
        padding: 5rem 0rem 28rem 0;
}
}

/* END Hero Section styles */

/* House Cards Section styles */
.cards__house .image-box {
    margin-bottom: 8px;
}
.cards__house .image-box__text {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 4px;

}

.cards__house .image-box__title {
    font-size: 32px;
    color: #fff !important;
}

.cards__house .image-box__desc {
    color: #fff !important;
}

.cards__house .image-box__overlay {
    background: linear-gradient(360deg, black, transparent);
}

/* END House Cards Section styles */


header.header{
    background-color: #FCF9EF;
    border-bottom: #E7E0D2 solid 1px;
    }

header.header .header__section--main{
    background-color: #FCF9EF;
}

header.header .mnav--light .mnav__popup {
    background-color: #FCF9EF;
}
/* This file modifies the ACT 3 "footer 3" into the correct format. If the footer is changed, delete or modify this file */


footer.footer,.above-footer {
    background-color: #56443F;
}

#rtext__footer_nav {
    color: #F4EEE2;
}

#rtext__footer_nav a {
    color: #F4EEE2;
}




/* Here are the styles for sections that are common to multiple pages */

.hero__common__img img{
        mask-image: url(https://49337498.fs1.hubspotusercontent-eu1.net/hubfs/49337498/Koirasaaren%20Kruunukorttelit/Theme/houses_header_top_concave.svg);
        mask-position: top;
        mask-repeat: no-repeat;
        mask-size: 100%;
}

.hero__common__img .module__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.text-image .text-image__image img {
    border-radius: 300px 300px 24px 24px;
}


.full-width-image .module__inner {
    display: flex;
}

.full-width-image img {
    max-height: 800px;
    max-width: 1920px;
    object-fit: cover;
    object-position: center;
    margin-left: auto;
    margin-right: auto;
}

.newsletter-form > .row-fluid 
{
    background-color: #F4EEE2;
    border-radius: 150px;
    padding: 64px;
}

.newsletter-form__image > .module__inner {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

/* OVERRIDING CONTENT CARD CONTENT*/
.content-card--light {
    background-color: #F4EEE2 !important;
}

.content-card--no-img-just-icon .icon--large .icon__glyph {
    font-size: 1.2rem;
    height: 1.2rem;
    line-height: 1.2rem;
    width: 1.2rem;
}
.content-card--no-img-just-icon .icon--large.icon--disc {
    height: 2.4rem;
    width: 2.4rem;
}

.content-card--no-img-just-icon .content-card__icon {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: -1.2rem;
}

/* END OVERRIDING CONTENT CARD CONTENT */



/*  Remove default hover styles from blog-card component */
/* everything is prepended with main, because for some reason child.css is loaded before the parent themes child */
main .blog-card:hover {
    transform: none;
}
main .blog-card:hover .blog-card__img img {
    transform: none;
}

main .blog-card--shadow:hover {
    box-shadow: 0px 12px 20px rgba(34, 35, 38, 0.3), 0px 16px 32px rgba(34, 35, 38, 0.05);
}

/* END Remove default hover styles from blog-card component */

/* MOBILE STYLES */
@media (max-width: 767px) {
    .full-width-image img {
        width: 100%;
        min-height: 500px;
    }
    .newsletter-form > .row-fluid 
    {
        padding: 32px 0px;
    }
}



/* ================================================
   APARTMENT DETAILS SECTION
   ================================================ */

/* ----- Description Text ----- */
.apartment-details__description p {
  font-size: 20px;
  line-height: 140%;
  color: rgba(28, 23, 22, 0.85);
  margin-bottom: 16px;
  font-family: 'Glory', sans-serif;
  font-weight: 400;
}

.apartment-details__description p:last-child {
  margin-bottom: 0;
}

/* ----- Download / Print Button ----- */
.apartment-details__download-btn .btn {
  border-radius: 25px;
  font-size: 16px;
  padding: 10px 24px;
}

/* ----- Price Card ----- */
.apartment-details__price-card {
  padding: 32px;
  background: var(--Background-Default-Default, rgba(255, 255, 255, 1));
  border: 1px solid rgba(168, 135, 79, 1);
  border-radius: 24px;
  gap:24px;
}
.apartment-details__heading-card
{
    gap: 24px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(235, 231, 218, 1);
    margin-bottom: 24px;

}
.apartment-details__heading-card h3{
  font-family: 'Glory', sans-serif;
  font-size: 32px;
  font-weight: 400;
  color: rgba(30, 30, 30, 1);
  line-height: 28px;
  margin: 0px;
  
    
}
.apartment-details__heading-card p{
  font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(30, 30, 30, 1);
  line-height: 24px;
}
.apartment-details__price-label {
  font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 24px;
  color: rgba(28, 23, 22, 0.6);
  margin-bottom: 4px;
}

.apartment-details__price-value {
  font-family: 'Glory', sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: rgba(28, 23, 22, 1);
  line-height: 40px;
  margin: 24px 0px;
}

.apartment-details__price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.apartment-details__maintenance-label {
  font-size: 18px;
  color:rgba(28, 23, 22, 1);
  font-weight: 400;
   font-family: 'Glory', sans-serif;
}

.apartment-details__maintenance-value {
  font-family: 'Glory';
  font-size: 18px;
  font-weight: 400;
  color: rgba(28, 23, 22, 1);
}

/* ----- CTA Link (download link price card) ----- */
.apartment-details__cta-download {
  display: block;
  width: 100%;
  padding: 14px 32px;
  background-color: rgba(28, 23, 22, 1);
  color: #ffffff  !important;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Glory', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box;
}

.apartment-details__cta-download:hover {
  background-color: #333;
  color: #ffffff;
  text-decoration: none;
}

.apartment-details__cta-link {
  display: block;
  width: 100%;
  padding: 14px 32px;
  background-color: rgba(28, 23, 22, 1);
  color: #ffffff  !important;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  font-family: 'Glory', sans-serif;
  font-size: 16px;
  font-weight: 600;
  box-sizing: border-box;
}

.apartment-details__cta-link:hover {
  background-color: #333;
  color: #ffffff;
  text-decoration: none;
}
.apartment-details__cta-row{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* ----- Responsive ----- */
@media (max-width: 767px) {
  .apartment-details__price-card {
    padding: 24px;
  }

  .apartment-details__price-value {
    font-size: 32px;
  }
}

/* ----- Print Styles ----- */
@media print {
  .apartment-details__download-btn,
  .apartment-details__cta-link {
    display: none !important;
  }
}



/* ================================================
   APARTMENT FEATURES SECTION
   ================================================ */

/* ----- Card background on the inner content wrapper ----- */
.apartment-features > .row-fluid  {
  background-color: rgba(247, 241, 229, 1) !important;
  border-radius: 24px;
  padding: 48px;
}

/* ----- Heading ----- */
.apartment-features__heading {
  font-family: 'Glory', sans-serif;
  font-size: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 1.3;
  margin: 0 !important;
}

/* ----- Intro text ----- */
.apartment-features__intro {
  font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color:rgba(30, 30, 30, 1)
  margin-bottom: 20px;
}

/* ----- Bullet list ----- */
.apartment-features__list {
  padding-left: 20px;
  margin: 0;
}

.apartment-features__list li {
   font-family: 'Glory', sans-serif;
  font-size: 18px;
  color:rgba(30, 30, 30, 1);
  line-height: 1.6;
  margin-bottom: 6px;
}

.apartment-features__list li:last-child {
  margin-bottom: 0;
}

/* ----- Right column text ----- */
.apartment-features__right-content p {
 font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
   color:rgba(30, 30, 30, 1);
  line-height: 1.6;
}

.apartment-features__right-content em {
  font-style: italic;
}

/* ----- CTA Link Group ----- */
.apartment-features__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 24px;
}

.apartment-features__cta-link {
  display: inline-block;
  background-color:rgba(168, 135, 79, 1);
  color: #ffffff !important;
  border-radius: 999px;
 font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 10px 24px;
  text-decoration: none !important;
  box-sizing: border-box;
}

.apartment-features__cta-link:hover {
  background-color: #8A7245;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ----- Responsive: Tablet ----- */
@media (max-width: 767px) {
  .apartment-features .span12,
  .apartment-features .dnd-column {
    padding: 28px 24px;
  }

  .apartment-features__heading {
    font-size: 20px;
  }
}

/* ----- Responsive: Mobile ----- */
@media (max-width: 479px) {
  .apartment-features .span12,
  .apartment-features .dnd-column {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .apartment-features__cta-link {
    width: 100%;
    text-align: center;
  }
}



/* ================================================
   APARTMENT CONTACT FORM SECTION
   ================================================ */

/* ----- Full-width section background ----- */
.apartment-contact {
  background-color: rgba(247, 237, 210, 1) !important;
}

/* ----- Header ----- */
.apartment-contact__heading {
  font-family: 'Glory', sans-serif;
  font-size: 48px;
  font-weight: 400;
  color: rgba(28, 23, 22, 1);
  line-height: 1.15;
  margin: 0 0 16px 0 !important;
}

.apartment-contact__subtitle {
  font-family: 'Glory', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgba(30, 30, 30, 0.7);
  line-height: 1.5;
  margin: 0;
}

/* ----- Form wrapper (white card) ----- */
.apartment-contact__form-wrapper {
  background-color: #FFFFFF;
  border-radius: 24px;
  padding: 48px 56px;
  max-width: 1070px;
  margin: 0 auto;
  box-sizing: border-box;
  box-shadow: 0px 10px 15px -3px #0000001A;

}

/* ----- Form field overrides ----- */
.apartment-contact__form-wrapper .hs-form-field {
  margin-bottom: 20px;
}

.apartment-contact__form-wrapper .hs-form-field label {
  font-family: 'Glory', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: rgba(28, 23, 22, 1);
  margin-bottom: 8px;
  display: block;
}

.apartment-contact__form-wrapper .hs-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(235, 231, 218, 1);
  border-radius: 999px;
  font-family: 'Glory', sans-serif;
  font-size: 16px;
  color: rgba(28, 23, 22, 1);
  background-color: #FFFFFF;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  appearance: none;
}

.apartment-contact__form-wrapper .hs-input::placeholder {
  color: rgba(28, 23, 22, 0.4);
}

.apartment-contact__form-wrapper .hs-input:focus {
  outline: none;
  border-color: rgba(168, 135, 79, 0.6);
}

.apartment-contact__form-wrapper textarea.hs-input {
  min-height: 140px;
  resize: vertical;
  border-radius: 16px; /* override pill for textarea */
}

/* ----- Submit button ----- */
.apartment-contact__form-wrapper .hs-submit .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background-color: rgba(28, 23, 22, 1);
  color: #FFFFFF;
  border: none;
  border-radius: 999px;
  font-family: 'Glory', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  float: right;
}

.apartment-contact__form-wrapper .hs-submit .hs-button:hover {
  background-color: #333;
}

/* ----- Privacy text ----- */
.apartment-contact__form-wrapper .legal-consent-container,
.apartment-contact__form-wrapper .hs-richtext {
  font-family: 'Glory', sans-serif;
  font-size: 13px;
  color: rgba(28, 23, 22, 0.5);
  line-height: 1.5;
  margin-top: 16px;
}

/* ----- Responsive: Tablet ----- */
@media (max-width: 767px) {
  .apartment-contact__heading {
    font-size: 28px;
    line-height: 34px;
  }

  .apartment-contact__form-wrapper {
    padding: 28px 24px;
  }
}

/* ----- Responsive: Mobile ----- */
@media (max-width: 479px) {
  .apartment-contact__form-wrapper {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .apartment-contact__form-wrapper .hs-submit .hs-button {
    width: 100%;
    float: none;
  }
}
@media (min-width: 480px) {
    /* The :not(#_) adds an ID-level specificity (1, 3, 1) to instantly win */
    .apartment-contact__form-wrapper:not(#_) .form__box-content .hs-form-field > label {
        position: relative !important;
        display: block !important;
        clip: auto !important; 
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
        .form--one-field .hs-form-field:first-of-type {
        flex-grow: unset;
        margin-bottom: 0;
        width: 100%;
    }
    .hs_submit{
        order:10;
    }
}




.intro-section {
  padding-top: 0.5rem;
  padding-bottom: 0;
  text-align: center;
}





@media (min-width: 1139px) {

  .intro-section p,.intro-section h3,.intro-section h4{
    padding-left: 10.5rem;
    padding-right: 10.5rem;
  }
  
}

/* Tablet */
@media (min-width: 767px ) and (max-width: 1139px)  {
  .intro-section {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  .intro-section p,.intro-section h3,.intro-section h4 {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .intro-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

}



.two__column-text .rtext__content{
    column-count: 2;
    column-gap: 2rem;
  }
/* MOBILE STYLES */
@media (max-width: 767px) {
    .two__column-text .rtext__content{
    column-count: 1;
  }

}
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here
/* These Style decrlarations are for the blog pages  */
/*****************************************/

.hs-blog-listing .blog-listing-1 .blog-listing-1__btn .btn{
  background-color: #A8874F;
  border-color: transparent;
  color: #fcf9ef;
}

.hs-blog-post .blog-body-1 h2{
  margin-top: 42px 
}

.hs-blog-post .blog-body-1 .quote__module-container{
  padding: 42px 0 42px 0;
}

/* Hides author in both listing page and individual blog page */
.blog-infobar__author {
  display: none !important;
}


/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/