/* ===== Tomodachi Landing Overrides ===== */

/* HERO */
.hero{
  color:#fff;
  padding:120px 0 80px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 85% 35%, rgba(255,255,255,.13), transparent 60%),
    linear-gradient(135deg,#1e63ff 0%, #6a5cff 55%, #ff4db3 100%);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.hero .brand-lockup{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero .brand-lockup img{height:24px;width:auto}
.hero h1{
  font-weight:900; letter-spacing:.2px; line-height:1.05;
  font-size:clamp(32px,6vw,64px); margin:0 0 14px;
}
.hero .lead{font-size:clamp(16px,2.2vw,20px);max-width:540px;opacity:.95}
.hero .badges{display:flex;gap:16px;align-items:center;margin-top:22px;flex-wrap:wrap}
.hero .badges img{height:46px;width:auto}
.hero .pill{
  display:inline-block;padding:10px 14px;border-radius:999px;font-weight:700;font-size:14px;line-height:1;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);color:#fff
}

/* Phones */
.hero-phones{position:relative;height:520px}
.phone{
  position:absolute;width:260px;height:520px;border-radius:36px;overflow:hidden;
  background:#0b0d12;border:8px solid #0b0d12;box-shadow:0 24px 70px rgba(0,0,0,.45)
}
.phone img{width:100%;height:100%;object-fit:cover}
.phone.primary{right:40px;transform:rotate(8deg);z-index:2}
.phone.secondary{right:220px;top:40px;transform:rotate(-6deg);z-index:1;opacity:.96}

/* Navbar readable over hero */
#mainNav{background:transparent;border-bottom:0}
#mainNav .nav-link{color:rgba(255,255,255,.95)}
#mainNav .nav-link:hover{color:#fff}
.navbar-light .navbar-toggler{border-color:rgba(255,255,255,.35)}
.navbar-light .navbar-toggler-icon{filter:invert(1)}

/* FEATURES */
.features{padding:72px 0;background:#fff}
.features h2{font-weight:900;margin-bottom:22px}
.feature-card{
  background:#fff;border:1px solid #eef0f3;border-radius:20px;padding:24px;height:100%;
  box-shadow:0 8px 24px rgba(0,0,0,.06)
}
.feature-card .icon{
  width:56px;height:56px;display:inline-grid;place-items:center;border-radius:14px;margin-bottom:12px;font-size:22px
}
.icon-blue{background:#eef5ff;color:#2563eb}
.icon-teal{background:#e9fbf6;color:#059669}
.icon-amber{background:#fff7e6;color:#f59e0b}
.icon-pink{background:#ffeaf3;color:#ec4899}
.feature-card h3{font-size:18px;font-weight:800;margin:0 0 6px}
.feature-card p{color:#6b7280;margin:0}

/* LIVE & PARTNER TILES */
.split-tiles{padding:56px 0 90px;background:#fff}
.split-tiles .tile{
  border-radius:24px;padding:28px;height:100%;
  background:linear-gradient(180deg,#eff6ff,#ffffff)
}
.split-tiles .tile.pink{background:linear-gradient(180deg,#ffeaf7,#ffffff)}
.split-tiles .tile h3{font-weight:900;margin-bottom:8px}
.split-tiles .tile p{color:#6b7280;margin-bottom:14px}

/* CONTACT cards tweak on dark background */
/* .contact-section .card{border:0;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.12)} */
/* Compact contact cards (Address / Email / Phone) */
.contact-section .card { 
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.contact-section.bg-black{background:#0b0d12 !important}

/* ===== Contact Us tiles (section: .contact-cards) — make compact ===== */
.contact-cards h2{
  font-size: clamp(20px, 3vw, 28px);
  margin-bottom: 1rem;
}

.contact-cards .card{
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* Tighten vertical space */
.contact-cards .card.py-2{
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.contact-cards .card .card-body{
  padding: 12px !important;   /* was larger */
}

/* Smaller icon */
.contact-cards .card i{
  font-size: 18px;
  margin-bottom: .25rem !important;
}

/* Smaller “ADDRESS / EMAIL / PHONE” headings */
.contact-cards .card-body > h4.text-uppercase.m-0{
  font-size: .85rem !important;
  line-height: 1.1;
  letter-spacing: .06em;
  margin-bottom: .35rem !important;
}

/* Thinner, shorter divider */
.contact-cards .card hr{
  width: 56%;
  margin: .5rem auto !important;
  opacity: .25;
}

/* Smaller body text */
.contact-cards .card .small{
  font-size: .90rem;
  line-height: 1.35;
}

/* Even tighter on mobile */
@media (max-width: 576px){
  .contact-cards .card-body > h4.text-uppercase.m-0{ font-size: .80rem !important; }
  .contact-cards .card i{ font-size: 16px; }
  .contact-cards .card .small{ font-size: .86rem; }
}

/* space below the 3 cards (before the social icons) */
.contact-cards .row.gx-4.gx-lg-5{
  margin-bottom: 28px;
}

/* more space under the blue icons inside each card */
.contact-cards .card i{
  margin-bottom: .6rem !important;   /* was .25rem */
}

/* spacing for the social buttons row */
.contact-cards .social{
  margin-top: 65px !important;       /* override inline 10px */
  margin-bottom: 40px;               /* space below the icons */
  gap: 12px;                          /* optional spacing between buttons */
}

/* a little breathing room under the whole Contact section */
.contact-cards{
  padding-bottom: 32px;
}



/* even smaller on mobile */
@media (max-width: 576px){
  .contact-section .card-body > h4.text-uppercase.m-0 {
    font-size: 0.75rem !important;
  }
}

/* === Make TOP row (contact-section) same compact size as bottom (contact-cards) === */

/* tighten padding like the bottom row */
.contact-section .card.py-2 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.contact-section .card .card-body {
  padding: 14px 14px !important;
}

/* smaller icons */
.contact-section .card i {
  font-size: 18px;
  margin-bottom: .2rem !important;
}

/* smaller "ADDRESS / EMAIL / PHONE" headings */
.contact-section .card-body > h4.text-uppercase.m-0 {
  font-size: .85rem !important;
  line-height: 1.1;
  letter-spacing: .06em;
  margin-bottom: .25rem !important;
}

/* thinner divider */
.contact-section .card hr {
  width: 60%;
  margin: .4rem auto !important;
  opacity: .25;
}

/* body text size */
.contact-section .card .small {
  font-size: .9rem;
  line-height: 1.35;
}

/* match the card look (optional, same as bottom row) */
.contact-section .card {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* mobile tweaks to stay compact */
@media (max-width: 576px){
  .contact-section .card-body > h4.text-uppercase.m-0 { font-size: .8rem !important; }
  .contact-section .card i { font-size: 16px; }
  .contact-section .card .small { font-size: .86rem; }
}



/* Responsive */
@media (max-width:991.98px){
  .hero-phones{height:420px}
  .phone{width:200px;height:420px}
  .phone.primary{right:0}
  .phone.secondary{right:140px}
}
@media (max-width:767.98px){
  .hero{padding-top:100px}
  .hero-phones{display:none}
  .hero .lead,.hero h1{text-align:center}
  .hero .badges{justify-content:center}
}

/* Make App Store & Google Play badges uniform */
.store-badge {
  height: 46px;        /* Same height as your App Store badge */
  width: auto;         /* Keep aspect ratio */
  display: inline-block;
}

.badges {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
/* footer {
  background: radial-gradient(1200px 600px at 85% 35%, rgba(255, 255, 255, .13), transparent 60%),
              linear-gradient(135deg, #1e63ff 0%, #6a5cff 55%, #ff4db3 100%) !important;
  color: #fff;
  padding: 20px;
} */

/* Slideshow (stays inside the column) */
.slideshow{
  max-width: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef6ff;
}

/* Only child of .ratio fills the frame */
.slideshow .slides-viewport{
  position: absolute; inset: 0;
}

/* Track + slides */
.slideshow .slides-track{
  height: 100%;
  display: flex;
  transition: transform .5s ease;
}
.slideshow .slide{ flex: 0 0 100%; height: 100%; }
.slideshow img{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* Arrows */
.slide-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color:#fff; font-size: 26px; line-height: 1;
  display: grid; place-items: center; cursor: pointer; z-index: 2;
}
.slide-nav:hover{ background: rgba(0,0,0,.6); }
.slide-nav.prev{ left: 10px; }
.slide-nav.next{ right: 10px; }




/* Arrow base */
.slide-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color:#fff; font-size: 26px;
  display: grid; place-items: center; cursor: pointer; z-index: 3;
}

/* Make sure each side is explicit and not inherited */
.slide-prev{ left: 10px;  right: auto; }
.slide-next{ right: 10px; left:  auto; }

.slide-arrow:hover{ background: rgba(0,0,0,.6); }

/* (optional) smaller on mobile */
@media (max-width: 576px){
  .slide-arrow{ width: 36px; height: 36px; font-size: 22px; }
}

/* make sure viewport is a stacking context below arrows */
.slideshow .slides-viewport { position:absolute; inset:0; z-index:0; }
/* keep arrows on top & clickable */
.slide-nav { z-index:5; pointer-events:auto; }


/* footer bg */
/* Reuse the hero gradient on the contact section */
.contact-section.bg-black{
  background:
    radial-gradient(1200px 600px at 85% 35%, rgba(255,255,255,.13), transparent 60%),
    linear-gradient(135deg,#1e63ff 0%, #6a5cff 55%, #ff4db3 100%) !important; /* override .bg-black */
  color:#fff;
}


/* function for fitting the photo in the modal */
#imageModal .modal-body img{
  width: 100%;
  max-height: 72vh;   /* leave space for caption */
  object-fit: contain; /* no cropping */
}
#imageModal .modal-content{ background:#1a1d20; }
#imageModal .modal-body img { max-height:72vh; object-fit:contain; }



/* Modal menu styles */
#modalMenu { color:#111; }
#modalMenu h5 { margin: 0 0 8px; font-weight: 800; }
#modalMenu .menu-list { display: grid; gap: 10px; }
#modalMenu .menu-item {
  background: #ffffff; border-radius: 12px; padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
}
#modalMenu .menu-line {
  display:flex; justify-content:space-between; align-items:center; gap: 12px;
}
#modalMenu .menu-title { font-weight: 700; }
#modalMenu .menu-price { font-weight: 800; white-space:nowrap; }
#modalMenu .menu-desc { color:#555; margin-top: 4px; font-size: .95rem; }
#modalMenu .menu-thumb {
  width: 100%; max-height: 180px; object-fit: cover; margin-top: 8px; border-radius: 10px;
}



.tomo-hero-logo { height: 220px; width: auto; }
@media (max-width: 576px){
  .tomo-hero-logo { height: 140px; }
}



/* style for menu in mobile view so that the menu dropdown doesnt go to the left */
/* Keep collapsed nav on the right in mobile */
@media (max-width: 991.98px){
  #mainNav .navbar-collapse{
    position: absolute;
    top: 100%;
    right: 1rem;
    left: auto;
    flex-basis: auto;   /* stop full-width growth */
    background: rgba(11,13,18,.92);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;
    padding: .5rem 1rem;
    backdrop-filter: blur(6px);
  }
  #mainNav .navbar-nav{
    align-items: flex-end;   /* right align the vertical stack */
    text-align: right;
  }
  #mainNav .navbar-nav .nav-link{
    padding-left: 0;         /* tidy spacing */
  }
  /* make sure the dropdown opens to the right edge */
  #mainNav .dropdown-menu{ right: 0; left: auto; }
}

/* Smooth hide/show for the fixed navbar */
#mainNav{
  transition: transform .28s ease-in-out, background-color .2s ease;
  will-change: transform;
}
#mainNav.nav-hide{
  transform: translateY(-110%);
}

/* (optional) make the navbar slightly solid once you start scrolling */
#mainNav.nav-solid{
  background: rgba(11,13,18,.68);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.navbar-light .navbar-toggler { border-color: rgba(255,255,255,.35); }
.navbar-light .navbar-toggler-icon { filter: invert(1); } /* only if using the default icon */






/* ✅ Force the Tomodachi logo to enlarge, center, and move upward */
.mt-3 a img[src*="tomonewlogo"] {
  height: clamp(320px, 38vw, 750px) !important;  /* grows responsively */
  width: auto !important;
  display: block !important;
  margin: -60px auto 0 auto !important;          /* moves logo upward */
}