/* Fresh Juice font */
@font-face {
    font-family: 'Fresh Juice';
    src: url('../fonts/FreshJuice-Regular.woff2') format('woff2'),
         url('../fonts/FreshJuice-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global font & letter-spacing */
body, h1, h2, p, input, textarea, button {
    font-family: 'Fresh Juice', Arial, sans-serif;
    letter-spacing: 1.2px;
}

/* Root variables */
:root {
    --bg: #f5f3eb;
    --accent: #e74c3c;
    --text: #222;
    --muted: #555;
    --radius: 30px;
}

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

/* Body */
body {
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    font-size: 18px;
}

/* Container */
.container { max-width:700px; margin:0 auto; padding:1.5rem; }

/* Logo */
.logo {
    margin-top: 6rem; /* adjust 4rem to your preferred spacing */
    display: block;
    max-width: 324px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}



.by-trenxy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem; /* space above the section */
}

.by-trenxy span {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: var(--muted);
    gap: 0.3rem;
}

.by-trenxy hr {
    flex: 1;
    border: none;
    border-top: 1px solid #ccc;
    margin: 0;
}

.trenxy-logo {
    height: 20px; /* adjust as needed */
    width: auto;
}


/* Headings */
h1 {
    font-size: 4.8rem;
    line-height: 1.2;
    color: var(--accent);
}

h2 {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: var(--accent);
}

h3 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--accent);
}


/* Intro Section */
.intro { text-align:center; padding:2rem 1rem; }
.hero-images { display:flex; justify-content:center; gap:2rem; margin-bottom:1.5rem; }
.hero-images img { width:200px; height:auto; border-radius:var(--radius); object-fit:cover; }
.cta-buttons { display:flex; justify-content:center; gap:1rem; margin-bottom:2rem; }
.btn { display:inline-block; padding:.75rem 1.5rem; border-radius:999px; text-decoration:none; font-size:1rem; cursor:pointer; color: var(--text); }
.btn-outline { border:2px solid var(--accent); color:var(--accent); background:none; }
.btn-solid { background:var(--accent); color:#fff; border:2px solid var(--accent); }

/* How It Works */
.how { text-align:center; padding:2rem 1rem; }
.how ol { list-style:none; color:var(--muted); font-size:1rem; }
.how li { margin:.75rem 0; }

/* Custom Request Form */
.custom-request { padding:2rem 1rem; }
.quote-form { display:grid; gap:1rem; }
.quote-form label { display:flex; flex-direction:column; font-size:1rem; color:var(--muted); }
.quote-form input, .quote-form textarea { padding:.75rem; border-radius:var(--radius); border:1px solid #ddd; font-size:1rem; color: var(--text); }
.file-upload { background:#eee; padding:.75rem; border-radius:var(--radius); text-align:center; cursor:pointer; }
.file-upload input { display:none; }
.quote-form .btn { margin-top:1rem; justify-self:center; font-size:1rem; }

/* Gallery Section */
.gallery { text-align:center; padding:2rem 1rem; }
.gallery .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.gallery img { width:100%; border-radius:var(--radius); object-fit:cover; }

/* Contact Section */
.contact { text-align:center; padding:2rem 1rem; font-size:1rem; color: var(--text); }

/* Footer */
.site-footer { text-align:center; padding:1.5rem 1rem; color:var(--muted); font-size:0.95rem; }

/* Responsive */
@media(max-width:600px){
    body { font-size:16px; }
    h1 { font-size:2rem; }
    h2 { font-size:1.5rem; }
    .hero-images { flex-direction:column; gap:1rem; }
    .hero-images img { width:100%; max-width:250px; margin:0 auto; }
}

/* Modal */
.modal { display:none; position:fixed; z-index:999; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgba(0,0,0,0.6); }
.modal-content { background:#fff; margin:15% auto; padding:30px; border-radius:10px; width:90%; max-width:400px; text-align:center; }
.close { color:#aaa; float:right; font-size:24px; font-weight:bold; cursor:pointer; }
.close:hover { color:#000; }

.success-animation { width:80px; height:80px; margin:0 auto 20px; display:none; }
.checkmark { width:80px; height:80px; stroke:#4BB543; stroke-width:4; stroke-miterlimit:10; fill:none; animation:pop 0.5s ease-out; }
.checkmark-circle { stroke-dasharray:166; stroke-dashoffset:166; stroke-width:4; stroke-miterlimit:10; stroke:#4BB543; fill:none; animation:stroke 0.6s forwards; }
.checkmark-check { transform-origin:50% 50%; stroke-dasharray:48; stroke-dashoffset:48; animation:stroke 0.4s 0.6s forwards; }

@keyframes stroke { 100% { stroke-dashoffset:0; } }
@keyframes pop { 0% { transform:scale(0); } 80% { transform:scale(1.2); } 100% { transform:scale(1); } }