/* color palatte & setup */
:root {
    --lightest: #f2fbf2;
    --light: #9ac2a4;
    --primary: #74ad8c;
    --secondary: #7c877c;
    --dark: #2a5642;
    --darker: #21332b;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--darker);
    line-height: 1.6;
    overflow-x: hidden;
    background-color: var(--lightest);
    scroll-behavior: smooth;
}
body.no-scroll {
    overflow: hidden;
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    line-height: 1.3;
}
input, textarea, select, select option {
    font-family: 'Poppins', sans-serif;
}

/* GRIDS ----- */

.grid-min300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.grid-min250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr)); /* exactly 2 columns max */
    gap: 2rem;
}

/* CARD STYLES ----- */

.service-card {
    background-color: var(--lightest);
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(122, 135, 122, 0.1);
    display: flex;
    flex-direction: column;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
}

.service-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: white;
    font-size: 1.8rem;
}

.service-card h3 {
    color: var(--dark);
    margin-bottom: 1rem;
    font-size: 1.4rem;
}

.service-card p {
    color: var(--secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.service-card a {
    color: var(--dark);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    display: block;
}
.service-card a:hover {
    color: var(--primary);
    gap: 0.8rem;
}

.light-icon-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    position: relative;
}
.light-icon-card i, .light-icon-card img { /* the card image container div */
    width: 100%;
    height: 250px;
    background-color: var(--light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}
.light-icon-card > div {
    padding: 1.5rem;
    background-color: white;
}
.light-icon-card h3 {
    color: var(--dark);
    margin-bottom: 0.5rem;
}

.dark-icon-card-center {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.3s, background-color 0.3s;
}
.dark-icon-card-center i {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
    color: var(--light);
}
.dark-icon-card-center h3 {
    margin-bottom: 0.5rem;
}

/* === Mochi-Inspired Portfolio Gallery === */

.mochi-portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  margin-top: 3rem;
}

/* Group of smaller items */
.portfolio-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

/* Base style for all items */
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-item:hover {
  transform: translateY(-6px);
}

/* Image style */
.mochi-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  transition: transform 0.6s ease;
}

.portfolio-item:hover .mochi-image {
  transform: scale(1.05);
}

/* Overlay effect */
.mochi-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  color: white;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  border-radius: 16px;
  transition: opacity 0.4s ease;
}

.portfolio-item:hover .mochi-overlay {
  opacity: 1;
}

.mochi-overlay h3 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.mochi-overlay p {
  font-size: 1rem;
  opacity: 0.9;
}

/* Shape sizing */
.portfolio-item.wide {
  aspect-ratio: 16 / 7;
}

.portfolio-item.square {
  aspect-ratio: 1 / 1;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .mochi-portfolio-grid {
    gap: 2rem;
  }
  .portfolio-item.wide {
    aspect-ratio: 16 / 9;
  }
}


/* TEXT ----- */

.hero-title {
    font-size: 3.4rem;
    color: var(--darker);
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.3rem;
}

#typewriter {
    border-right: 2px solid var(--dark);
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    line-height: 1.2;
    padding-left: 5px;
    animation: blinkCursor 0.8s steps(2, start) infinite;
}

.hero-subtitle {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: var(--dark);
}

.section-title {
    text-align: center;
    margin-bottom: 4rem;
}

.section-title h2 {
    font-size: 2.5rem;
    color: var(--dark);
    margin-bottom: 1rem;
}

.section-title p {
    color: var(--secondary);
    max-width: 700px;
    margin: 0 auto;
}

/* BUTTONS ----- */

.dark-cta-button {
    background-color: var(--darker);
    color: white !important;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.dark-cta-button:hover {
    background-color: #141f1a;
}

.cta-button {
    background-color: var(--dark);
    color: white !important;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.cta-button:hover {
    background-color: var(--darker);
}

.secondary-cta-button {
    background-color: transparent;
    color: var(--dark) !important;
    border: 2px solid var(--dark);
}

.secondary-cta-button:hover {
    background-color: var(--dark);
    color: white !important;
}

/* HERO SECTIONS ----- */

.hero-tall {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.hero-short {
    padding: 10rem 6rem;
    background: linear-gradient(to bottom, rgba(198, 226, 198, 0.9), rgba(216, 234, 216, 0.9)), url('../images/bg.png');
    background-size: cover;
    background-position: center;
    text-align: center;
}
.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
    margin-top: 80px;
}
.main-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
    linear-gradient(to bottom, rgba(198, 226, 198, 0.8), rgba(216, 234, 216, 0.8)),
    url('../images/bg.png');
    background-size: cover;
    background-position: center calc(100% - 40px);
    filter: blur(2px);
    transform: scale(1.1);
    z-index: -1;
    transition: transform 0.1s ease-out;
}

/* SECTIONS ----- */

.light-section {
    padding: 6rem 0;
    background: white;
    position: relative;
}
.light-section-two {
    padding: 6rem 0;
    background-color: var(--lightest);
}
.dark-section {
    padding: 6rem 0;
    background-color: var(--dark);
    color: white;
}
.dark-section .section-title h2 {
    color: white;
}

.dark-gradient-section {
    padding: 6rem 0;
    background: linear-gradient(to right, var(--dark), var(--darker));
    color: white;
    text-align: center;
}
.dark-gradient-section .section-title h2 { 
    color: white;
 }

/* COMMON COMPONENTS & EFFECTS ----- */

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* effects */

.raise-hover-effect:hover {
    transform: translateY(-5px);
}

#typewriter {
    border-right: 2px solid var(--dark);
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    line-height: 1.2;
    padding-left: 5px;
    animation: blinkCursor 0.8s steps(2, start) infinite;
}

@keyframes blinkCursor {
    0%,
    49% {
        border-color: var(--dark);
    }

    50%,
    100% {
        border-color: transparent;
    }
}

/* UTIL CLASSES */

/* flexbox utils */
.flex-rows { display: flex; }
.flex-cols { display: flex; flex-direction: column; }
.flex-center-justify { justify-content: center; }
.flex-grow { flex-grow: 1; }

/* positional utils */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

.block { display: block; }
.inline-block { display: inline-block; }

.translate-center { transform: translateX(-50%) translateY(-50%); }
.abs-center { top:50%; left:50%; }
.abs-topleft { top:0; left:0; }
.abs-topcenter { top:0; left:50%; }
.abs-topright { top:0; right:0; }
.abs-centerleft { top:50%; left:0; }
.abs-centerright { top:50%; right:0; }
.abs-bottomleft { bottom:0; left:0; }
.abs-bottomcenter { bottom:0; left:50%; }
.abs-bottomright { bottom:0; right:0; }

/* image utils */
.contain { object-fit: contain; }
.cover { object-fit: cover; }

/* text utils */
.text-center { text-align: center; }
.text-justify { text-align: justify; }

/* margin utils */
.m5 { margin: 5px; }
.m10 { margin: 10px; }
.m15 { margin: 15px; }
.m20 { margin: 20px; }
.m25 { margin: 25px; }
.m30 { margin: 30px; }
.m40 { margin: 40px; }
.m50 { margin: 50px; }
.m100 { margin: 100px; }
.m150 { margin: 150px; }
.m200 { margin: 200px; }

.mtop5 { margin-top: 5px; }
.mtop10 { margin-top: 10px; }
.mtop15 { margin-top: 15px; }
.mtop20 { margin-top: 20px; }
.mtop25 { margin-top: 25px; }
.mtop30 { margin-top: 30px; }
.mtop40 { margin-top: 40px; }
.mtop50 { margin-top: 50px; }
.mtop100 { margin-top: 100px; }
.mtop150 { margin-top: 150px; }
.mtop200 { margin-top: 200px; }

.mbottom5 { margin-bottom: 5px; }
.mbottom10 { margin-bottom: 10px; }
.mbottom15 { margin-bottom: 15px; }
.mbottom20 { margin-bottom: 20px; }
.mbottom25 { margin-bottom: 25px; }
.mbottom30 { margin-bottom: 30px; }
.mbottom40 { margin-bottom: 40px; }
.mbottom50 { margin-bottom: 50px; }
.mbottom100 { margin-bottom: 100px; }
.mbottom150 { margin-bottom: 150px; }
.mbottom200 { margin-bottom: 200px; }

.mleft5 { margin-left: 5px; }
.mleft10 { margin-left: 10px; }
.mleft15 { margin-left: 15px; }
.mleft20 { margin-left: 20px; }
.mleft25 { margin-left: 25px; }
.mleft30 { margin-left: 30px; }
.mleft40 { margin-left: 40px; }
.mleft50 { margin-left: 50px; }
.mleft100 { margin-left: 100px; }
.mleft150 { margin-left: 150px; }
.mleft200 { margin-left: 200px; }

.mright5 { margin-right: 5px; }
.mright10 { margin-right: 10px; }
.mright15 { margin-right: 15px; }
.mright20 { margin-right: 20px; }
.mright25 { margin-right: 25px; }
.mright30 { margin-right: 30px; }
.mright40 { margin-right: 40px; }
.mright50 { margin-right: 50px; }
.mright100 { margin-right: 100px; }
.mright150 { margin-right: 150px; }
.mright200 { margin-right: 200px; }

/* padding utils */
.p5 { padding: 5px; }
.p10 { padding: 10px; }
.p15 { padding: 15px; }
.p20 { padding: 20px; }
.p25 { padding: 25px; }
.p30 { padding: 30px; }
.p40 { padding: 40px; }
.p50 { padding: 50px; }
.p100 { padding: 100px; }
.p150 { padding: 150px; }
.p200 { padding: 200px; }

.ptop5 { padding-top: 5px; }
.ptop10 { padding-top: 10px; }
.ptop15 { padding-top: 15px; }
.ptop20 { padding-top: 20px; }
.ptop25 { padding-top: 25px; }
.ptop30 { padding-top: 30px; }
.ptop40 { padding-top: 40px; }
.ptop50 { padding-top: 50px; }
.ptop0 { padding-top: 100px; }
.ptop150 { padding-top: 150px; }
.ptop200 { padding-top: 200px; }

.pbottom5 { padding-bottom: 5px; }
.pbottom10 { padding-bottom: 10px; }
.pbottom15 { padding-bottom: 15px; }
.pbottom20 { padding-bottom: 20px; }
.pbottom25 { padding-bottom: 25px; }
.pbottom30 { padding-bottom: 30px; }
.pbottom40 { padding-bottom: 40px; }
.pbottom50 { padding-bottom: 50px; }
.pbottom100 { padding-bottom: 100px; }
.pbottom150 { padding-bottom: 150px; }
.pbottom200 { padding-bottom: 200px; }

.pleft5 { padding-left: 5px; }
.pleft10 { padding-left: 10px; }
.pleft15 { padding-left: 15px; }
.pleft20 { padding-left: 20px; }
.pleft25 { padding-left: 25px; }
.pleft30 { padding-left: 30px; }
.pleft40 { padding-left: 40px; }
.pleft50 { padding-left: 50px; }
.pleft100 { padding-left: 100px; }
.pleft150 { padding-left: 150px; }
.pleft200 { padding-left: 200px; }

.pright5 { padding-right: 5px; }
.pright10 { padding-right: 10px; }
.pright15 { padding-right: 15px; }
.pright20 { padding-right: 20px; }
.pright25 { padding-right: 25px; }
.pright30 { padding-right: 30px; }
.pright40 { padding-right: 40px; }
.pright50 { padding-right: 50px; }
.pright100 { padding-right: 100px; }
.pright150 { padding-right: 150px; }
.pright200 { padding-right: 200px; }

/* width and height utils */
.w100VW { width: 100vw; }
.h100VH { height: 100vh; }

/* overflow utils */
.overflow-hidden { overflow: hidden; }

/* debug utils */
.debug1 { background-color: red; }
.debug2 { background-color: green; }
.debug3 { background-color: blue; }

/* Responsive Design */

@media (max-width: 768px) {    
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .grid-min300 { grid-template-columns: 1fr; }
    .light-icon-card { height: 350px; }
    
    .services-cards-grid {
        grid-template-columns: 1fr;
    }

    .grid-2col {
        grid-template-columns: 1fr;
    }
    .hero-short {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Fix right-aligned step numbers on mobile */
@media (max-width: 768px) {
    .process-step {
        text-align: center;
    }

    .process-step .step-number {
        margin: 0 auto 1rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}