.elementor-4535 .elementor-element.elementor-element-1f18fb87{--display:flex;--min-height:100px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-evenly;--gap:0px 20px;--row-gap:0px;--column-gap:20px;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:999;}.elementor-4535 .elementor-element.elementor-element-9c0f3f5{--display:flex;--min-height:60px;--background-transition:0.3s;--margin-top:0px;--margin-bottom:0px;--margin-left:60px;--margin-right:0px;}.elementor-4535 .elementor-element.elementor-element-9c0f3f5:not(.elementor-motion-effects-element-type-background), .elementor-4535 .elementor-element.elementor-element-9c0f3f5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://duo2.duosingapore.com/wp-content/uploads/2025/12/duo-logo-coffee.png");background-repeat:no-repeat;background-size:contain;}.elementor-4535 .elementor-element.elementor-element-9c0f3f5:hover{background-image:url("https://duo2.duosingapore.com/wp-content/uploads/2025/12/duo-logo-coffee.png");}.elementor-4535 .elementor-element.elementor-element-9c0f3f5.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-4535 .elementor-element.elementor-element-399cb3f5{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:60px;}.elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-widget-mega-menu > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-mega-menu{--n-menu-divider-color:var( --e-global-color-text );}.elementor-4535 .elementor-element.elementor-element-2aa4363{--display:flex;}.elementor-4535 .elementor-element.elementor-element-013d2ab{--display:flex;--min-height:100vh;--margin-top:30px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4535 .elementor-element.elementor-element-013d2ab:not(.elementor-motion-effects-element-type-background), .elementor-4535 .elementor-element.elementor-element-013d2ab > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1F1F1F;}.elementor-4535 .elementor-element.elementor-element-b31d185{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-4535 .elementor-element.elementor-element-b31d185.e-con{--align-self:center;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-2fd4170 .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;color:#D1D1D1;}.elementor-4535 .elementor-element.elementor-element-50422b1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4535 .elementor-element.elementor-element-a851953{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-4535 .elementor-element.elementor-element-8304ea6 .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-8304ea6 .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-8304ea6 .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-8304ea6 .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-8304ea6 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-3963d0b .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-3963d0b .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-3963d0b .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-3963d0b .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-3963d0b .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-70050b8 .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-70050b8 .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-70050b8 .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-70050b8 .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-70050b8 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-96d772b{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-4535 .elementor-element.elementor-element-58218bd .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-58218bd .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-58218bd .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-58218bd .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-58218bd .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-4be18d2 .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-4be18d2 .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-4be18d2 .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-4be18d2 .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-4be18d2 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-4798dca{padding:20px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-4798dca .elementor-heading-title{font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:600;text-transform:uppercase;color:#D1D1D1;}.elementor-4535 .elementor-element.elementor-element-b6cc298{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-4535 .elementor-element.elementor-element-d506b2d{--divider-border-style:solid;--divider-color:var( --e-global-color-text );--divider-border-width:1px;}.elementor-4535 .elementor-element.elementor-element-d506b2d .elementor-divider-separator{width:100%;}.elementor-4535 .elementor-element.elementor-element-d506b2d .elementor-divider{padding-block-start:15px;padding-block-end:15px;}.elementor-4535 .elementor-element.elementor-element-956bad8 .elementor-button{background-color:#F4F4F400;font-family:"Montserrat", Sans-serif;font-size:14px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-4535 .elementor-element.elementor-element-956bad8 .elementor-button:hover, .elementor-4535 .elementor-element.elementor-element-956bad8 .elementor-button:focus{color:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-956bad8 .elementor-button:hover svg, .elementor-4535 .elementor-element.elementor-element-956bad8 .elementor-button:focus svg{fill:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-ad057a1{--display:flex;}.elementor-4535 .elementor-element.elementor-element-a3f2231{--display:flex;}.elementor-4535 .elementor-element.elementor-element-0308425{--display:flex;}.elementor-4535 .elementor-element.elementor-element-4ca6101{--display:flex;}.elementor-4535 .elementor-element.elementor-element-837b015{--n-menu-dropdown-content-max-width:initial;--n-menu-heading-justify-content:flex-end;--n-menu-title-flex-grow:initial;--n-menu-title-justify-content:initial;--n-menu-title-justify-content-mobile:flex-end;--n-menu-heading-wrap:wrap;--n-menu-heading-overflow-x:initial;--n-menu-title-distance-from-content:0px;--n-menu-toggle-icon-wrapper-animation-duration:500ms;--n-menu-title-color-normal:#947C6C;--n-menu-title-transition:300ms;--n-menu-icon-size:16px;--n-menu-toggle-icon-size:20px;--n-menu-toggle-icon-hover-duration:500ms;--n-menu-toggle-icon-distance-from-dropdown:0px;}.elementor-4535 .elementor-element.elementor-element-837b015 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title, .elementor-4535 .elementor-element.elementor-element-837b015 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container, .elementor-4535 .elementor-element.elementor-element-837b015 > .e-n-menu > .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-title > .e-n-menu-title-container > span{font-family:"Montserrat", Sans-serif;font-weight:600;text-transform:uppercase;}.elementor-4535 .elementor-element.elementor-element-837b015 {--n-menu-title-color-hover:var( --e-global-color-primary );}.elementor-4535 .elementor-element.elementor-element-103c4c03{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-4535 .elementor-element.elementor-element-9c0f3f5{--width:20%;}.elementor-4535 .elementor-element.elementor-element-013d2ab{--width:100%;}.elementor-4535 .elementor-element.elementor-element-b31d185{--width:70%;}.elementor-4535 .elementor-element.elementor-element-a851953{--width:30%;}.elementor-4535 .elementor-element.elementor-element-96d772b{--width:30%;}}/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-8304ea6 *//* --- 1. GLOSS BACKGROUND & CONTAINER --- */
.mtc-dropdown-btn .elementor-button {
    /* Layout: Unlocks Elementor's strict flexbox */
    display: inline-block !important; 
    width: auto !important;
    vertical-align: middle;
    
    /* Glossy Style */
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    position: relative;
    overflow: hidden !important;
    transition: all 0.3s ease;
    z-index: 1;
}

/* The Gloss Gradient */
.mtc-dropdown-btn .elementor-button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

/* Show Gloss on Hover */
.mtc-dropdown-btn .elementor-button:hover::before {
    opacity: 1;
}

/* --- 2. UNLOCKING THE ANIMATION --- */
/* Critical: Forces the inner wrappers to behave like blocks so text can slide up */
.mtc-dropdown-btn .elementor-button-content-wrapper,
.mtc-dropdown-btn .elementor-button-text {
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
    flex: none !important; /* Disables flex resizing */
}

/* --- 3. ANIMATION TRIGGERS --- */
/* We use !important to override any specific Elementor hover states */

/* Slide Visible Text UP and OUT */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.visible span {
    transform: translateY(-110%) !important;
    opacity: 0 !important;
}

/* Slide Hidden Text UP and IN */
.mtc-dropdown-btn .elementor-button:hover .mtc-text.hidden span {
    transform: translateY(0%) !important;
    opacity: 1 !important;
}

/* Ensure Physics match your other buttons */
.mtc-dropdown-btn .mtc-text span {
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s ease !important;
    transition-delay: var(--d) !important;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-e33c8ef */.random-shops-carousel-container {
  width: 100%;
  padding: 0;
  margin: 0;
}

.random-shops-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 280px));
  gap: 20px;
  width: 100%;
  justify-content: start;
}

.random-shop-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  width: 100%;
}

.random-shop-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.random-shop-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0px;
  transition: transform 0.3s ease;
}

.random-shop-image:hover img {
  transform: scale(1.05);
}

.random-shop-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin-top: 2px;
  line-height: 1.2;
}

.random-shop-title a {
  text-decoration: none;
  color: inherit;
}

@media (max-width: 768px) {
  .random-shops-carousel {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }
}

@media (max-width: 600px) {
  .random-shops-carousel {
    grid-template-columns: repeat(2, 1fr);
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-399cb3f5 */.elementor-4535 .elementor-element.elementor-element-399cb3f5 {
    position: static !important;
}/* End custom CSS */
/* Start custom CSS */body { overflow-x: hidden; }/* End custom CSS */