/* =========================
   Tablet Reset & Base
========================= */
html, body {
  font-size: 16px; /* Slightly larger than mobile */
}

.wrapper {
  padding: 0 1rem;
}

/* =========================
   Header & Navigation
========================= */
header {
  padding: 1em 1.5em;
}

nav a {
  font-size: 1em;
  margin: 0 0.75em;
}

/* =========================
   Sections (Generic)
========================= */
section {
  padding: 1.5em;
  margin: 1.5em auto;
  max-width: 900px; /* Slightly wider than mobile */
}

h2 {
  font-size: 1.8em;
}

p {
  font-size: 1.1em;
  margin-bottom: 1.5em;
}

/* =========================
   Contact Form
========================= */
form {
  max-width: 500px; /* Increased max-width for tablet */
}

form input,
form textarea {
  padding: 10px;
}

form button {
  width: 75%; /* Wider button than mobile but not as wide as desktop */
}

/* =========================
   Lists (e.g. Services)
========================= */
li {
  padding: 0 1.5em;
}

/* =========================
   Hero / Coming Soon
========================= */
.hero {
  padding: 2em;
}

.hero-image {
  max-width: 80%; /* Takes up more space than on mobile */
}

.hero-content h1 {
  font-size: 2.2em;
}

.hero-content p {
  font-size: 1.2em;
  max-width: 80%;
}

/* =========================
   Portfolio Page Styles
========================= */
.portfolio-grid {
  grid-template-columns: repeat(1, 1fr); /* One column on tablet */
  gap: 15px; /* Moderate gap */
}

.app-icon {
  width: 150px; /* Slightly larger icons than mobile */
  height: auto;
}

.app-icon .info {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
  opacity: 1; /* Always visible */
  visibility: visible; /* Always visible */
  background-color: rgba(34, 34, 34, 0.8);
  text-decoration: none !important;
  width: 100%;
  max-width: 500px;
  border-radius: 10px;
}

.app-icon .info a {
  color: inherit; /* Inherits color from parent */
  text-decoration: none; /* Removes underline */
}




/* =========================
   Footer
========================= */
footer {
  padding: 1.5em 0;
  font-size: 0.9em;
}

/* Remove underline and color on all links */
a {
  text-decoration: none;
  color: inherit; /* Keeps the color the same as surrounding text */
}

a:hover, a:focus, a:visited {
  text-decoration: none;
  
}
.portfolio-grid .app-icon:nth-child(3n+1):hover ~ .app-icon:nth-child(3n+1),
.portfolio-grid .app-icon:nth-child(3n+2):hover ~ .app-icon:nth-child(3n+2),
.portfolio-grid .app-icon:nth-child(3n+3):hover ~ .app-icon:nth-child(3n+3) {
  margin-top: 200px; /* Apply only to icons directly below in the same column */
}

.portfolio-grid .app-icon:hover {
    transform: none !important;
    box-shadow: none !important;
}
/* ==== keep text centered on mobile & tablet ==== */
body.dreamme-landing,
body.dreamme-landing section,
body.dreamme-landing .wrapper,
body.dreamme-landing .features {
  text-align: center !important;
}

/* also make sure any “features‐list” items center too */
body.dreamme-landing .features-list li {
  text-align: center !important;
}
/* — Dream.Me core look on small screens — */
body.dreamme-landing {
  background: transparent !important;
  position: relative;
  overflow-x: hidden;
}
body.dreamme-landing::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("../assets/Dream.Me/Background.jpg") center/cover no-repeat;
  filter: blur(8px);
  opacity: 0.6;
  z-index: -1;
}

body.dreamme-landing .hero-icon {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 25%;
}


/* touch/pen tablets – same deal */
.carousel-arrow{
  opacity:1 !important;
}
#portfolio .carousel-track{ justify-content:center; }
#portfolio .app-icon{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

  /* stop horizontal scrolling & hide arrows */
  #portfolio .portfolio-carousel{overflow:visible;}
  #portfolio .carousel-arrow{display:none;}

  /* turn the ‘track’ into a normal block flow */
  #portfolio .carousel-track{
    display:block;               /* column instead of row   */
    transform:none !important;   /* ignore translateX calls */
  }

  /* make each card full-width & always visible */
  #portfolio .carousel-track .app-icon{
    flex:none;                   /* cancel the 100%/slide rule in pages.css  [oai_citation:0‡pages.css](file-service://file-PJCRJHCxAuxpnTqWZLtx1i) */
    width:100%;
    max-width:480px;             /* nice readable line-length */
    margin:0 auto 1.5rem;        /* loose vertical rhythm     */
    opacity:1 !important;        /* defeat .active fade-in    */
    transform:none !important;   /* no hover zoom on touch    */
  }