@font-face { 
    font-family: 'poeti';
    font-style: bold;
    font-weight: 700;
    src: url(fonts/poeti-aaa-700.eot);
    src: url(fonts/poeti-aaa-700.eot?#iefix) format('embedded-opentype'), url(fonts/poeti-aaa-700.woff) format('woff'), url(fonts/poeti-aaa-700.ttf) format('truetype');
    font-display: swap;
} 
 
@font-face {
    font-family: 'poeti';
    font-style: normal;
    font-weight: 300;
    src: url(fonts/poeti-aaa-300.eot);
    src: url(fonts/poeti-aaa-300.eot?#iefix) format('embedded-opentype'), url(fonts/poeti-aaa-300.woff) format('woff'), url(fonts/poeti-aaa-300.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'poeti';
    font-style: normal;
    font-weight: 400;
    src: url(fonts/poeti-aaa-400.eot);
    src: url(fonts/poeti-aaa-400.eot?#iefix) format('embedded-opentype'), url(fonts/poeti-aaa-400.woff) format('woff'), url(fonts/poeti-aaa-400.ttf) format('truetype');
    font-display: swap;
}

body {
    font-family: 'poeti';
    font-weight: 700;
    direction: rtl;
    background-repeat: no-repeat;
    font-size: 16px;
}

h1 {
    font-size: 3em
}

h2 {
    font-size: 1.4em
}

h3 {
    font-size: 1.2em
}

p,
li {
    font-size: 1em
}
img{
    max-width: 100%;
}
.brownBG{
    background-color: #60534a;
}
.goldBG{
    background-color: #a49435;
}
@media all and (min-width:320px) {
    body {
        font-size: 14px;
    }
    html,
    body {
        overflow-x: hidden;
    }
    .contactForm .cfCTA{
        background-color: #fff;
    }
    .contactForm .cfCTA h2{
        color: #6f6124;
        font-size: 2.2em;
        font-weight: 800;
        line-height: 1.2;
    }
    .contactForm {
        background-color: transparent;
    }
    .contactForm  input[type=text],.contactForm  input[type=email],.contactForm  input[type=number]{
        border-radius: 7px;
        font-size:1.4em;
        text-align: right;
        color:#000;
        border:none;
    }
    .form-control:focus{
        box-shadow: 0 0 0 0.25rem rgba(111, 97, 36,0.25);
        border-color:#978C5F;
    }
    .form-check-input:focus {
        border-color:#978C5F;
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(111, 97, 36,0.25);
    }
        .form-group select {
    border-radius: 7px;
    font-size: 1.2em;
    text-align: right;
    color: #000;
    border: none;
  }
    .form-check-input:checked {
        background-color: #6f6124;
        border-color: #6f6124;
    }
    .form-control::-webkit-input-placeholder { /* Edge */
        color: #6f6124;
      }
      
      .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #6f6124;
      }
      
      .form-control::placeholder {
        color: #6f6124;
      }
      .sendBtn {
        background-color: #a49435;
        border-radius: 7px;
        font-size: 1.6em;
        font-weight: 600;
        color: #fff;
        border: none;
        transition: 0.2s;
        margin-bottom: 10px;
        margin-top: 20px;
        box-shadow: 4px 4px 0px 0px #fff;
    }
      .sendBtn:focus,.sendBtn:active,.sendBtn:hover{
        background-color: #3f3715;
        transition: 0.2s;
      }
      .input-group label{
        font-size: 1.2em;
        color: #6f6124;
        margin-top: 10px;
        margin-bottom: 10px;
      }
      .input-group label input{
        position: absolute;
        right: -30px;
      }
      .imageContainer {
        padding: 0px;
    }
    /*.imageContainer .imageSide {
        background-image: url(../images/Mobile_Pic.jpg);
        height: 82vw;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        position: relative;
        align-items: end;
        display: flex;
    }*/
    .imageContainer .imageSide .openHouseRibon {
        position: absolute;
        top: 50px;
        left: -25px;
        width: 300px;
    }
    .imageContainer .imageSide p {
        color: #fff;
        text-align: center;
        width: 100%;
        font-size: 1.2em;
        line-height: 1.4em;
        margin-bottom: 5px;
        text-shadow: 2px 2px 5px #000;
    }
    .formSide {
        background-color: #000;
        min-height: calc(100vh - 82vw);
    }
    .logo {
        max-width: 180px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .formSide .formText{
        color:#fff;
        font-weight: 400;
        font-size: 1.2em;
        line-height: 1.4em;
    }
    .whiteColor{
        color:#fff;
    }
    .phoneRibon {
        width: 56px;
        position: fixed;
        top: 30%;
        left: 0;
        background: #a49435;
        padding: 10px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
        box-shadow: 2px 4px 0 0 #fff;
    }
    .houseRibon {
        width: 56px;
        position: fixed;
        top: 38%;
        left: 0;
        background: #a49435;
        padding: 0px;
        padding-right: 7px;
        padding-top: 3px;
        padding-bottom: 3px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
        box-shadow: 2px 4px 0 0 #fff;
        font-size: 10px;
        text-align: center;
    }
    #err_00N4I00000Dxhu8{
        color:white;
        background-color:red;
        display:none;
        font-size:18px;
        text-align: center;
        margin-top: 10px;
    }
    label[for="00N4I00000Dxhu8"] {
        font-size: 1.2em;
        line-height: 1.4;
        padding-left: 10px;
        font-weight: 400;
        color: #fff;
    }
    .carousel-indicators{
        align-items: center;
    }
    .carousel-indicators [data-bs-target]{
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #a49435;
        opacity: 1;
    }
    .carousel-indicators [data-bs-target]:not(.active){
        width: 10px;
        height: 10px;
        background-color: #fff;
        opacity: 1;
    }
}

@media all and (min-width:768px) {
    #desktopCarousel .carousel-indicators{
        bottom: -50px;
    }
    .phoneRibon{
        display:none;
    }
    #formMobile{
        max-width: 480px;
    margin: 0 auto;
    }
    .imageContainer .imageSide {
        background-image: url(../images/deskbg.jpg);
        height: 66vw;
        background-position: center;
        background-size: cover;
    }
    .imageContainer .imageSide p{
        font-size: 1.8em;
        margin-bottom: 0;
        padding: 0 20px;
    }
    .logo{
        max-width: 200px;
    }
    .formSide .formText{
        font-size: 1.8em;
    }
    .contactForm input[type=text], .contactForm input[type=email], .contactForm input[type=number]{
        font-size: 1.8em;
    }
    .houseRibon {
        width: 80px;
        position: fixed;
        top: 130px;
        left: 0;
        background: #a49435;
        padding: 4px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 35px;
        border-bottom-right-radius: 35px;
        box-shadow: 2px 4px 0 0 #fff;
        font-size: 11px;
        text-align: center;
    }
    .imageContainer .imageSide .openHouseRibon{
        width: 360px;
        left: -25px;
    }
    .desktopView{
        position: relative;
    }
    #desktopCarousel{
        width: 300px;
        position: absolute;
        top: 33vw;
        right: 30px;
    }
}
@media all and (min-width:992px) {
    .container{
        max-width: initial;
    }
    #formMobile {
        max-width: 100%;
        padding-bottom: 20px;
        position: relative;
        gap: 15px;
    }

    .checkboxGroup{
        position: absolute;
        bottom: -5px;
    }
    .houseRibon {
        top: 30px;
    }
    .checkboxGroup.first{
        right:0;
        width:66%;
        justify-content: end;
    }
    .checkboxGroup.second{
        left:0;
        width:80%
    }
    .input-group label{
        color:#fff;
        font-size: 1.1em;
        line-height: 1.6;
        margin-top: 0px;
        margin-bottom: 0px;
        margin-right: 30px;
        min-height: 37px;
    }
    .input-group label input {
        position: relative;
        right: -15px;
        border: 1px solid #fff;
    }
    #formMobile h3{
        flex-basis: 13%;
        font-size: 2em;
        align-self: center;
        text-align: center;
    margin: 0;
    margin-top: 15px;
    }

    .accessRow{
        margin-bottom: 115px;
    }
    .modal-dialog{
        max-width:1024px;
    }
    .imageContainer .imageSide {
        height: 100vh;
        background-image: url(../images/deskbg.jpg);
        background-position: right center;
        background-size: cover;
    }
    #desktopCarousel{
        width: 300px;
        position: absolute;
        top: 36vw;
        right: 30px;
    }
    .imageContainer .imageSide p {
        font-size: 1.8em;
        margin-bottom: 50px;
    }
    .imageContainer .imageSide .openHouseRibon {
        position: absolute;
        bottom: 20vh;
        left: 0;
        width: 480px;
    }
    .logo {
        max-width: 160px;
    }
    .formSide {
        background-color: #000;
        min-height: 100vh;
    }
    .formDeskTop {
        min-height: 28vh;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
    }
    .formDeskBottom {
        min-height: calc(60vh - 46px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .formSide .formText {
        font-size: 1.3em;
        padding: 0 20px;
    }
    label[for="00N4I00000Dxhu8"]{
        font-size: 1.2em;
    line-height: 1.4;
    padding-left: 10px;
    font-weight: 400;
    color: #fff;
    }
}
@media all and (min-width:1200px){
    #desktopCarousel {
        width: 300px;
        position: absolute;
        top: 48vh;
        right: 30px;
    }
    #formMobile {
        max-width: 320px;
        margin: 0;
        flex-basis: 100%;
        width: 100%;
    }
    .imageContainer .imageSide .openHouseRibon{
        width: 540px;
    }
    .formSide .formText {
        font-size: 1.6em;
        padding: 0px 20px;
    }
    .contactForm input[type=text], .contactForm input[type=email], .contactForm input[type=number] {
        font-size: 1.6em;
    }
    .formDeskTop{
        min-height: 30vh;
    }
    .formDeskBottom{
        min-height: calc(55vh - 46px);
    }
    label[for="00N4I00000Dxhu8"]{
        font-size: 1.2em;
    line-height: 1.4;
    padding-left: 10px;
    font-weight: 400;
    color: #fff;
    }
} 
@media all and (min-width:1330px) {
    #desktopCarousel {
        width: 300px;
        position: absolute;
        top: 48vh;
        right: 40px;
    }
    #formMobile {
        max-width: 100%;
        margin: 0;
        flex-basis: 100%;
        width: 100%;
    }
    .formSide > .row{
        padding: 0 5%;
    }
    .formSide .formText {
        font-size: 1.8em;
        padding: 0px 0px;
    }
}
@media all and (min-width:1400px) {
    #desktopCarousel {
        width: 400px;
        position: absolute;
        top: 48vh;
        right: 50px;
    }
    .formSide .formText {
        font-size: 1.4em;
        padding: 0px 0px;
    }
    .imageContainer .imageSide p {
        margin-bottom: 8vh;
        font-size: 2.4em;
    }
}
@media all and (min-width:1680px) {
    #desktopCarousel {
        width: 400px;
        position: absolute;
        top: 52vh;
        right: 50px;
    }
    .formSide > .row {
        padding: 0 4%;
    }
    .contactForm input[type=text], .contactForm input[type=email], .contactForm input[type=number] {
        font-size: 1.8em;
    }
    .imageContainer .imageSide{
        background-position: top center;
    }
    .imageContainer .imageSide p{
        margin-bottom: 5vh;
    }
    .formSide .formText{
        font-size: 1.7em;
    }
    .imageContainer .imageSide .openHouseRibon {
        width: 800px;
        left: 0px;
    }
    .sendBtn{
        font-size: 1.8em;
    }
}
@media all and (min-width:1880px) {

    .formSide .formText {
        font-size: 1.9em;
    }
    .imageContainer .imageSide p {
        margin-bottom: 5vh;
        font-size: 2.8em;
    }
    .formDeskTop {
        min-height: 33vh;
    }
}
:root{scroll-behavior:unset}




/*extra css because of agree modal*/
#popupAgreeModal .modal-dialog {
    width: calc(100% - 20px);
    max-width: 480px;
    position: absolute;
    top: 50%;
    right: 50%;
    margin: 0;
    transform: translate(50%,-50%);
}
#popupAgreeModal .modal-dialog .modal-content {
    background-color: #fdfcf8;
    background-image: url(../images/whiteopacitylogo.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
}

#popupAgreeModal .modal-dialog .modal-content:before {
    content: '.';
    color: transparent;
    position: absolute;
    width: 96%;
    height: 92%;
    border: 1px solid #A19346;
    right: 2%;
    top: 4%;
}
#popupAgreeModal .modal-dialog .modal-content .modal-body {
    padding-right: 105px;
    padding-bottom: 80px;
}
#popupAgreeModal .modal-dialog .modal-content .modal-body h4{
    font-size: 2em;
    color:#605126;
    padding-top: 10px;
}
#popupAgreeModal .modal-dialog .modal-content .modal-body h5{
    font-size: 1.6em;
    color:#605126;
}
label[for="00N4I00000Dxhu8"] input{
    margin-left: 10px;
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: sub;
}
img.innerLogopopup {
    position: absolute;
    right: 0;
    max-width: 97px;
    top: 0;
    height: 100%;
}
button#sendFormAfterValid {
    background-color: #6F6124;
    border-radius: 7px;
    font-size: 1.6em;
    font-weight: 400;
    color: #fff;
    border: none;
    padding: 7px 25px;
    transition: 0.2s;
    margin: 0 auto;
    display: block;
    position: absolute;
    right: 50%;
    bottom: 25px;
    transform: translateX(25%);
}
button#sendFormAfterValid:hover{
    background-color: #3f3715;
    transition: 0.2s;
}
#popupAgreeModal .btn-close {
    position: absolute;
    right: 7px;
    top: 20px;
    border: none;
    font-size: 20px;
    z-index: 1;
    cursor: pointer;
}
#popupAgreeModal .modal-header{
    border:none !important;
}
@media all and (max-width:480px){
    #popupAgreeModal .modal-dialog .modal-content .modal-body h4{
        font-size: 1.6em;
    }
    #popupAgreeModal .modal-dialog .modal-content .modal-body h5{
        font-size: 1.2em;
    }
    #popupAgreeModal .modal-dialog .modal-content .modal-body label[for="00N4I00000Dxhu8"]{
        font-size: 1.2em;
    }
}
/*adding houses*/
@media (min-width:320px){
    img.housesImages {
        width: 100%;
        border: 2px solid #A19346;
    }
    .houseTitle h2{
        color: #A19346;
        font-size: 1.8em;
        font-weight: 600;
    }
    a.houseCaption{
        color:#fff;
    }
    .houseCube:hover a.houseCaption{
        color:#000;
    }
}
@media (min-width:1080px){
    .housesGrid {
        width:1024px;
        max-width: 100%;
        padding: 0 20px;
        margin: 0 auto;
    }
    .houseTitle h2{
        font-size:2.6em;
    }
}