:root {
    --dark: #898a80;
    --darkBlue: #1F263C;
   --highlight: #0098ce;
    --green: #64c11b;
    --red: #A83151;
    --grey: #F3F3F2;
    --darkRed: #6A303F;
    --redBright: #C42953;

}



body {  color:#222;  font-weight:400;}
.callout { background:#fff; margin:0 0 20px 0; box-shadow:0 0 20px rgba(0,0,0,0.1); border-radius:10px; padding:20px; }
.shoutout { background:var(--red); color:#fff; }

.featureList { display:flex; flex-wrap:wrap; background:var(--grey); padding:20px; margin-bottom:60px;  }
.featureList li { width:50%;padding:20px;}
.featureList img { width:30px; height:30px; object-fit:contain; }


.wrappedList li { padding:6px;}




@media screen and (min-width:768px) {
.callout {  margin:0 0 40px 0; padding:40px; }

.wrappedList { display:flex; flex-wrap:wrap;  }

.featureList li { width:25%;}
.wrappedList li { width:33.3333%;}

}





/* ========================== REVIEW ======================= */

.review p { font-size:12px; margin-bottom:20px;}
.reviewer {  width:60px; height:60px; margin-right:12px; margin-bottom:20px; border-radius:50%; border:4px solid #ccc; }
blockquote { font-style:italic; margin-bottom:12px;}




/* ========================== FORMS ======================= */



form { max-width:600px; margin:0 auto; }
label { display:block; margin-bottom:3px; font-size:16px; }
input[type="text"], textarea { -webkit-appearance: none; border-radius:5px;  outline: none; width:100%; padding:10px; border:none; background:#efefef; margin-bottom:20px; }
.error { color:red; }

input.btn {  padding:12px 24px; cursor:pointer; border:none; }




/* ===== ALT NEW BURGER ===================== */



.burger-menu { display:none; }

@media screen and (max-width:767px) {

    /* Burger Menu Styles */
    .burger-menu {
        transition:all 0.3s ease;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 30px; /* Adjust height as needed */
        width: 35px; /* Adjust width as needed */
        padding: 0;
        position: fixed; right:20px;
        z-index: 1000; /* Ensure it's above other content */
        margin: 20px; /* Example positioning */
        outline: none; /* Remove outline on focus */
    }
    
    .line {
        display: block;
        width: 100%;
        height: 3px; /* Thickness of the lines */
        background: var(--red); /* Color of the lines */
        border-radius: 5px;
        transition: all 0.3s ease; /* Smooth transition for all properties */
    }
    
    /* Off-screen Menu Styles */
    .off-screen-menu {
        position: fixed;
        top: 0;
        left: -100%; /* Start off-screen to the left */
        width: 100%; /* Or a fixed width like 300px */
        height: 100%;
        background-color: var(--dark); /* Menu background */
        color: #fff;
        transition: left 0.3s ease; /* Smooth transition for sliding */
        z-index: 50; /* Below the burger icon */
    }
    
    .off-screen-menu.active {
        left: 0; /* Slide in when active */
    }
    
    .off-screen-menu ul {
        display:flex; flex-direction:column; align-items:center; justify-content:center;
        list-style: none;
        padding: 0;
        margin: 0; height:100%;
        text-align: center;
    }
     .off-screen-menu ul ul { display:none; }
    
    .off-screen-menu li {
        margin: 10px 0;
    }
    
    .off-screen-menu a {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
        padding: 10px 20px;
        display: block;
        transition: background-color 0.2s ease;
    }
    
    .off-screen-menu a:hover {
        background-color: #555;
        border-radius: 5px;
    }
    
    /* Burger to Cross Animation */
    .burger-menu.open { right:10px; }
    .burger-menu.open .line-1 {
        transform: translateY(9px) rotate(45deg); /* Move down and rotate */
    }
    
    .burger-menu.open .line-2 {
        opacity: 0; /* Fade out middle line */
    }
    
    .burger-menu.open .line-3 {
        transform: translateY(-11.5px) rotate(-45deg); /* Move up and rotate */
    }

}

/* ========== HOME ================ */



.slideshow-container {
    position: relative; /* All slides are absolutely positioned relative to this */
    margin: auto;
    width: 100%;
    height: 100%; /* Crucial: This sets the height of the container */
    overflow: visible;
}

.slide {
    position: absolute; /* Stack all slides on top of each other */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill the container's height */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
}

.slide.active {
    opacity: 1;
    visibility: visible;
}

.slide-text {
    position: absolute;
   top:120px; text-align:center;
    right: 0; padding:20px;
}
.slide-text p {
 opacity:1;
    color: white; font-size:90px; line-height:100%; font-family:'alisha', sans-serif; text-shadow:0 0 10px rgba(0,0,0,0.4); 
}
/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

    
.homeHeading { position:absolute; top:0; width:100%;height:100%;padding:20px; display:flex; align-items:center; justify-content:center;}
.homeHeading div { text-align:center; border-radius:10px;backdrop-filter: blur(10px);max-width:550px;background:rgba(0, 0, 0, 0.1); color:#fff; font-size:28px; padding:40px; }
@media screen and (max-width:500px) {
.homeHeading { top:40px; }
.homeHeading h2 { margin-bottom:20px; }

}

@media screen and (min-width:768px) {
.homeHeading {  text-align:left;bottom:-40px; left:40px;  padding:40px;aspect-ratio:16/9;  }

.slideshow-container { height: 600px;  }

.slide-text {
    top:unset; padding:0;
    bottom: -20px;
    right: 40px; 
}
.slide-text p { font-size:70px; }

}

/* ========================== BACKGROUND HEROS ================== */


.hero { content:"";  width:100%; height:100%; background:var(--dark); position:fixed;left:0; top:0; }
.hero img { mix-blend-mode: multiply; opacity:0.8; width:100%; height:100%; position:fixed; top:0; left:0;  object-fit:cover; display:block; }

   .pageHero { width:100%; aspect-ratio:16 / 10; position:relative; display:flex; align-items:center; justify-content:center; }
    .pageHero img { width:100%; height:100%; object-fit:cover; position:absolute; top:0; left:0;}
    .pageHero h1 { color:#fff;  font-size:60px; position:relative; z-index:1; text-shadow:0 0 20px rgba(0,0,0,0.4); }
    
    .pageHero:after { content:""; width:100%; height:150px; position:absolute; left:0; top:0; 
background: linear-gradient(180deg,rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    }    


@media screen and (min-width:768px) {
    .pageHero h1 {font-size:120px; bottom:-20px; left:40px;  }
   .pageHero {  aspect-ratio:16 / 4; }


}    
/* ========================== HEADER ======================== */



header { z-index:100; height:70px; width:100%; position:fixed; top:0; left:0; background:#fff; }


/* === home page header removal ==== */

header nav li a:hover { color:var(--red); }

.headerLogo { position:fixed; top:0; left:20px;height:80px;display:block; z-index:20; 
    background: #fff;
    width: 200px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);}

.headerLogo img:nth-child(1) { display:block;position:absolute; left:5px; top:3px; width:70px; height:auto;
animation: rotate360 10s linear infinite; /* 10s for slow rotation */ }
.headerLogo img:nth-child(2) { display:block;position:absolute; left:5px; top:3px; width:70px; height:auto; }
.headerLogo img:nth-child(3) { display:block;position:absolute; left:85px; top:12px; width:90px; height:auto; }
.headerLogo img:nth-child(4) { display:block;position:absolute; left:85px; top:46px; width:90px; height:auto; }

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.scrolled header { box-shadow:0 0 20px rgba(0,0,0,0.2); }

@media screen and (min-width:768px) {
    
    header { transition:all 0.3s cubic-bezier(0.86, 0, 0.07, 1);height:120px; background:none; }

    .headerNav { transition:top 0.3s cubic-bezier(0.86, 0, 0.07, 1);z-index:200; position:fixed;top:40px; right:20px; }
   .scrolled .headerNav { top:20px; }
    .headerNav ul { display:flex; flex-direction:row;justify-content:flex-end; }
     .headerNav li { position:relative; }
    .headerNav li a {display:block;cursor:pointer;transition:all 0.3s cubic-bezier(0.86, 0, 0.07, 1); color:#fff; text-decoration:none;font-size:16px; padding:0 12px 30px 12px;}
     .scrolled .headerNav li a {  color:var(--dark); }
      .headerNav li a:hover,
     .headerNav li.active > a { color:var(--highlight); }
   .headerLogo img {  height:auto; }
    header { height:100px;  padding:20px 40px; display:flex; align-items:center; justify-content:space-between;}
      .scrolled header { height:60px;background:#fff;  }
  
  
  /* ==== DROPDOWN ====== */
  .headerNav ul ul { display:flex; flex-direction:column;opacity:0; pointer-events:none; transition:all 0.2s ease; border-radius:12px;box-shadow:0 12px 12px rgba(0,0,0,0.2);   padding:12px; background:#fff; left:-8px; top:42px; position:absolute;}
  
  .headerNav ul ul li a {color:var(--dark); padding:6px 6px; display:block; white-space:nowrap; }
  .headerNav .dropdown:hover ul { opacity:1; pointer-events:all; top:32px;  } 



.headerLogo { left:40px; width: 243px;height:100px;}

.headerLogo img:nth-child(1) { left:10px; top:3px; width:90px; 
animation: rotate360 10s linear infinite; /* 10s for slow rotation */ }
.headerLogo img:nth-child(2) { left:10px; top:3px; width:90px;  }
.headerLogo img:nth-child(3) { left:110px; top:12px; width:110px;  }
.headerLogo img:nth-child(4) { left:110px; top:56px; width:110px;  }

}

@media screen and (min-width:1024px) {
   .headerLogo img { width:180px; height:auto; }


}

@media screen and (min-width:1280px) {
    
}


/* ========================== STRUCTURE ======================== */

.sticky-content {
  position: sticky;
  top: 100px; /* The distance from the top of the viewport when it becomes sticky */
}



main { position:relative;  padding-top:40px; }
.content { max-width:1400px; margin:0 auto; padding:40px 20px;  }
.btn { text-align:center;cursor:pointer; background:var(--red); font-size:16px;  border:1px solid var(--red); color:#fff; display:inline-block; padding:6px 24px; border-radius:40px; text-decoration:none; }
.btn:hover { background:var(--redBright);  }
.callout .btn { width:100%; }
.editableContent ul { list-style:disc; padding-left:16px; margin-bottom:24px;  }
.editableContent ol { list-style:numeral; padding-left:16px; margin-bottom:24px;  }
.editableContent li { margin-bottom:12px; }
.editableContent img { width:100%; height:auto; margin:20px 0; }
.avatar { border-radius:50%; border:12px solid #efefef; margin:20px auto; width:120px;aspect-ratio:1 / 1;  }

.btnSecondary { background:#fff; color:var(--red); border:1px solid var(--red); display:inline-block; padding:12px 24px; border-radius:40px; text-decoration:none; }
.btnSecondary:hover { color:#fff;  }

.backgroundBlue { background:var(--darkBlue); color:#fff; }
.backgroundGrey {background:var(--grey); }
.backgroundDarkRed {background:var(--red);color:#fff; }

@media screen and (min-width:768px) {
main {  padding-top:40px; }

}

@media screen and (min-width:1024px) {
    .content { padding:40px;}

}
@media screen and (min-width:1280px) {
    
}
/* ======== BLOG ================ */

  .blogMenu li { margin-bottom:12px; }
    .blogMenu li.active { opacity:0.5; pointer-events:none;  }

/* =================== BREADCRUMBS =========================== */


.B_crumbBox { display:flex; font-size:14px; margin-bottom:30px;  }
.B_crumbBox li  { padding:0 2px; }
.B_crumbBox a { color:inherit; }




/* ========================== FONTS ======================== */

h1 { font-size:46px;line-height:110%; color:var(--dark); }
.slideshow-container h1 { color:#fff;  padding:20px; }
h1 a { color:inherit; }

h2 { font-size:32px;  line-height:120%; margin:0 0 40px 0; }
h2 a { color:inherit; }

h3 { font-size:18px; font-weight:700; margin:40px 0 12px 0 ; color:var(--highlight);  }
h3:first-child { margin-top:0; }

p { font-size:16px; margin-bottom:12px; line-height:140%; }
p a, .editableContent li a { color:inherit; }

sup {
  vertical-align: 0.3em;
  font-size: 12px;
}

@media screen and (min-width:768px) {

h1 { font-size:48px; }


}



@media screen and (min-width:1024px) {
    
}
@media screen and (min-width:1280px) {
    
}





/* ========================== cards ======================== */



.cards { text-align:left; display:grid; gap:20px;grid-template-columns: 1fr; padding-bottom:40px; }
.cards li { }
.cards li a { display:flex; flex-direction:column; align-items:flex-start; text-align:left; height:100%;position:relative; bottom:0; transition:all 0.3s ease;text-decoration:none; padding:0; border-radius:12px; color:inherit; background:#fff; box-shadow:0 0 20px rgba(0,0,0,0.1); }
.cards li a div { padding:20px; width:100%; }
.cards li a h3 { color:#222; font-size:18px; margin:0; font-weight:700; }
.cards li a p { margin:0 0 20px 0; }
.cards li a img { width:100%; height:160px; object-fit:cover; border-radius: 12px 12px 0 0;}

.cards li a:hover { box-shadow:0 5px 20px rgba(0,0,0,0.2); bottom:4px;  }
.cards li a .btn { margin-top:auto; }



@media screen and (min-width:501px) {
    .cards { grid-template-columns: 1fr 1fr}

}


@media screen and (min-width:768px) {
    .cards { grid-template-columns: 1fr 1fr 1fr;}

}
@media screen and (min-width:1024px) {
    .cards { grid-template-columns: 1fr 1fr 1fr 1fr; }

    
}



/* === holiday cards ==== */

    .cards li a .smallPrint,
    .smallPrint { font-size:12px; color:var(--dark); margin:0 0 6px; }
    .cards li a .stars { width:70px; height:auto; margin-bottom:6px; }
    
    .cards li a div.tags,
    .tags { margin-bottom:12px; padding:0 0 40px 0; }
    
    .tags span { font-size:10px; color:var(--dark); border:1px solid var(--dark); display:inline-block; margin-bottom:4px; border-radius:30px; padding:4px 14px; }
    
    .cards li a .pricePanel { padding:12px 0 0 0; width:100%;border-top:1px solid var(--dark); display:flex; align-items:flex-end; justify-content:space-between; }
    .cards li a .pricePanel p { white-space:nowrap; margin:0;}
    .cards li a .price { padding:0; display:flex;  text-align:right; align-items:flex-end;justify-content: flex-end;}
    .cards li a .price p { font-size:11px;margin:0 3px 3px 0 ; }
    .cards li a .featureIcons { display:flex; color:var(--dark);align-items:center; justify-content:flex-start; padding:0 0 12px; }
    .cards li a .featureIcons li { display:flex; align-items:center; margin-right:12px!important; }
    .cards li a .featureIcons li img {width:16px; height:16px; margin-right:4px; object-fit:contain; }

    .cards li.homeOwnerCard a { background:var(--highlight); color:#fff; }
    .cards li.homeOwnerCard .btn { background:#fff; color:#222; border:1px solid #fff; }
    .cards li.homeOwnerCard a h3 { color:#fff; margin-bottom:12px; }
    
@media screen and (min-width:768px) {
 .tags span { font-size:13px; padding:4px 15px; }
}

/* ==== top ten ====== */

ol.topTen { list-style:none; margin-bottom:60px;}
.topTen span { font-size:70px; padding-right:30px; }
.topTen li { max-width:800px; margin:0 auto; display:block; background:#efefef; padding:20px; }
.topTen li:nth-child(2) { background:var(--darkBlue); color:#fff; }
.topTen li:nth-child(4) { background:var(--darkBlue); color:#fff; max-width:900px;}
.topTen li:nth-child(5) { background:var(--highlight); color:#fff; max-width:1100px;}
.topTen li:nth-child(5) h3 { color:#fff; }
.topTen li:nth-child(7) { background:var(--red); color:#fff; }
.topTen li:nth-child(7) h3 { color:#fff; }
.topTen li:nth-child(8) { background:var(--darkBlue); color:#fff; max-width:900px;}
.topTen li:nth-child(10) { background:var(--highlight); color:#fff;}
.topTen li:nth-child(10) h3 { color:#fff; }

.topTen li.topTenWide { max-width:1000px;  }

.topTen li > div { display:flex; flex-direction:column;align-items:center; }
.topTen li img { order:2;width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; margin-bottom:20px; }
.topTen li > div div { order:3;text-align:center; }

@media screen and (min-width:500px) {
.topTen li { padding:40px; }

.topTen li > div { flex-direction:row; }
.topTen li > div div { order:2;padding-right:40px; text-align:left; }
.topTen li img {order:3; width:50%; aspect-ratio:4/3; margin-bottom:0;  }
    
}
/* ========================== FOOTER ======================== */

.footerWave { width:100%; height:200px; display:block; position:relative; bottom:-20px; }

footer { box-shadow: 0 0 20px rgba(0, 0, 0, 1); background:var(--dark); color:#fff; text-align:center; position:relative; padding:40px; }
footer img { max-width:190px; margin-bottom:30px; }
footer ul { display:flex; align-items:center; justify-content:center; }
footer li { padding:0 10px; }
footer a { color:#fff; padding:10px 0; text-decoration:none;}
footer li a:hover { border-bottom:1px solid #fff; }