/* ==========================================
   DIRTY DIPZ
   ========================================== */

.rotate-text {
    position: relative;
    width: 300px;
    height: 300px;
    margin: auto;
    font-size: 40px;
    letter-spacing: 0px;
    animation: rotateText 73s linear infinite;
    word-spacing: 30px;
    border: 1px solid white;
    border-radius: 100%;
    margin: 26px;
    color: #ec008c;
}


.rotate-text span {
    position: absolute;
    font-weight: 900;
}

@keyframes rotateText {
    to {
        transform: rotate(360deg);
    }
}

.shakes-cards {
    height : 380px;
}

.map-embed {
    margin-top: 30px;
}

span.dot {
    font-size: 35px!important;
    color : black!important;
}

img.hero-logo {
    max-width: 350px;
    min-width: 200px;
}

#logo {
    padding: 0px;
    margin-top: -40px;
    margin-bottom: -40px;
}

body#msl {
    margin: 0px;
}

section.hero {
    padding: 50px!important;
}

.dirty-dipz{
    background:#010101;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    width:100%;
    overflow-x:hidden;
}

.top-marquee{
    position: fixed;
    overflow: hidden;
    background: #ec008c;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, .2);
    box-shadow: 0 8px 20px rgba(236, 0, 140, .2);
    z-index: 990;
    WIDTH: -webkit-fill-available;
}

.marquee-track{
   display:flex;
   width:max-content;
   min-width:100%;
   animation:marqueeScroll 22s linear infinite;
}

.marquee-group{
   display:flex;
   align-items:center;
   gap:18px;
   white-space:nowrap;
   text-transform:uppercase;
   font-size:12px!important;
   letter-spacing:2px;
   font-weight:800;
}

.marquee-group a, .marquee-group p {
    color: #fff;
    text-decoration: none;
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.marquee-group a:hover{
   text-decoration:underline;
}

.dot{
   opacity:.9;
}

@keyframes marqueeScroll{
   from{
       transform:translateX(0);
   }
   to{
       transform:translateX(-50%);
   }
}

.dirty-dipz *,
.dirty-dipz *::before,
.dirty-dipz *::after{
    box-sizing:border-box;
}

.dirty-dipz .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

.dirty-dipz section{
    padding:80px 0;
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */

.dirty-dipz h1,
.dirty-dipz h2,
.dirty-dipz h3{
    margin:0 0 15px;
    font-weight:900;
    line-height:1.1;
}

.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    color:#ec008c;
    font-size:clamp(2rem,4vw,3.5rem);
}

.line{
    width:100px;
    height:6px;
    background:#ec008c;
    margin:20px auto 0;
    border-radius:999px;
}

.dirty-dipz p{
    margin:0;
}

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

.hero{
    text-align:center;
    padding:20px 0;
    background:radial-gradient(
        circle,
        rgba(236,0,140,.15),
        transparent 70%
    );
}

.tag{
    display:inline-block;
    background:#ec008c;
    color:#fff;
    padding:10px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.hero h1{
    color:#ec008c;
    font-size:clamp(4rem,10vw,7rem);
    margin:0px;
    line-height:.9;
}

.hero h2{
    color:#62bb46;
    font-size:clamp(1.5rem,4vw,2.5rem);
    margin-bottom:20px;
}

.hero p{
    max-width:800px;
    margin:0 auto;
    line-height:1.7;
    font-size:clamp(1rem,2vw,1.25rem);
}

/* ==========================================
   BUTTONS
   ========================================== */

.button-group{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-top:20px;
}

.rewards-title{
    color:#fff;
    font-weight:800;
    margin:6px 0 0;
    padding-top: 40px;
}

.store-icons{
    display:flex;
    gap:12px;
    align-items:center;
}

.store-link.large{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    color: #fff;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.06);
    flex-direction: row-reverse;
}


.delivery-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.04);
    border:2px solid rgba(255,255,255,0.12);
    border-radius:22px;
    padding:12px;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    gap:20px;
    flex-direction: row !important;
}

.delivery-logo{
    display:block;
    width:140px;
    height:140px;
    object-fit:contain;
    border-radius:18px;
    transition:transform .25s ease;
}

.delivery-link:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(236,0,140,.28);
    border-color:rgba(236,0,140,.7);
}

.delivery-link:hover .delivery-logo{
    transform:scale(1.04);
}

.btn{
    display:inline-block;
    background:#ec008c;
    color:#fff;
    text-decoration:none;
    padding:15px 30px;
    border-radius:50px;
    font-weight:700;
    font-size:clamp(.95rem,2vw,1rem);
    transition:.3s;
}

.btn:hover{
    background:#62bb46;
}

/* ==========================================
   GRIDS
   DESKTOP = 4
   ========================================== */

/* Shakes layout (inserted near grids for convenience) */
.shakes-layout{
    display:grid;
    grid-template-columns: 360px 1fr;
    gap:24px;
    align-items:start;
}

.shakes-image img{
    width:100%;
    height:400px;
    object-fit:cover;
    border-radius:12px;
}

.shakes-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.shakes .card{
    padding:18px;
}

.shakes .card .price{
    margin-top:10px;
    font-weight:800;
}

@media screen and (max-width:992px){
    .shakes-layout{
        grid-template-columns: 1fr;
    }
    .shakes-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media screen and (max-width:768px){
    .marquee-group { font-size:12px!important; }

    /* Tweak the top promotion bar for small screens */
    .top-marquee { padding: 8px 0; }
    .top-marquee .marquee-group p,
    .top-marquee .marquee-group a { font-size:12px!important; margin:0; line-height:1; color:#fff!important; }
    .top-marquee .marquee-group .dot { font-size:18px!important; margin:0 8px; color:#fff!important; vertical-align:middle; }

    /* Make shakes layout stack and ensure list items align consistently */
    .shakes-grid{ grid-template-columns:repeat(1,1fr); }
    .shakes-list{ grid-template-columns:1fr; }
    
    .shakes-list {
    grid-template-columns:1fr;
}
    
    .shakes-list li{ display:flex; flex-direction:column; justify-content:center; align-items:stretch; min-height:80px; }
}


.grid{
    display:grid !important;
    gap:20px;
    grid-template-columns:repeat(4,1fr) !important;
}

.social-list{
    display:flex;
    justify-content:center;
    gap:28px;
    list-style:none;
    padding:0;
    margin:0;
    text-align : center;
}

.social-list li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.12);
    padding: 20px;
    width: 150px!important;
    aspect-ratio: 1 / 1;
    justify-content: space-evenly;
    align-content: stretch;
    flex-wrap: nowrap;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.04);
}

.social-list li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(236, 0, 140, .28);
    border-color: rgba(236, 0, 140, .7);
}

.social-list li a i{ font-size:2.4rem; margin-bottom:8px; }

   .shakes-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns:1fr;
    gap: 16px;
    align-content: start;
    justify-content: start;
    justify-items: start;
    grid-auto-flow: row;
    height: 100%;
    align-items: start;
}

.shakes-list li{
    background:#111;
    border-radius:12px;
    padding:18px;
    height:100%;
    width: stretch;
}

@media screen and (max-width:992px){
    .shakes-list{
        grid-template-columns:1fr;
    }
}

/* ==========================================
   CARDS
   ========================================== */

.card{
    background:#111;
    border-radius:15px;
    padding:30px;
    height:100%;
}

.card-img{
    display:block;
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:12px;
}

.card h3{
    font-size:clamp(1.1rem,2vw,1.4rem);
}

.card p{
    font-size:clamp(.95rem,1.8vw,1.05rem);
    line-height:1.6;
}

/* App store link styles inside discount */
.store-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    background:rgba(0,0,0,0.1);
    padding:10px 14px;
    border-radius:8px;
    margin-left:10px;
    border:2px solid rgba(255,255,255,0.06);
}



.store-link i{
    font-size:1.2rem;
}

.pink{
    border-top:6px solid #ec008c;
}

.green{
    border-top:6px solid #62bb46;
}

.cyan{
    border-top:6px solid #00aeef;
}

.yellow{
    border-top:6px solid #fff200;
}

/* ==========================================
   DISCOUNT
   ========================================== */
.discount{
    background:linear-gradient(
        135deg,
        #ec008c,
        #b5006b
    );
    border-radius:25px;
    padding:60px 30px;
    text-align:center;
    border: 12px dashed white;
    animation: dashed-border-animation 1.4s linear infinite;
}

@keyframes dashed-border-animation {
  0% {
    border: 12px dashed #00000000;
  }
  50% {
    border: 12px dashed white;
  }
  100% {
    border: 12px dashed #00000000;
  }
}

.discount h2{
    font-size:clamp(2rem,4vw,3rem);
}

.discount p,
.discount li{
    font-size:clamp(1rem,2vw,1.1rem);
    line-height:1.7;
}

/* ==========================================
   madeforkeele
   ========================================== */
.madeforkeele{
    background:#000;
    border-radius:25px;
    padding:60px 30px;
    /* use flex so the rotated "MADE FOR KEELE" and the icon list sit side-by-side */
    display:flex;
    align-items:center;
    gap:32px;
    justify-content:space-between;
    flex-wrap:wrap; /* allows wrapping on small screens */
    text-align:left;
}

/* size and spacing adjustments when inside the madeforkeele section */
.madeforkeele .rotate-text{
    /* increase visual size when displayed side-by-side */
    margin:16px;
    width:420px;
    height:420px;
    font-size:54px; /* larger lettering inside the circle */
    order:1;
}

.madeforkeele .icon-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* match the milkshake grid: 2 columns of card-style items */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
    flex:1; /* allow the list to take remaining space */
    min-width:240px;
    order:2;
    align-items:start;
}

/* right column wrapper for icons + paragraph */
.madeforkeele .mf-right{
    display:flex;
    flex-direction:column;
    gap:12px;
    order:2;
    flex:1;
}

.madeforkeele .mf-right p{
    margin:0;
}

/* card-like list items similar to the milkshake grid */
.madeforkeele .icon-list li{
    background:#111;
    border-radius:12px;
    padding:16px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    min-height:96px;
    font-weight:700;
}

.madeforkeele .icon-list i{
    color:#ec008c;
    width:36px;
    font-size:1.6rem;
    text-align:center;
}

.madeforkeele .icon-list li small, .madeforkeele .icon-list li span{ /* handle possible inline wrappers */
    font-weight:700;
    color:#fff;
}

/* responsive: stack vertically on smaller screens */
@media screen and (max-width:768px){
    .madeforkeele{
        flex-direction:column;
        text-align:center;
        padding:40px 20px;
    }
    .madeforkeele .rotate-text{
        width:260px;
        height:260px;
        font-size:38px;
        margin:16px auto;
    }
    .madeforkeele .icon-list{
        grid-template-columns:repeat(1, minmax(0,1fr));
        margin-top:18px;
    }
    
    .madeforkeele li p {
    font-size: 12px!important;
}

.social-list {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    flex-direction: column;
    align-content: flex-start;
    align-items: center;
}
}

.madeforkeele h2{
    font-size:clamp(2rem,4vw,3rem);
}

.madeforkeele p,
.madeforkeele li{
    font-size:clamp(1rem,2vw,1.1rem);
    line-height:1.7;
}

.icon-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.icon-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.icon-list i {
    color: #ffffff; /* adjust to your brand colour */
    width: 20px;
    text-align: center;
}

.rewards-grid{
    max-width:760px;
    margin:28px auto 0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    padding:14px;
    border-radius:18px;
    background:rgba(0,0,0,0.12);
    border:1px solid rgba(255,255,255,0.1);
}

.rewards-grid span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 70px;
    padding: 16px 14px;
    border-radius: 12px;
    background: rgb(255 255 255);
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    font-weight: 700;
    line-height: 1.4;
    color: #cb0078;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: center;
}

.discount ul{
    list-style:none;
    padding:0;
    margin:30px 0;
}

@media screen and (max-width:640px){
    .rewards-grid{
        grid-template-columns:1fr;
    }
}

/* ==========================================
   SOCIAL
   ========================================== */

.social{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    background:#111;
    color:#fff;
    text-decoration:none;
    border-radius:15px;
    padding:30px;
    text-align:center;
    border-top:6px solid #ec008c;
    transition:transform .25s ease, box-shadow .25s ease;
}

.social:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(236,0,140,.2);
}

.social h3{
    font-size:clamp(1.1rem,2vw,1.4rem);
}

.social p{
    font-size:clamp(.95rem,2vw,1rem);
}

.social .social-icon{
    font-size:2.4rem;
    margin-bottom:10px;
    color:#fff;
}

/* ==========================================
   LOCATION
   ========================================== */

.location{
    text-align:center;
    line-height:1.9;
    font-size:clamp(1rem,2vw,1.2rem);
}

/* ==========================================
   CTA
   ========================================== */

/* Delivery links: keep side-by-side on small screens */
.delivery-links{
    display:flex;
    gap:16px;
    justify-content:center;
    flex-wrap:nowrap;
    flex-direction: row!important;
}
.delivery-link{
    flex:0 0 auto;
}

/* Slider controls for swipeable grids */
.slider-container{
    position:relative;
}
.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,0.6);
    color:#fff;
    border:none;
    width:44px;
    height:44px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:20;
}
.slider-arrow.left{ left:8px; }
.slider-arrow.right{ right:8px; }
/* bottom arrows (duplicate controls positioned beneath the slider) */
.slider-arrow.bottom{ top:auto; bottom:8px; width:40px; height:40px; }
.slider-arrow.bottom.left{ left:40%; transform:none; }
.slider-arrow.bottom.right{ left:60%; transform:none; }

.slider-dots{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-28px;
    display:flex;
    gap:8px;
    z-index:20;
}
.slider-dots button{
    width:8px;
    height:8px;
    border-radius:50%;
    background:rgba(255,255,255,0.25);
    border:none;
    cursor:pointer;
}
.slider-dots button.active{ background:#ec008c; }
.slider-fraction{
    position:absolute;
    right:8px;
    bottom:8px;
    background:rgba(0,0,0,0.45);
    color:#fff;
    padding:6px 10px;
    border-radius:12px;
    font-weight:700;
    font-size:0.9rem;
    z-index:20;
}

/* Mobile swiper controls: place pagination and arrows below the slides */
.mobile-swiper .swiper-controls{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 12px;
    margin-top: 40px;
    flex-direction: row;
    align-content: center;
}

.mobile-swiper .swiper-button-prev,
.mobile-swiper .swiper-button-next{
    position: static;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: none;
    cursor: pointer;
    background: #ec008c;
    padding: 30px;
}
.mobile-swiper .swiper-pagination{
    position:static;
    color:#fff;
    font-weight:700;
    background:rgba(0,0,0,0.45);
    border-radius:12px;
    font-size:0.9rem;
}

@media screen and (min-width:993px){
    /* hide arrows/dots on desktop */
    .slider-arrow, .slider-dots, .slider-fraction{ display:none; }
}

/* card media + plus icon */
.card{ position:relative; }
.card-media{ position:relative; }
.plus-icon{display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.95); }
.plus-icon i{ font-size:clamp(80px,10vw,160px); }

/* entrance animations */
.container{ opacity:1; transform:none; }
.container.animate-in{ animation:fadeInUp 600ms ease-out forwards; }
@keyframes fadeInUp{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }

.hero-logo{ opacity:1; transform:none; display:block; margin:0 auto; }
.hero-logo.logo-animate{ animation:logoPop 750ms cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes logoPop{ from{ opacity:0; transform:scale(.9);} to{ opacity:1; transform:scale(1);} }


.final{
    text-align:center;
    background:rgba(236,0,140,.08);
}

.final h2{
    color:#62bb46;
    font-size:clamp(2rem,5vw,4rem);
}

.final p{
    font-size:clamp(1rem,3vw,1.4rem);
}

/* ==========================================
   TABLET
   2 COLUMNS
   ========================================== */

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

    .dirty-dipz section{
        padding:60px 0;
    }

    /* use horizontal swipeable rows on tablet/portrait */
    .grid,
    .social-grid{
        display:flex !important;
        grid-template-columns:none !important;
        gap:18px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding-bottom:6px;
    }

    .grid .card,
    .social-grid .social{
        min-width:260px;
        flex:0 0 auto;
        scroll-snap-align:start;
    }

    .hero{
        padding:90px 0;
    }

}

/* ==========================================
   MOBILE
   1 COLUMN
   ========================================== */

@media screen and (max-width:768px){
    
    
    .rewards-grid span {font-size : 12px;}
    
    .card-img {
    display: block;
    width: 100%;
    height: 270px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}

    /* keep horizontal swipe behaviour on mobile, but allow single-column fallback */
    .grid,
    .social-grid{
        display:flex !important;
        grid-template-columns:none !important;
        gap:12px;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        padding-bottom:6px;
    }

    .grid .card,
    .social-grid .social{
        min-width:84%;
        flex:0 0 auto;
        scroll-snap-align:start;
    }

    .card,
    .social{
        width:100%;
    }

    .dirty-dipz section{
        padding:50px 0;
    }

    .hero{
        padding:60px 0;
    }

    .hero h1{
        font-size:3rem;
    }

    .hero h2{
        font-size:2rem;
    }

    .hero p{
        font-size:1.1rem;
    }

    .section-title h2{
        font-size:2rem;
    }

    .card,
    .social,
    .discount{
        padding:25px;
    }

    .card p,
    .social p,
    .discount p,
    .discount li{
        font-size:1.05rem;
    }

    .button-group{
        flex-direction:column;
        align-items:center;
    }

    .btn{
        width:100%;
        max-width:350px;
        text-align:center;
    }
}

/* ==========================================
   SMALL PHONES
   ========================================== */

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

    .dirty-dipz .container{
        padding:0 15px;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .hero h2{
        font-size:1.5rem;
    }

    .hero p{
        font-size:1rem;
    }

    .section-title h2{
        font-size:1.7rem;
    }

    .location,
    .card p,
    .social p,
    .discount p,
    .discount li{
        font-size:1rem;
    }

    .tag{
        font-size:11px;
        letter-spacing:1px;
        padding:8px 12px;
    }
}

/* feature cards */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:20px;
}
.feature-card{
    background:#111;
    border-radius:15px;
    padding:24px 18px;
    text-align:center;
    border-top:6px solid #ec008c;
    min-height:180px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.feature-card:nth-child(2n){ border-top-color:#62bb46; }
.feature-card:nth-child(3n){ border-top-color:#00aeef; }
.feature-card .feature-icon{
    width:72px;
    height:72px;
    border-radius:50%;
    background:rgba(236,0,140,0.12);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
}
.feature-card i{ font-size:2rem; color:#fff; }
.feature-card p{ font-weight:700; line-height:1.6; }

@media screen and (max-width:768px){
    .feature-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

/* Opening Times & Location styles */
.location-section .location-grid{display: grid;
    grid-template-columns: 1fr 40%;
    gap: 50px;
    align-items: end;
    margin-top: 16px;
    align-content: center;
    justify-content: center;}
@media screen and (max-width:992px){.location-section .location-grid{grid-template-columns:1fr}}
.location-section .times h3,.location-section .map h3{margin-top:0}
.location-section .times ul{list-style:none;padding:0;margin:0}
.location-section .times li{padding:6px 0}
.location-section .map-embed iframe{width:100%;height:260px;border:0;border-radius:12px}
.btn.directions{background:#62bb46;border-color:#62bb46; margin-top: 40px; margin-bottom: 10px;}
.btn.directions:hover{background:#4ea23a}