@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&display=swap');
:root{--system-font:"Jost", sans-serif;--primary:#A99681;--secondary:#373E51;--primary-lighter:#E2C5A6;--shadow:rgba(0,0,0,0.2) 0 0 10px;--black:#000;--white:#fff;--big-shadow:#C9D4D9 0 0 90px;--grey:#A1A1A1;--silver:#F5F5F5;}

iframe {vertical-align: middle;}
html {overflow-x:hidden;}
body,html{font-family:var(--system-font);-webkit-font-smoothing:antialiased;letter-spacing: 1px;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height: 100%;}
.small-shadow {box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.1);}
.primary-text {color: var(--primary);}
.white-text, .light-text {color: var(--white);}
.primary {background-color: var(--primary);}
.secondary {background-color: var(--secondary);}
.white {background-color: var(--white);}
.black {background-color: var(--black);}
.black-text {color: var(--black);}
.silver {background-color: var(--silver);}
.mh100p {min-height: 100%;}
.mask {background-color: var(--black); opacity: 0.6;position: absolute;top:0;left:0;width: 100%; height: 100%;}
body{font-family:var(--system-font);font-size:16px;font-weight:500;-webkit-animation:fadeinout .3s ease-in 1 forwards;animation:fadeinout .3s ease-in 1 forwards;}
@-webkit-keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}
@keyframes fadeinout{0%{opacity:0}
100%{opacity:1}
;}
.cormorant-font{font-family: "Cormorant Infant", serif;}
.flex-col{float:none !important;flex-direction:row;}
.flex-row{display:flex;}
.flex1 {flex: 1;}
.v-center{top:50%;position:relative;transform:translateY(-50%);}
.vcenter-items {align-items: center;}
.lngbar{position:absolute;top:15px;right:60px;z-index:30;-o-transition:all .2s linear;-moz-transition:all .2s linear;-webkit-transition:all .2s linear;transition:all .2s linear;}
.lngbar .lng{width:30px;height:30px;text-align:center;line-height:30px;color:var(--white);font-weight:600;background-color:var(--secondary); font-size: 0.9em;}
.lngbar ul{list-style:none;position:absolute;top:30px;left:0;background-color:var(--silver);width:30px;text-align:center;opacity:0;height:0px;overflow:hidden;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul.open{opacity:100;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;height:auto;}
.lngbar ul li{color:#000;cursor:pointer;height:30px;line-height:30px;-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover{color:var(--black);background-color:var(--primary);-o-transition:all .2s ease;-moz-transition:all .2s ease;-webkit-transition:all .2s ease;}
.lngbar ul li:hover a{color:var(--white);}
.lngbar ul li a{text-decoration:none;color:#000;font-size:0.8em;font-weight:400;}
.lngbar .select{border-color:var(--primary) transparent;border-style:solid solid none;border-width:5px 5px medium;height:5px;right:-12px;position:absolute;top:12px;width:0;text-decoration:none;color:var(--black);}
.editable {display: contents;}
.cmspage .wraper {margin: auto;}
.cmspage p {margin-bottom: 10px;}
.cmspage ul, .cmspage ol {margin-bottom: 10px; padding-left: 20px; line-height: 1.5;}
.cmspage h2 {margin-bottom: 30px;}
.cmspage h3 {margin-bottom: 15px; font-size: 1.4em; font-weight: 700;}
.cmspage table {border: solid 1px var(--silver); border-collapse: collapse; width: 100%; margin-bottom: 20px;}
.cmspage table  td {padding: 10px; border: solid 1px var(--silver);}

.slick-dotted .slick-dots {position: absolute;bottom: 0;}
.slick-dotted .slick-dots li button::before{background-color: var(--white);color: white; width: 15px;height: 15px;opacity: 1;}
.slick-dotted .slick-dots li.slick-active button::before{background-color: var(--primary);color: var(--primary);}


header .menu-list ul {display: flex;align-items: center;justify-content: space-between ;width: 100%;gap:20px}
header .menu-list >nav > ul > li:hover{font-weight: bold;position: relative}
header .menu-list > nav > ul > li > a:hover:after{  content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 40px;
    border-bottom: 3px solid var(--accent);
    margin-top: 5px;}
header .menu-list ul li ul {display: none;font-size: 15px}
header .menu-list ul li:hover ul {display: flex;padding-right: 100%;padding-top: 20px; width: fit-content;}
header .menu-list ul li:hover  ul {position: absolute;display: flex;padding:20px;width: fit-content; flex-direction: column; align-items: start;width: max-content;gap: 10px;font-weight: 600;border-radius: 5px;background-color: var(--secondary)}
header .menu-list ul ul li:hover {color: var(--primary-lighter)}
header .menu-list ul ul li {color: var(--primary)}

footer .menu-list ul ul{display: none;}
footer .menu-list ul {display: flex;align-items: center;justify-content: space-between ;font-size: 16px;width: 100%;gap:20px}


.mobile-menu {display: none;}

@media (max-width:1024px){



     header nav, header .nav-tools .social-media-links {
        display: none;
    }

    .menu-call {
        width: 30px;
        position: relative;
        z-index: 101;
        cursor: pointer;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .menu-call span {
        width: 100%;
        height: 3px;
        background-color: var(--primary);
        top: 0;
        right: 0;
        display: block;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call span:before {
        content: '';
        height: 3px;
        width: 100%;
        margin-bottom: 5px;
        display: block;
        background-color: var(--black);
        position: absolute;
        top: 0;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call span:after {
        content: '';
        height: 3px;
        width: 100%;
        margin-top: 5px;
        display: block;
        background-color: var(--black);
        position: absolute;
        bottom: 0;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call.open span {
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        width: 0;
    }

    .menu-call.open span:before, .menu-call.open span:after {
        content: '';
        height: 2px;
        width: 100%;
        display: block;
        position: absolute;
        top: 8px;
        -webkit-transform: rotate(45deg);
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear
    }

    .menu-call.open span:before {
        transform: rotate(45deg);
    }

    .menu-call.open span:after {
        transform: rotate(-45deg);
        margin-top: 0px;
    }

    .menu-call span:before, .menu-call span:after {
        background-color: var(--primary);
    }

    .menu-call.open span:before, .menu-call.open span:after {
        background-color: var(--primary-lighter);
    }

    
    @media (max-width: 1024px) {

        .wraper {min-width: auto;}

    .mobile-menu {
        display: flex;
        position: fixed;
        width: 100%;
        height: 100%;
        
        /* New properties for transparency and blur: */
        background-color: var(--secondary); /* Adjust the opacity (0.7 here) */
        backdrop-filter: blur(100px); /* This adds the blur effect */
        
        z-index: 99;
        transform: perspective(50em) rotateX(-90deg);
        transform-origin: 50% 0;
        -webkit-transition: all .8s ease;
        transition: all .8s ease;
    }
}

    .mobile-menu .logo {
        max-width: 70%;
        float: left;
        margin-top: -8px;
    }

    .mobile-menu * {
        opacity: 0;
        -o-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -webkit-transition: all .8s ease;
        transition: all .8s ease
    }

    .mobile-menu.open {
        left: 0;
        right: 0;
        transform: perspective(50em) rotatey(0deg);
        height: fit-content;
        min-height: -webkit-fill-available;
        -o-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -webkit-transition: all .8s ease;
        transition: all .8s ease
    }

    .mobile-menu.open * {
        opacity: 100;
        -o-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -webkit-transition: all .8s ease;
        transition: all .8s ease
    }

    .mobile-menu ul {
        list-style: none;
        display: flex;
        flex-direction: column;
    }

    .mobile-menu ul a {
        z-index: 99;
        font-size: 1em;
        line-height: 30px;
        position: relative;
        display: block;
        background: var(--white);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 500;
        text-decoration: none;
        text-align: center
    }

    .mobile-menu ul a:after {
        content: '';
        height: 1px;
        width: 0;
        background-color: var(--white);
        bottom: 0;
        left: 0;
        position: absolute;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear
    }

    .mobile-menu ul a:hover {
        color: var(--orange);
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }

    .mobile-menu ul ul li a::after {
        position: absolute;
        height: 2px;
        width: 0%;
        margin: auto;
        content: '';
        display: block;
        background-color: var(--darkYellow);
        left: 1%;
        right: 1%;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }

    .mobile-menu ul ul li a:hover::after, .mobile-menu ul ul li a:active::after {
        width: 50%;
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }

    .mobile-menu ul ul a:hover {
        font-weight: bold;
    }


    .mobile-menu > nav > ul > li > a {
        font-weight: bold;
        color: var(--primary);
        font-size: 18px;
        margin-bottom: 10px;
        background-color: var(--primary-lighter);
    }


    .mobile-menu > nav > ul > li {
        margin-bottom: 20px;
    }
footer .menu-list ul {flex-wrap: wrap; justify-content: center;}
}


/* 1. The Container */
.responsive-row {
  display: flex;
  flex-wrap: wrap; /* Allows items to drop to the next line */
  align-items: stretch; 
  gap: 30px; 
  width: 100%;
  box-sizing: border-box;
  
}


/* 2. Base Column Logic */
.responsive-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  
  /* The Magic: 
     - flex-grow: 1 (fills the remaining row space)
     - flex-shrink: 1 (shrinks if the screen is tiny)
     - flex-basis: 280px (The "Break Point": below this width, it stacks)
  */
  flex: 1 1 280px; 
  margin-left: 0;
}

/* 3. Specific Width Overrides (Desktop/Tablet) 
   We wrap these in a media query so they only apply 
   when there is actually enough room to show them side-by-side.
*/
@media (min-width: 768px) {
  .col-15 { flex: 0 0 calc(15% - 50px); }
  .col-20 { flex: 0 0 calc(20% - 50px);  }
  .col-25 { flex: 0 0 calc(25% - 50px); max-width: 25%; }
  .col-33 { flex: 0 0 calc(33.33% - 50px);}
  .col-50 { flex: 0 0 calc(50% - 50px);  }
}

/* 4. Mobile Reset
   On very small screens, force every column to 100% 
*/
@media (max-width: 480px) {
  .responsive-row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}