@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --white:#fff;
  --muted:rgba(255,255,255,.72);
  --glass:rgba(11,24,38,.34);
  --glass-strong:rgba(9,20,33,.62);
  --line:rgba(255,255,255,.18);
  --accent:#e72d73;
  --accent-2:#1d8fd1;
  --shadow:0 25px 80px rgba(0,0,0,.35);
}

:root {
    --content-right: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: "Montserrat", sans-serif;
  background:#07131f;
  color:#fff;
  overflow-x:hidden;
}
button,a{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}

.app{
  min-height:100vh;
  position:relative;
  background:#07131f;
}

/* HERO */
/* =========================================================
   HERO
   ========================================================= */

.hero {
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 650px;

    overflow: hidden;
    isolation: isolate;

    display: flex;
    align-items: flex-end;

    background: #07131f;
}


/* HERO IMAGE */

.hero-bg {
    position: absolute;
    inset: 0;

    z-index: -3;

    background-image: url("../assets/images/hero/trivandrum.jpg");
    background-size: cover;
    background-position: center center;

    transform: scale(1.02);

    transition:
        background-image 1s ease,
        transform 8s ease;
}


/* DARK CINEMATIC OVERLAY */

.hero::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(3, 12, 21, .35) 0%,
            rgba(3, 12, 21, .12) 45%,
            rgba(3, 12, 21, .02) 100%
        ),

        linear-gradient(
            0deg,
            rgba(3, 12, 21, .38) 0%,
            rgba(3, 12, 21, .05) 50%,
            rgba(3, 12, 21, .02) 100%
        );
}


/* HERO CONTENT */

.hero-content {
    position: relative;
    z-index: 5;
    padding-left: 20px;
    width: min(1280px, calc(100% - 64px));

    margin: 0 auto;

    padding-bottom: 12vh;
}


.hero .eyebrow {
    margin-bottom: 15px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: .28em;
    text-transform: uppercase;

    color: rgba(255,255,255,.78);
}


.hero h1 {
    max-width: 760px;

    margin: 0;

    font-family: "Manrope", sans-serif;

    font-size: clamp(3rem, 4.8vw, 5.2rem);

    line-height: .98;

    letter-spacing: -.055em;

    font-weight: 750;

    color: #fff;
}

.hero-copy {
    max-width: 480px;

    margin-top: 24px;

    font-size: clamp(1rem, 1.3vw, 1.15rem);

    line-height: 1.6;

    color: rgba(255,255,255,.78);
}


/* EXPLORE BUTTON */

.explore-btn {
    margin-top: 30px;

    display: inline-flex;
    align-items: center;
    gap: 16px;

    padding: 13px 15px 13px 23px;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;

    background:
        linear-gradient(
            110deg,
            #e72d73,
            #d9286d 45%,
            #238dd0
        );

    color: #fff;

    font-size: 15px;
    font-weight: 600;

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.explore-btn span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255,255,255,.18);

    font-size: 17px;

    transition: transform .35s ease;
}

.explore-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 45px rgba(0,0,0,.32);
}

.explore-btn:hover span {
    transform: translateX(3px);
}


/* =========================================================
   DESTINATION STACK — HERO
   ========================================================= */

.hero-stack {
    position: absolute;

    right: var(--content-right);

    top:50%;

    width: 350px;

    display: flex;
    flex-direction: column;
    gap: 10px;

    transform: translateY(-38%);

    z-index: 10;
}


/* CARD */

.stack-card {
    position: relative;

    width: 100%;
    height: 150px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.28);
    border-radius: 22px;

    background: #162536;

    box-shadow:
        0 20px 45px rgba(0,0,0,.30),
        0 5px 15px rgba(0,0,0,.18);

    transition:
        transform .6s cubic-bezier(.2,.8,.2,1),
        opacity .6s ease;
}


/* IMAGE */

.stack-card img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform .7s ease;
}


/* CINEMATIC CARD OVERLAY */

.stack-card::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,12,20,.72) 0%,
            rgba(4,12,20,.25) 55%,
            rgba(4,12,20,.08) 100%
        );

    pointer-events: none;
}


/* STACK DEPTH */

.stack-card:nth-child(1) {
    transform: translateX(0);
    z-index: 3;
}

.stack-card:nth-child(2) {
    transform: translateX(0);
    z-index: 2;
}

.stack-card:nth-child(3) {
    transform: translateX(0);
    z-index: 1;
}

.stack-card:nth-child(1),
.stack-card:nth-child(2),
.stack-card:nth-child(3) {
    opacity: 1;
}


/* CARD TEXT */

.stack-info {
    position: absolute;

    left: 26px;
    bottom: 24px;

    z-index: 3;
}

.stack-info small {
    display: block;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .20em;

    color: rgba(255,255,255,.78);
}

.stack-info strong {
    display: block;

    max-width: 280px;

    margin-top: 7px;

    font-family: "Manrope", sans-serif;

    font-size: 21px;
    line-height: 1.15;
    font-weight: 700;

    color: #fff;
}
/* HERO SLIDER DOTS */

.hero-dots {
    position: absolute;

    left: 50%;
    bottom: 4.5vh;

    z-index: 7;

    transform: translateX(-50%);

    display: flex;
    gap: 8px;
}


.hero-dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.38);

    transition:
        width .3s ease,
        background .3s ease;
}


.hero-dots button.active {
    width: 24px;

    border-radius: 10px;

    background: #fff;
}

/* =========================================================
   PORTCITY HEADER
   Logo sits directly on hero.
   Only navigation has the glass effect.
   ========================================================= */

.nav-wrap {
    position: fixed;
    top: 22px;
    left: 0;
    right: 0;
    z-index: 50;
    pointer-events: none;
}

/* LOGO — completely independent from the glass menu */

.brand {
    position: absolute;
    left: 34px;
    top: 2px;

    display: flex;
    align-items: center;

    pointer-events: auto;
    z-index: 2;
}

.brand img {
    width: 250px;
    height: auto;
    display: block;
    object-fit: contain;
}


/* GLASS NAVIGATION */

.nav {
    width: fit-content;
    min-height: 60px;

    margin-left: auto;
    margin-right: var(--content-right);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 5px 8px;

    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 20px;

    /* LIQUID GLASS */
    background: rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);

    box-shadow:
        inset 0 1px 1px rgba(255,255,255,.22),
        inset 0 -1px 1px rgba(0,0,0,.08),
        0 8px 30px rgba(0,0,0,.12);

    pointer-events: auto;

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.nav:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.24);
}

/* MENU ITEMS */

.menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.menu button {
    position: relative;

    border: 0;
    background: transparent;

    color: rgba(255,255,255,.95);

    padding: 10px 17px;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    font-family: "DM Sans", sans-serif;
    font-size: 15.5px;
    font-weight: 500;

    white-space: nowrap;

    transition:
        background .3s ease,
        transform .3s ease,
        color .3s ease;
}

.menu button svg {
    width: 23px;
    height: 23px;

    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform .3s ease;
}

.menu button:hover {
    transform: translateY(-1px);
}

.menu button:hover svg {
    transform: scale(1.08);
}



/* HAMBURGER */

.menu-toggle {
    display: none;
    place-items: center;

    border: 0;
    background: transparent;

    color: #fff;

    width: 48px;
    height: 48px;

    margin-left: 5px;

    border-radius: 14px;

    transition: background .3s ease;
}

.menu-toggle:hover {
    background: rgba(255,255,255,.10);
}

.menu-toggle svg {
    stroke: currentColor;
    stroke-linecap: round;
}


/* PANELS / PAGE VIEWS */
.view{
  position:fixed;inset:0;z-index:40;
  background:
    radial-gradient(circle at 80% 10%,rgba(29,143,209,.12),transparent 30%),
    radial-gradient(circle at 10% 80%,rgba(231,45,115,.12),transparent 30%),
    #07131f;
  overflow:auto;
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1),visibility .55s;
}
.view.open{opacity:1;visibility:visible;transform:scale(1)}
.view-inner{width:min(1280px,calc(100% - 48px));margin:auto;padding:125px 0 70px}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:38px}
.view-head h2{
  font-family:"Montserrat",sans-serif;font-size:clamp(2.5rem,5vw,5rem);line-height:.95;letter-spacing:-.055em;
}
.view-head p{color:var(--muted);max-width:440px;line-height:1.6}
.close-view{
  position:fixed;right:26px;top:95px;z-index:45;
  border:1px solid var(--line);background:#ffffff0d;color:#fff;
  width:46px;height:46px;border-radius:50%;font-size:20px;
}

/* TOURS */
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.tour-card{
  min-height:390px;border-radius:24px;overflow:hidden;position:relative;
  border:1px solid var(--line);background:#102131;
  box-shadow:var(--shadow);cursor:pointer;
  transition:.45s cubic-bezier(.2,.8,.2,1);
}
.tour-card:hover{transform:translateY(-8px);border-color:#ffffff40}
.tour-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.7s}
.tour-card:hover img{transform:scale(1.06)}
.tour-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,10,16,.92),rgba(3,10,16,.04) 70%)}
.tour-meta{position:absolute;z-index:2;left:22px;right:22px;bottom:20px}
.tour-meta small{color:#fff9;letter-spacing:.14em;text-transform:uppercase;font-size:.65rem}
.tour-meta h3{font-family:"Montserrat",sans-serif;font-size:1.4rem;margin:7px 0}
.tour-meta p{color:#fff9;font-size:.9rem;line-height:1.4}
.tour-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.price{font-weight:700}
.arrow{
  width:38px;height:38px;border:1px solid #fff4;border-radius:50%;display:grid;place-items:center;
  background:#ffffff0c
}

/* DETAIL */
.detail{
  display:grid;grid-template-columns:1.15fr .85fr;gap:34px;
}
.detail-image{height:560px;border-radius:28px;overflow:hidden;border:1px solid var(--line)}
.detail-image img{width:100%;height:100%;object-fit:cover}
.detail-content{padding:15px 0}
.detail-content .eyebrow{margin-bottom:12px}
.detail-content h2{font-family:"Montserrat",sans-serif;font-size:clamp(2.4rem,4vw,4.5rem);line-height:.98;letter-spacing:-.05em}
.detail-content p{color:var(--muted);line-height:1.75;margin-top:22px}
.info-row{display:flex;gap:10px;flex-wrap:wrap;margin:25px 0}
.pill{border:1px solid var(--line);background:#ffffff08;padding:9px 13px;border-radius:999px;color:#fff9;font-size:.85rem}
.whatsapp{
  display:inline-flex;align-items:center;gap:10px;margin-top:12px;
  padding:14px 20px;border-radius:14px;background:#25d366;color:#06150b;font-weight:700;
}

/* TESTIMONIALS */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial-card{
  border:1px solid var(--line);background:linear-gradient(145deg,#ffffff0b,#ffffff04);
  border-radius:26px;padding:32px;min-height:320px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.quote{font-family:Georgia,serif;font-size:5rem;line-height:.7;color:#ffffff35;margin-bottom:24px}
.testimonial-card p{font-family:"Montserrat",sans-serif;font-size:1.15rem;line-height:1.65;color:#fffde;flex:1}
.testimonial-person{border-top:1px solid var(--line);padding-top:18px;margin-top:25px}
.testimonial-person strong{display:block;font-size:.95rem}
.testimonial-person span{display:block;color:#fff8;font-size:.78rem;margin-top:4px}

/* =========================================================
   TESTIMONIALS
   ========================================================= */

.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.testimonial-card{
  position:relative;
  min-height:330px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#ffffff07;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}

.quote-mark{
  font-family:Georgia,serif;
  font-size:5rem;
  line-height:.7;
  color:var(--accent);
  opacity:.85;
}

.testimonial-text{
  margin:22px 0 30px;
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.8;
}

.testimonial-person{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:20px;
  border-top:1px solid var(--line);
}

.testimonial-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(
    135deg,
    var(--accent),
    var(--accent-2)
  );
  color:#fff;
  font-weight:700;
}

.testimonial-person strong{
  display:block;
  font-weight:700;
}

.testimonial-person small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:.78rem;
}

/* ABOUT / CONTACT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.glass-card{
  border:1px solid var(--line);background:#ffffff07;border-radius:26px;padding:34px;
  box-shadow:var(--shadow);
}
.glass-card h3{font-family:"Montserrat",sans-serif;font-size:1.7rem;margin-bottom:14px}
.glass-card p{color:var(--muted);line-height:1.8}
.contact-list{margin-top:26px;display:grid;gap:13px}
.contact-item{padding:15px;border:1px solid var(--line);border-radius:15px;background:#ffffff06}
.contact-item small{display:block;color:#fff7;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.contact-item strong{font-weight:600}
.form{display:grid;gap:13px}
.form input,.form textarea{
  width:100%;border:1px solid var(--line);background:#ffffff08;color:#fff;
  border-radius:14px;padding:14px 15px;outline:0;
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:#fff6}
.submit{border:0;padding:14px;border-radius:14px;background:linear-gradient(100deg,var(--accent),var(--accent-2));color:#fff;font-weight:700}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;top:78px;left:16px;right:16px;z-index:49;
  padding:12px;border:1px solid var(--line);border-radius:22px;
  background:rgba(7,19,31,.8);backdrop-filter:blur(25px);
  transform:translateY(-12px);opacity:0;visibility:hidden;transition:.35s;
}
.mobile-menu.open{transform:none;opacity:1;visibility:visible}
.mobile-menu button{width:100%;justify-content:flex-start}

/* SHATTER-LIKE TRANSITION */
.shatter{
  position:fixed;inset:0;z-index:100;pointer-events:none;opacity:0;
  background:linear-gradient(120deg,#07131f,#1a2430);
}
.shatter.active{animation:shatter .72s ease forwards}
@keyframes shatter{
  0%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  25%{opacity:.9;clip-path:polygon(0 0,35% 8%,70% 0,100% 15%,92% 45%,100% 100%,62% 91%,30% 100%,0 82%,8% 50%)}
  60%{opacity:.9;clip-path:polygon(0 10%,25% 0,55% 12%,100% 0,88% 35%,100% 65%,72% 100%,38% 86%,0 100%,12% 55%)}
  100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}

/* RESPONSIVE */
@media(max-width:900px){
  @media(max-width:900px){

    .nav-wrap {
        top: 14px;
    }

    .brand {
        left: 20px;
        top: 5px;
    }

    .brand img {
        width: 210px;
    }

    .nav {
        width: auto;
        min-height: 56px;

        margin-right: 18px;
        margin-left: auto;

        padding: 5px;

        border-radius: 18px;
    }

    .menu {
        display: none;
    }

    .menu-toggle {
        display: grid;
    }

    /* rest of your existing 900px CSS continues below */
  .brand{min-width:0}.brand img{width:155px}
  .hero-content{width:min(100% - 32px,700px);padding-bottom:7vh}
  .hero h1{max-width:600px}
  .hero-stack{right:16px;bottom:17vh;width:240px}
  .stack-card{height:92px}
  .stack-card:nth-child(2){transform:translateX(18px) scale(.96)}
  .stack-card:nth-child(3){transform:translateX(36px) scale(.92)}
  .tour-grid{grid-template-columns:repeat(2,1fr)}
  .detail,.split{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr 1fr}
  .detail-image{height:420px}
}
@media(max-width:600px){
    @media(max-width:600px){
    .nav {
    min-height: 50px;
    margin-right: 10px;
    padding: 4px 5px;
    border-radius: 16px;
}
    .nav-wrap {
        top: 10px;
    }

    .brand {
        left: 14px;
        top: 4px;
    }

    .brand img {
        width: 170px;
    }

    .nav {
        margin-right: 10px;
        min-height: 50px;
        border-radius: 16px;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    /* rest of your existing 600px CSS continues below */
  .nav-wrap{top:10px}.nav{width:calc(100% - 20px);padding:7px 8px 7px 13px;border-radius:18px}
  .brand img{width:145px}
  .hero-bg{background-position:62% center}
  .hero:after{background:linear-gradient(0deg,rgba(3,11,20,.85),rgba(3,11,20,.22) 68%,rgba(3,11,20,.18))}
  .hero-content{padding-bottom:7.5vh}
  .hero h1{font-size:clamp(3rem,14vw,4.7rem)}
  .hero-copy{max-width:330px;font-size:.95rem}
  .hero-stack{width:145px;right:10px;bottom:19vh;gap:8px}
  .stack-card{height:70px;border-radius:14px}
  .stack-card:nth-child(2){transform:translateX(10px) scale(.94)}
  .stack-card:nth-child(3){transform:translateX(20px) scale(.88)}
  .stack-info{left:11px;bottom:9px}.stack-info strong{font-size:.72rem}
  .stack-info small{font-size:.48rem}
  .hero-dots{bottom:2.5vh}
  .view-inner{width:calc(100% - 28px);padding:105px 0 45px}
  .view-head{display:block;margin-bottom:25px}
  .view-head h2{font-size:3rem;margin-bottom:14px}
  .close-view{right:16px;top:76px}
  .tour-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
  .tour-card{min-height:350px}
  .detail-image{height:330px;border-radius:20px}
  .glass-card{padding:23px}
}
    
    /* =========================================================
   MOBILE MENU — FINAL OVERRIDE
   ========================================================= */

.mobile-menu {
    position: fixed;

    top: 72px;
    left: 14px;
    right: 14px;

    z-index: 49;

    padding: 8px;

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;

    background: rgba(8, 20, 32, .78);

    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        transform .35s ease,
        visibility .3s ease;
}

.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.mobile-menu button {
    width: 100%;

    border: 0;
    border-radius: 12px;

    background: transparent !important;

    color: rgba(255,255,255,.95) !important;

    padding: 12px 15px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 12px;

    font-family: "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;

    text-align: left;

    transition:
        background .25s ease,
        transform .25s ease;
}

.mobile-menu button:hover,
.mobile-menu button:active {
    background: rgba(255,255,255,.10) !important;
}

.mobile-menu button span {
    width: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: rgba(255,255,255,.8);
}
  
/* =========================================================
   MOBILE HEADER — FINAL
   ========================================================= */

@media (max-width: 768px){

  /* Remove glass/background from the entire navigation */
  nav{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    position:absolute !important;
    top:16px !important;
    left:18px !important;
    right:18px !important;

    width:auto !important;
    height:auto !important;

    padding:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
  }

  /* Logo stays independently on the LEFT */
  nav .logo,
  nav .brand{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;

    position:relative;
    z-index:51;
  }

  /* Hide desktop navigation */
  nav .menu{
    display:none !important;
  }

  /* Glass belongs ONLY to hamburger */
  .menu-toggle{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:52px !important;
    height:44px !important;

    padding:0 !important;

    margin:0 !important;

    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:16px !important;

    background:rgba(20,35,35,.48) !important;

    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;

    color:#fff !important;

    position:relative;
    z-index:52;
  }
}
    
/* =========================================================
   MOBILE HERO CARDS — LARGER
   ========================================================= */

@media (max-width: 768px){

  .hero-stack{
    width:160px !important;
    right:12px !important;
    top:36% !important;

    display:flex !important;
    flex-direction:column !important;
    gap:9px !important;

    transform:none !important;
  }

  .hero-stack .stack-card{
    width:160px !important;
    height:82px !important;
    min-height:82px !important;

    margin:0 !important;
    transform:none !important;

    border-radius:15px !important;
  }

  .hero-stack .stack-card:nth-child(1),
  .hero-stack .stack-card:nth-child(2),
  .hero-stack .stack-card:nth-child(3){
    transform:none !important;
    margin:0 !important;
  }

  .hero-stack .stack-info{
    left:11px !important;
    right:9px !important;
    bottom:9px !important;
  }

  .hero-stack .stack-info small{
    font-size:.48rem !important;
  }

  .hero-stack .stack-info strong{
    font-size:.72rem !important;
    line-height:1.1 !important;
  }
}
    
    @media (max-width: 768px){

  nav .menu-toggle{
    position: fixed !important;
    top: 16px !important;
    right: 18px !important;
    left: auto !important;

    width: 52px !important;
    height: 44px !important;

    z-index: 999 !important;
  }

}