:root{
    --principal:#8af193;
    --gray1:#777777;
    --gray2:#585858;
    --softgray:#b8b8b8;
    --graytext1:#353535;
    --background1:#f7f7f7;
    --background-black:#000000;
    --color-white:#f7f7f7;
    --color-white2:#a1a1a1;
    --background2:#ddb9d4;
    --background3:#ebf4f7;
    --background4:#EDEEEF;
    --background5:#f7f7f7;
    --bg-orange:#ffbb00;
    --color-orange:#FF9D00;
    --color-orange2:#ffd78e;
    --bg-green1:#00A19B;
    --color-green1:#00A19B;
    --color-green1-opaque:#274443;
    --color-green2:#007470;
    --ribboncolor:#59324C;
    --ribboncolor2:#c9b5c2;
    --blackcarbon:#171717;
}



/* loader  */

.wrapperloader{
    height: 80%;
}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid var(--bg-green1); /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


@font-face {
    font-family: romeliosans;
    src: url("../resources/fonts/Romeliosans-jE1Dy.otf") format("opentype");
}

*{
    font-smoothing: anti-aliased;
    font-family: "romeliosans";
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    width: 100vw;
    height: 100vh;
    margin: 0;
    font-family: Helvetica, sans-serif;
    background-color: #f4f4f4;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

.hoverb{
    transition: transform .5s ease;
}
.hoverb:hover{
    cursor: zoom-in;
    border: none;
    transform: scale(1.05);
}

.navigator-home{
    height: 100%;
    width: 100%;
}

.slick-track,.slick-list{
    height: 100%;
    width: 100%;
}

.navigator-home img{
    width: 100%;
    height: 100%;
}
html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.f-height{
    height: 100%;
}

.f-width{
    width: 100%;
}

.secc1{
    width: 100%;
    height: 92%;
}
.secc1propman{
    width: 100%;
    height: 92%;
}

.secc4{
    width: 100%;
    height: 80%;
}
.secc4index{
    width: 100%;
    height: 80%;
}
.secc4propmana{
    width: 100%;
    height: 90%;
}

.secc2,.secc3{
    width: 100%;
    height: 100%;
}

.secc2about{
    width: 100%;
    height: 130%!important;
}

.secc2{
    background-color: var(--background5);
}
.secc2propforsale{
    height: 140%;
    background-color: var(--background-black);
}
.secc2propforsale h1{
    color: var(--color-white);
}

.secc3{
    background-color: var(--background1);
}

.secc4{
    background-color: var(--background1);
}

.header{
    border-bottom: 1px solid #E2E8F0;
    height: 8%;
}

.navbarM {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .7rem 1.5rem;
}

.hamburger {
    display: none;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: var(--bg-orange);
}
.nav-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imgLogoMenu{   
    height: 130%;
}

.nav-item {
    margin-right: 1.5rem;
}

.nav-link{
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link2{
    font-size: 1.6rem;
    font-weight: 400;
    color: #475569;
}

.nav-link::before {
    transition: 300ms;
    height: 5px;
    content: "";
    position: absolute;
    background-color: #031D44;
  }

.nav-link:hover{
    color: var(--color-green1);
}
.nav-link2:hover{
    color: var(--color-green1);
}
  
  li > a {
    color: #333;
    text-decoration: none;
    display: inline-block;
    position: relative;
  }
  
  li > a::after {
    content: "";
    display: block;
    margin: auto;
    height: 2px;
    width: 0;
    top: 20px;
    background: transparent;
    transition: all 0.3s;
    
  }
  
  li > a:hover::after, li > a.active-nav::after {
    width: 100%;
    background: var(--ribboncolor);
  }

  
.nav-logo {
    font-size: 2.1rem;
    font-weight: 500;
    color: #482ff7;
}


/* subemnu */
.dropdown {
    float: left;
    overflow: hidden;
  }
  
  .dropdown .dropbtn {
    cursor: pointer;
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .dropdown-content {
    border-radius: 6px;
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
  }
  
  .dropdown-content a {
    border-radius: 6px;
    float: none;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {
    background-color: #ddd;
  }



.show {
    display: block;
  }

/* slick vertical dots */


.slick-dotted.slick-slider {
    margin-bottom: 0px!important;
}


.vertical-dots
{
    right:10px;
    list-style: none;
    display: block;
    position: absolute;
    top: 40%;
    margin-top: -10px;
    text-align: right;
}
.vertical-dots li
{
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.vertical-dots li button
{
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.vertical-dots li button:hover,
.vertical-dots li button:focus
{
    outline: none;
}
.vertical-dots li button:hover:before,
.vertical-dots li button:focus:before
{
    opacity: 1;
}
.vertical-dots li button:before
{
    font-family: 'slick';
    font-size: 12px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: rgb(255, 252, 64);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.vertical-dots li.slick-active button:before
{
    opacity: .75;
    color: rgb(255, 240, 25);
}

/* seccion 3 */


.img-right-3
{
width: 100%;

}

.img-left-icon{
    width: 25%;
}

.containersecc3{
    width: 80%;
    height: 80%;
}

.secc3 h2{
    color: var(--graytext1);
    font-size: 60px;
    font-weight: 800;
}
.secc3 p{
    color: var(--graytext1);
    font-size: 18px;
    font-weight: 300;
}

.btn-moreinfo{
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 800;
    padding: 8px;
    padding-left: 30px;
    padding-right: 30px;

    background-color: var(--bg-orange);
    border-radius: 12px;
    border-color: var(--graytext1);
}


/* sección 4 */


.body4{
    height: 100%;
}
.footer4{
    height: 20%;
}
.row1{
height: 25%;
}
.row2{
height: 75%;
}

.icon-card{
    height: 30%;
}
.card h3{
    
color: var(--color-white);
font-size: 30px;
font-weight: 700;
}

.secc4 h2{
    color: var(--graytext1);
    font-size: 35px;
    font-weight: 800;
}
.secc4index h2{
    color: var(--graytext1);
    font-size: 35px;
    font-weight: 800;
}
.secc4 p{
    color: var(--graytext1);
    font-size: 15px;   
}
.secc4index p{
    color: var(--graytext1);
    font-size: 15px;   
}
.card p{
    
color: var(--color-white);
font-size: 16px;
font-weight: 300!important;
}

.card{
    padding-top: 10px;
    height: 85%;
background-color: var(--ribboncolor);
border-radius: 20px;
}
.w-card{
    width: 70%;
}

.img-card{
    width: 95px;
}

.container{
    width: 75%;
}

.topfooter{
    color: var(--color-white);
    background-color: var(--bg-green1);
    height: 85%;
}

.bottomfooter{
    padding-left:20px!important;
    background-color: var(--background-black);
    height: 15%;
    padding:3px;
}
.bottomfooter h5{
    font-weight: 700!important;
    font-size: 10px;   
    color: var(--color-white2);
}
.containerfooter2{
    width: 80%;
}
.containerfooter3{
    width: 95%;
}

.topfooter li {
    list-style: inside;
}
.topfooter a {
    font-size: 95%!important;
    color: white;
}
.topfooter h3 {
    font-size: 20px;
    font-weight: 600!important;
    color: white;
}

.containerfooter3 p{
    display: inline;
    color: var(--color-white);
    font-size: 11px;
}

.containersecc1home{
    position: relative;
}

.filterbar{
    width: 65%;
    position: absolute;
    top: 82%;
    left: 50%;
    transform: translate(-50%, -82%);    
    border: solid;
    border-color: var(--bg-orange);
    background: rgba( 255, 255, 255, 0.85 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    border-radius: 25px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.filterbottombar{
    position: absolute;
    top: 89%;
    left: 50%;
    transform: translate(-50%, -75%);    
}

.filterbottombar h4{
    font-weight: 500;
    color: var(--color-white);
}

.filterbar h4{
    font-size: 20px;
    color: var(--ribboncolor);
}
.filterbar h5{
    font-size: 15px;
    font-weight: 200!important;
    color: var(--ribboncolor);
}

.filterbar select{
    width: 100%;
    font-size: 16px;
    font-weight: 500!important;
    color: var(--color-green2)
}
.filterbar i{  
    color: var(--ribboncolor);
}


.mainareacontainer{
    height: 100%;
    padding:2%;
}
.headermaina{
    height: 10%;
}
.bodymaina{
    height: 90%;
}
.bodymaina iframe{
    align-self: center;
    width: 80%;
    height: 90%;
}
.mainareacontainer script{
    height: 200px!important;
}

.headermaina h1:after{
    padding-bottom: 14px;
    border-bottom:3px solid var(--ribboncolor);
    display: block;
    margin-left:15px;
    content: " ";
	width: 90%;
}

/*Palm on the tree*/




.toppalm{
    background-color: var(--color-green1);
}

.toppalm{
width: 100%;
height: 20%;
}

.toppalm h1{
    font-size: 32px;
    color: var(--color-white);
}
.bannerpalm{
    width: 100%;
    height: 100%;
}

.bottompalm{
    width: 100%;
    height: 80%;
}

.imgpalm-r1{
    height: 100%;
}


.bottompalm h3{
    font-size: 32px;
    font-weight: 800;
}
.bottompalm h4{
    font-size: 20px!important;
    font-weight: 200!important;
}

.parentpalmcontainer2
{
    height: 35%;
}
.palm-bottom-secc2
{
    height: 65%;
}


.palmcontainer1-1{
    width: 80%;
}


.palm-container-1-secc2{
    width: 80%;
}

.palm-container-1-secc2 h3{
    font-size: 30px;
    font-weight: 800!important;
}
.palm-container-1-secc2 h4{
    width: 75%;
    text-align: left;
    font-size: 17px;
    font-weight: 300!important;
    line-height: 27px;
}

.palm-secc2-right img{
    height: 50%;
    width: 100%;

}

.palm-container-bottom-2{
    width: 80%;
}

.border-img-down{
    border-bottom: solid;
    border-left: solid;
    border-color: white;
}
.border-img-up{
    border-left: solid;
    border-color: white;
}

.top-container-sec3{
height: 22%;
}
.bottom-container-sec3{
height: 70%;
}
.footerbottompal{
height: 8%;
}

.widthcontainer-secc3{
    width: 85%;
}

.secc3 li{
    color: var(--color-white);
    font-size: 20px;
    font-weight: 700!important;
    list-style:outside;
}

.bottomlipalm li{
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700!important;
    list-style:outside;
}
.secc3palm{
background-color: var(--ribboncolor);
}

/* luum */

.boxmenu {
    position: relative;
    background: var(--background1);
    margin: 4px;
    display: inline-block;
  }
  .soldmenu:before {
    content: "";
    z-index: -1;
    overflow: hidden;
    transform: rotate(-135deg);
    width: 120px;
    display: block; 
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 34px;
    right: -20px;
    clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px);
    height: 14px;
    width: 58px;
  }
  .soldmenu:after {
    content: "SOLD OUT";
    z-index: 1;
    overflow: hidden;
    font-size: 9px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    width: 80px;
    display: block; 
    background: #79A70A;
    background: linear-gradient(#9BC90D 0%, #79A70A 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 8px; right: -30px;
    clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px)
  }

.bottom-container-luum-sec3  li.slick-active button:before
{
    opacity: .75!important;
    color: var(--background1)!important;
}


.secc3luum{
    background-color: var(--blackcarbon);
}

.text-left-luum{
    align-self: center;
    text-align: right;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 45px;
}

.bottom-container-luum-sec3{
    height: 100%;
}


.map-luum iframe,.mapamenities{
    height: 80%;
}

.map-luum label,input{
    font-size: 22px!important;
}

/*property management*/


.f-heightpropm{
  height: 100%;
}
.propsecc1top{
    height: 26%;
    background-color: var(--bg-green1);
}

.propsecc1bottom{
    background-color: var(--background4);
    height: 76%;
}

.propsecc1top h1{
color: var(--color-white);
font-size: 32px;
}

.propertycard{
    color: var(--color-white);
    height: 90%;
    width: 80%;
    background-color: var(--bg-green1);
    border-radius: 15px;
}

.propsecc1bottom .cardicon{
height: 30%;
}
.propsecc1bottom .cardtitle{
height: 20%;
}
.propsecc1bottom .cardsub1{
height: 25%;
}
.propsecc1bottom .cardsub2{
height: 25%;
}

.propsecc1bottom h1{
    font-size: 22px;
    font-weight: 800!important;
}

.topseccprop h1{
    font-size: 34px;
    font-weight: 700;
}

.propsecc1bottom h3{
    font-size: 16px;
    font-weight: 300!important;
}

.propsecc2container{
    width: 80%;
}

.propsecc2container h2{
    color: var(--color-white);
    font-weight: 700!important;
}

.color-blue{
color: var(--color-green1);

}
.color-ribbon{
color: var(--ribboncolor);

}
.color-green{
color: var(--color-green1);

}

.cardsecc2prop p{
    color: var(--color-white2);
    padding-top: 7px;
    font-size: 12px;
    font-weight: 200!important;
}

.h-30{
    height: 28%;
}

.parentcontainerprop3{
    width: 80%;
}

.parentcontainerprop3 h1{
    padding-top: 30px;
    font-size: 38px;
    font-weight: 800;
}
.parentcontainerprop3 p{
    text-align: justify;
    font-size: 20px;
    font-weight: 200!important;
}

.contact-form{
    border:solid 1px;
    border-color: var(--color-white2);
    border-radius: 15px;
    background-color: var(--background3);
}
.img-form{
    width: 28%;
}

.contact-form label{
    font-size: 14px;
}
.contact-form input{
    border-radius: 7px;
    font-size: 12px;
}
.contact-form textarea{
    border-radius: 7px;
    font-size: 12px;
    resize: none;
}

.btn-submit-form{
    margin-bottom: 10px;
    color: rgb(255, 255, 255);
    font-size: 15px;
    font-weight: 800;
    padding: 2px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: var(--bg-orange);
    border-radius: 12px;
    border-color: var(--graytext1);
}


/* About section */
.secc1-e{
height: 160%;
}
.topseccabout{
    height: 23%;
    background-image: url('../resources/img/puerto.jpg');
    background-size: cover;
    border:none;
}

.containerabout{
    height: 42%;
}

.topseccabout img{
    height: 100%;
    width: 100%;
}

.bottomseccabout{
    width: 65%;
}

.body2ab{
    height: 35%;
}

.bottomseccabout h1{
    font-size: 38px;
    font-weight: 200!important;

}

.bottomseccabout p{
    font-size: 20px;
}

.body2ab img{

    height: 100%;
}


.body2ab p{
    font-size: 18px;
}

.abheader4{
    height: 16%;
}

.abtop4{
    height: 57%;
}
.abbottom4{
    height: 27%;
}

.abtop4 iframe{
    height: 100%;
    width: 100%;
}

.containerheadab{
    width: 60%;
}


/* properties for sale section */




.details-body p{
    font-size: 17px;
}



.cardpropleft input,label{
    font-size: 14px;
}
.cardpropleft h4{
    font-size: 17px;
}

.cardpropleft select{
    font-size: 12px;
}

.forssecc1top{
    padding-left: 3%;
    color: var(--color-white);
    height: 100px;
    background-image: linear-gradient(to right, var(--color-green1) , var(--color-white));
}

#seerange{
    font-size: 12px;
    margin-top: 10px;
    color: var(--graytext1);
}

.forssecc1top h1{
    font-size: 32px;
}

.forssecc1bott{
    height: 100%;
}

.leftprops{
    border-right: solid;
    border-color: var(--softgray);
    border-radius: 5px;
    -webkit-box-shadow: -5px 0px 11px -2px rgba(0,0,0,0.13); 
box-shadow: -5px 0px 11px -2px rgba(0,0,0,0.13);
    

}
.rightprops{
    border-radius: 5px;
    -webkit-box-shadow: -2px 0px 34px -2px rgba(0,0,0,0.28); 
box-shadow: -2px 0px 34px -2px rgba(0,0,0,0.28);

}

.color-orange{
    color: var(--color-orange);
}

.card-properties{
    background-color: var(--background3);
}
.headerprop{
    border-bottom: solid;
    border-radius: 2px;
    border-color: var(--color-green1);

}

.bodyprop li{
    margin-left:4%;
    padding-top: 3%;
 list-style: circle;  
}

.containercardsprop{
    width: 98%;
    height: 100%;
}

.card-properties{
    border: solid 2px;
    border-color: var(--gray1);
    border-radius: 10px;
}

#modaldetails p{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: 500;
    font-size: 15px;
    text-align: justify;
}

.bg-green1{
    background-color: var(--bg-green1);
}

.propfeatures span{
    margin-bottom: 10px;
    font-size: 12px;
}

.tourfeatures span{
    margin-bottom: 12px;
    font-size: 12px;
}


.modal{
    background-color: rgba(104, 104, 104, 0.5);
}


.clickzone{
    cursor: pointer;
    transition: transform .5s ease;
}

.clickzone2{
    cursor: pointer;
}
.clickzone{
    cursor: pointer;
    transition: transform .5s ease;
}

.clickzone:hover{
border: none;
transform: scale(1.03);
}
.card-img{
height: 220px;
}

.card-img img{
    border-top-right-radius: 9px;
    border-top-left-radius: 9px;
    width: 100%;
}

.bottom-img-card{
    height: 100px;
}

.bottom-img-card img{
    width: 100%!important;
}

.img-cardcover{
    border: none;
    background-size: cover;
}

.border-carr-l{
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: solid 3px;
    border-color: var(--color-white);
}
.border-carr-r{
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: solid 3px;
    border-color: var(--color-white);
}

.titlearea h3{
    width: 70%;
}


.detailsinfo{
    padding-top: 10px;
    border-top: solid 2px;
    border-color: var(--ribboncolor2);
}

.detailscardcontainer{
    border-radius: 8px;
    padding:35px;
    background-color: var(--background5);
    width: 80%!important;
    -webkit-box-shadow: 2px 3px 14px -4px rgba(0,0,0,0.91); 
    box-shadow: 2px 3px 14px -4px rgba(0,0,0,0.91);
}

#propscriptcontainer{
    width: 100%;
}
/* ribbon css */

.subtitlearea{
    
    position: relative;
}


.pdflinkprop{
    color: var(--graytext1);
    font-size: 18px;
}
.pdflinkprop:hover{
    color: var(--graytext1);
}
.ribbon3 {
    font-size: 14px;
    color: var(--color-white);
    width: 55px;
    height: 30px;
    line-height: 28px;
    padding-left: 15px;
    position: absolute;
    left: -10px;
    top: 10px;
    background: var(--ribboncolor);
  }
  .ribbon3:before, .ribbon3:after {
    content: "";
    position: absolute;
  }
  .ribbon3:before {
    height: 0;
    width: 0;
    top: -8.5px;
    left: 0.1px;
    border-bottom: 9px solid black;
    border-left: 9px solid transparent;
  }
  .ribbon3:after {
    height: 0;
    width: 0;
    right: -14.5px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #59324C;
  }

  /* end ribbon */


  .iconsarea i{
      color: var(--color-green1);
  }

  .iconsarea h4{
      font-size: 14px;
      display: inline;
  }

  .subtitlepropcard{
    color: var(--gray1);
  }

  .detailsproperticarousel img{
      height: 400px;
      width: auto;
  }

  .bg-1{
      background-color: var(--background3);
  }

  .detailsproperticarousel > .slick-prev::before{
        color: var(--ribboncolor)!important;
  }
  .detailsproperticarousel > .slick-next::before{
        color: var(--ribboncolor)!important;
  }

  .slick-next .slick-arrow{
      color: var(--color-white)!important;
  }

  .detailsinfo h2{
      display: inline;
      font-size: 30px;
  }
.detials-body p{
    font-weight: 400!important;
}

.details-footer h4{
    font-size: 20px;
    display: inline;
}


.propfeatures  h1{
    margin-top: 25px;
    font-size: 30px;
    font-weight: 700;
}
/* Login Area */

.loginarea img{

    width: 70%;
}
.loginarea input{
    border-radius: 9px;
font-size: 16px;
}
.loginarea label{
font-size: 18px;
}
.loginarea button{
    padding-left: 7%;
    padding-right: 7%;
border-radius: 10px;
font-size: 18px;
}

.f-heights{
    height: 100%;
}




/* 1080p sizes */


@media only screen and (min-width: 1800px) {
    .card-img {
        height: 340px!important;
      }
}







/* tablets */



@media only screen and (max-width: 1024px) {
    .containerfooter2 ul{
        padding-left: 0px!important;
    }

    .topfooter a {
        font-size: 80%;
      }
}

@media only screen and (max-height: 700px) {
    .secc3 li {
        font-size: 14px;
    }
}


/* smaller devices */

@media only screen and (max-width: 500px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 7rem;
        flex-direction: column;
        background-color: #fff;
        width: 100vw;
        border-radius: 10px;
        text-align: center;
        transition: 0.3s;
        box-shadow:
            0 10px 27px rgba(0, 0, 0, 0.05);
            z-index: 99999;
    }

    .nav-menu.active {
        left: 0;
        z-index: 999;
    }

    .nav-item {
        margin: .6rem 0;
    }

    .hamburger {
        display: block;
        cursor: pointer;
    }
    

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* page 1 mobile */

    .filterbar {
        width: 95%;
        position: absolute;
        top: 83%;
        left: 50%;
        transform: translate(-50%, -83%);
    }

    .filterbottombar {
        position: absolute;
        top: 95%;
        left: 50%;
        transform: translate(-50%, -95%);
      }

      .filterbar h4,h5{
          font-size: 14px!important;
      }

      .filterbar i{
          font-size: 24px;
      }

      .containersecc3  h2{
          font-size: 32px!important;
      }
      .containersecc3  p{
          font-size: 18px!important;
      }

      .img-left-icon {
        width: 40%!important;
      }

      .body4, h2{
        font-size: 32px!important;
      }

      /* luum */
      .img-down-luum{
        height: 200px!important;
      }

      .map-luum label,input{
        font-size: 14px!important;
    }

    .map-luum h2{
        font-size: 22px!important;
    }

    .f-heightm {
        height: 40% !important;
      }

      .palm-bottom-secc2{
        height: 16%!important;
    }

    .luum-bottom-secc2{
        height: 40%!important;
    }

    .luumcontainer h1{
        padding-bottom: 90%;
        font-size: 34px!important;
        color: #FFF!important;
        font-weight: 900;
    }

    .dropdown-content {
        position: relative;
    }

    .container{
       width: 80%!important; 
    }
    .img-card {
        width: 50px;
    }

    .w-card{
        width: 85%!important;
    }

    .w-card h3{
        font-size: 22px!important;

    }
    .w-card p{
        font-size: 12px!important;

    }

    .secc4index{
        height: 140%;
    }

    .bottomfooter h5{
        font-size: 9px!important;
    }
    
    .topfooter p{
        font-size: 9px!important;
    }
    .topfooter i{
        font-size: 15px!important;
    }
    .topfooter h3{
        font-size: 15px!important;
    }

    


    @media only screen and (max-height: 700px) {
        .footer4{
            display: none!important;
        }

        .abbottom4{
            display: none!important;
        }
        .hidetext{
            display: none!important;
        }



    }

    .footer4{
        height: 25%!important;
    }

    /* the palm on the three mobile */


    .bottompalm h3 {
        font-size: 26px!important;
      }

    .imgpalm-r1 {
        width: 100%;
    }

    .palmcontainer1-1 h4{
        font-size: 14px!important;
    }

    .palm-container-1-secc2 {
        width: 90%!important;
      }

    .palm-container-1-secc2 h3{
        font-size: 18px!important;
    }
    .palm-container-1-secc2 h4{
        font-size: 12px!important;
        width: 100%;
        line-height: 16px!important;
    }

    .widthcontainer-secc3{
        width: 95%!important;
    }
    .widthcontainer-secc3 li{
        font-size: 12px!important;
    }

    .bottomlipalm li{
        font-size: 10px!important;
    }

    .top-container-sec3 {
        height: 14%!important;
    }

    .f-heights{
        height: 90%!important;
    }

    .bottom-container-sec3{
        height: 30%!important;
      }

      

      .palm-container-bottom-2 {
        width: 90%;

      }


      /* propertie management mobile */


      .pdflinkprop {
        font-size: 11px;
      }
      .propsecc1bottom h3 {
        font-size: 12px!important;
      }
      .propsecc1bottom h1 {
        font-size: 16px!important;
      }
      .propsecc1bottom i {
        font-size: 28px!important;
      }

      .propertycard {
            height: 100%;  
       }
       
       .f-heightpropm{
           height: 22%;
       }

       .propsecc1bottom {
        height: 120%!important;
      }

      .propsecc1top {
        height: 12%;
      }

      .secc1propman{
        height: 140%;
    }

    .topseccprop h1 {
        font-size: 28px;
        text-align: center;
      }

      .propsecc2container h2 {
            font-size: 14px!important;
      }
      .propsecc2container p {
            font-size: 11px!important;
      }

      .secc2propforsale{
          height: 150%!important;
      }

      .secc2propforsale i{
          font-size: 28px!important;
      }

      .parentcontainerprop3 h1{
          font-size: 22px!important;
      }
      .parentcontainerprop3 p{
          font-size: 16px!important;
      }

      .secc4propmana{
          height: 110%!important;
      }



      /* about secc mobile */

      .topseccabout{
          height: 12%!important;
      }

      .containerabout {
        height: 38%;
      }


      .bottomseccabout {
        width: 93%!important;
    }

    .bottomseccabout h1 {
        font-size: 24px!important;
    }
    .bottomseccabout p {
        font-size: 15px!important;
    }

    .body2ab img{
        width: 100%!important;
        height: 170px!important;
    }
    .body2ab p{
        font-size: 15px!important;
    }

    .containerheadab h2{
        font-size: 20px!important;
    }

    .containerheadab {
        width: 93%;
      }

      .cont-bot-ab h4{
          font-size: 12px!important;
      }

      .abtop4 iframe{
          height: 100%!important;

      }

      .h4little{
          color: var(--color-green2);
      }

      .secc1-e {
        height: 140%;
      }



      /* properties for sale */

      .detailscardcontainer{
        width: 100%!important;
        padding:20px!important;
      }

      .cardpropleft h4{
            font-size: 13px;
      }

      .cardpropleft label,select{
            font-size: 11px!important;
      }

      .forssecc1top h1{
        font-size: 23px!important;
      }


      .titlearea h2{
        font-size: 12px!important;
      }

      .titlearea h5{
        font-size: 12px!important;
    }
    
    .card-properties h4{
        font-size: 10px!important;        
      }
    .iconsarea i{
        font-size: 14px!important;        
      }

      .btn-label{
        padding:2px 12px 2px!important;
      }

      .collapsing{
          display: none;
      }


      .detailsheader  h2{
          font-size: 18px!important;
      }
      .detailsheader  h3{
          font-size: 14px!important;
        }
        
        .details-body p{
            font-size: 12px!important;
        }
        
        .iconsarea h4{
            font-size: 10px!important;
        }
        
        .colonia h4{
            font-size: 12px!important;

        }

        .bottomsectiondetails h4{
            font-size: 12px!important;
        }
        .cont-end-pdf{
            font-size: 12px!important;
        }
        .bottomsectiondetails i{
            font-size: 18px!important;
        }
        
        .propfeatures  h1{
            font-size: 14px!important;
        }
        
        .propfeatures  span{
            font-size: 9px!important;
        }

        .detailsproperticarousel img {
            height: 250px;
            width: auto;
          }




}

.whats{
  position:fixed;
  width:63px;
  height:63px;
  bottom:20px;
  right:25px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  -webkit-box-shadow: 5px 4px 11px -5px rgba(0,0,0,0.76); 
  box-shadow: 5px 4px 11px -5px rgba(0,0,0,0.76);
  z-index:100;
}


.whats:hover{
color: var(--color-white);
}

.btn-label{
    font-weight: 700!important;
    font-size: 14px;
    bottom:35px;
    right:70px;
    color:#FFF;
    z-index:90;
    position:fixed;
    padding:2px 14px 6px;
    margin-right:10px;
    align-self: center;
    user-select:none;
    background-color: var(--color-orange);
    color:white;border-radius: 3px;

}

.my-wa{
	margin-top:17px;
}


/* tours area */

.cardtourheader img{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px ;
    width: 100%;
}

.tourcardcontainer{
    -webkit-box-shadow: 1px 6px 10px -4px rgba(0,0,0,0.61); 
    box-shadow: 1px 6px 10px -4px rgba(0,0,0,0.61);
}


.cardtourbody h3{
    font-weight: 500!important;
    color: var(--color-green1-opaque);
}
.cardtourbody p{
    font-size: 12px;
    color: var(--gray2);
}

/* .iconcontainertour i{
    color: var(--ribboncolor);
} */

.line-right{
    border-right: solid 1px;
    
}

.iconscontainertour{
    color: var(--color-green2);
}


.tourscontainerland {
    background-color: var(--background4);
}

.cardtourbody{
    background-color: var(--color-white);
}

.navigator-gallery-tour img{

}

.containergallerytour{
    width: 100%;
    height: 350px;
}

.navigator-gallery-tour{
    width: 96%!important;
}


.navigator-gallery-tour > .slick-prev::before{
    color: var(--ribboncolor)!important;
}
.navigator-gallery-tour > .slick-next::before{
    color: var(--ribboncolor)!important;
}

.btn-close-tour{
    font-size: 16px;
}

.btn-moreinfotour{
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 800;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--bg-orange);
    border-radius: 12px;
    border-color: var(--graytext1);
}

.btn-close-tour{
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 800;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--color-white2);
    border-radius: 12px;
    border-color: var(--graytext1);
}

#modaldetailsgallery .modal-header h5{
    font-size: 18px;
}
#modaldetailsgallery .modal-body h5{
    font-size: 14px;
}

.rowcardtour h1{
    font-weight: 700;
    color: var(--bg-green1);
    margin-bottom: 15px;
}
.maincontainerdettour{
    height: 100%!important;
}

.secc1-tours{
    height: 82%;
}

.shadowbuttontour{
    -webkit-box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.7); 
    box-shadow: 0px 10px 15px -1px rgba(0,0,0,0.7);
}

.rangepricecontainer input:not([type=radio]){
    width: 100%;
}
.rangepricecontainer i{
    color: var(--bg-green1);
}

/* sold mark on properties */

.boxSoldMark {
    position: relative;
    background: var(--background1);
    margin: 4px;
    display: inline-block;
  }
  .soldMark:before {
    content: "";
    z-index: -1;
    overflow: hidden;
    transform: rotate(-135deg);
    width: 120px;
    display: block; 
    background: #cc2f2f;
    background: linear-gradient(#cc2f2f 0%, #cc2f2f 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 34px;
    right: -20px;
    clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px,  110px 30px);
    height: 14px;
    width: 58px;
  }
  .soldMark:after {
    content: "S O L D";
    z-index: 1;
    overflow: hidden;
    font-size: 9px;
    font-weight: lighter;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    width: 80px;
    display: block; 
    background: #cc2f2f;
    background: linear-gradient(#cc2f2f 0%, #cc2f2f 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 8px; right: -30px;
    clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 1px 20px, 10px 30px,  110px 30px)
  }