/* Codesauce v1.0.0 */

:root {
    --cs-dark: #1d1b32;
    --cs-dark-card: #2e2c56;
    --cs-dark-overlay: #27244fc9;
    --cs-orange: #f9604e;
    --cs-teal: #41afbb;
    --cs-teal-border: #3696a1;
    --cs-white: #fff;
    --cs-text: #d1d5db;
    --cs-gradient: linear-gradient(180deg, rgba(29,27,50,1) 0%, rgba(42,38,78,1) 25%, rgba(40,36,83,1) 50%, rgba(29,27,50,1) 75%, rgba(29,27,50,1) 100%);
    --cs-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --cs-radius: 10px;
}

/* ── Base ────────────────────────────────────────────────────────── */

html {
    background: var(--cs-gradient);
    font-family: var(--cs-font);
    font-size: 16px;
}

body {
    color: var(--cs-text);
    background: transparent;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--cs-white); line-height: 1; }
h1, .h1 { font-size: 5rem; }
h2 { font-size: 2.5rem; }
h3, h4, h5, h6 { font-size: 2rem; }
p { font-size: 1.5rem; }
ol li, ul li { font-size: 1rem; margin-bottom: 1rem; }
label { font-size: 1.5rem; }
a { color: var(--cs-teal); }
a:hover { color: var(--cs-white); }

.js .animate { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.animate.visible { opacity: 1; transform: none; transition: transform 0.3s; }
.animate:hover { transform: scale(1.05); }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn-cs {
    padding: 0.75rem 2rem;
    font-size: 1.5rem;
    color: var(--cs-white);
    background: var(--cs-teal);
    border: none;
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}

.btn-cs:hover { color: var(--cs-white); opacity: 0.9; }

.btn-cs-outline {
    padding: 0.75rem 2rem;
    font-size: 1.5rem;
    color: var(--cs-white);
    background: transparent;
    border: 2px solid var(--cs-teal);
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.btn-cs-outline:hover { background: var(--cs-teal); color: var(--cs-white); }

/* ── Header ──────────────────────────────────────────────────────── */

.site-header {
    padding: 1rem 0;
    z-index: 9999;
}

.site-header .logo img { max-width: 150px; }

.site-header .nav-link {
    color: var(--cs-white);
    font-size: 1.25rem;
    font-weight: 400;
    padding: 0.5rem 0.75rem;
}

.site-header .nav-link:hover { color: var(--cs-teal); }

.btn-quote-header {
    padding: 0.5rem 1.5rem;
    font-size: 1.25rem;
    color: var(--cs-white);
    background: var(--cs-teal);
    border-radius: 5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.btn-quote-header:hover { color: var(--cs-white); opacity: 0.9; }

/* ── Mobile Menu (Offcanvas) ─────────────────────────────────────── */

.offcanvas {
    background: #2f2b53 !important;
    color: var(--cs-white);
}

.offcanvas .nav-link {
    color: var(--cs-white);
    font-size: 2rem;
    text-align: center;
    padding: 0.75rem 0;
}

.offcanvas .nav-link:hover { color: var(--cs-teal); }

.offcanvas .btn-close { filter: invert(1); }

/* ── Hero ────────────────────────────────────────────────────────── */

.hero { padding: 10rem 0; position: relative; overflow: hidden; }

.hero h1 { color: var(--cs-white); font-weight: 700; margin-bottom: 1rem; }

.hero p.lead { font-size: 1.5rem; color: var(--cs-white); margin-bottom: 1.5rem; }

.hero .hero-email {
    max-width: 400px;
    display: flex;
    gap: 0;
}

.hero .hero-email input[type="email"] {
    flex: 1;
    padding: 0.75rem 1rem;
    font-size: 1.25rem;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
}

.hero .hero-email .btn-cs {
    border-radius: 0 5px 5px 0;
    padding: 0.75rem 1.5rem;
    white-space: nowrap;
}

.hero-image img { width: 100%; max-width: 700px; height: auto; }

/* ── Badges ──────────────────────────────────────────────────────── */

.badges { padding: 5rem 0 0 0; text-align: center; }
.badges img { max-width: 200px; width: 100%; height: auto; margin-bottom: 1rem; }

/* ── Services ────────────────────────────────────────────────────── */

.services { padding: 5rem 0; }

.service-card {
    background: var(--cs-dark-card);
    border-radius: var(--cs-radius);
    padding: 2rem;
    text-align: center;
    height: 100%;
}

.service-card img { max-width: 200px; width: 100%; height: auto; margin-bottom: 1.5rem; }
.service-card h3 { margin-bottom: 0.5rem; }
.service-card p { color: var(--cs-text); }
.service-card a { text-decoration: none; color: inherit; }
.service-card a:hover { color: inherit; }

/* ── Case Studies ────────────────────────────────────────────────── */

.case-studies { padding: 5rem 0; }
.case-studies h2 { text-align: center; margin-bottom: 3rem; }

.case-study-card {
    background: var(--cs-dark-card);
    border-radius: var(--cs-radius);
    overflow: hidden;
    height: 100%;
}

.case-study-card img { width: 100%; height: 200px; object-fit: cover; }
.case-study-card .card-body { padding: 1.5rem; }
.case-study-card h3 { font-size: 1.5rem; margin: 0; }
.case-study-card a { text-decoration: none; color: inherit; }
.case-study-card a:hover { color: inherit; }

/* ── Team ────────────────────────────────────────────────────────── */

.team {
    padding: 10rem 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.team::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--cs-dark-overlay);
}

.team .container { position: relative; z-index: 1; }
.team h2 { text-align: center; margin-bottom: 1rem; }
.team p { color: var(--cs-white); text-align: center; font-size: 1.5rem; }

.team-member {
    background: var(--cs-dark-card);
    padding: 1rem 1rem 2rem 1rem;
    margin: 1rem 0;
    border-radius: var(--cs-radius);
    text-align: center;
    height: 100%;
}

.team-member img { width: 200px; height: auto; margin: 0 0 1rem 0; }
.team-member .name { font-weight: 700; font-size: 1.25rem; color: var(--cs-white); }
.team-member .position { margin-bottom: 1rem; color: var(--cs-teal); font-weight: 700; }
.team-member .bio { text-align: center; font-size: 1rem; color: var(--cs-text); }

/* ── Reviews ─────────────────────────────────────────────────────── */

.reviews { padding: 5rem 0; }
.reviews h2 { text-align: center; margin-bottom: 3rem; }

.review-card {
    background: var(--cs-dark-card);
    border-radius: var(--cs-radius);
    padding: 2.5rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.review-card .stars { color: #f9c922; font-size: 1.5rem; margin-bottom: 1rem; }
.review-card p { font-size: 1.25rem; color: var(--cs-text); font-style: italic; }
.review-card .reviewer { font-weight: 700; color: var(--cs-white); font-size: 1.25rem; margin-top: 1rem; }
.review-card .review-source { color: var(--cs-teal); font-size: 1rem; margin-top: 0.25rem; }

.carousel-control-prev-icon,
.carousel-control-next-icon { filter: invert(0); }

.carousel-indicators [data-bs-target] { background-color: var(--cs-teal); }

/* ── Prices ──────────────────────────────────────────────────────── */

.prices { padding: 5rem 0; }
.prices h2 { text-align: center; margin-bottom: 1rem; }
.prices > .container > p { color: var(--cs-white); text-align: center; font-size: 1.5rem; }

.pricing-card {
    color: var(--cs-white);
    text-align: left;
    list-style-type: none;
    margin: 0;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 8px;
    overflow: hidden;
    background: #2e2c56;
}

.pricing-card li { padding: 1rem 1.5rem 0 1.5rem; }
.pricing-card li:last-child { border-bottom: 0; }
.pricing-card .title { font-size: 2rem; font-weight: 700; color: var(--cs-white); padding: 0 1.5rem 0 1.5rem; }
.pricing-card .description { color: var(--cs-teal); padding: 0 1.5rem 1rem 1.5rem; font-weight: 700; }
.pricing-card .pricing { font-size: 3rem; font-weight: 700; }
.pricing-card .pricing .from { font-size: 1.25rem; margin-right: -10px; }

/* ── Green (Eco) ─────────────────────────────────────────────────── */

.green { padding: 15rem 0 10rem 0; text-align: center; }
.green img { max-width: 100%; height: auto; margin-bottom: 2rem; }
.green h2 { color: var(--cs-white); text-align: left; line-height: 1; margin-bottom: 1rem; }
.green p { color: var(--cs-white); text-align: left; }
.green p a { color: var(--cs-teal); font-weight: 700; }

/* ── Contact Section ─────────────────────────────────────────────── */

.contact-section { padding: 5rem 0; }
.contact-section h2 { text-align: center; margin-bottom: 2rem; }

/* ── Contact Form ────────────────────────────────────────────────── */

.contact-form .form-control,
.contact-form .form-select {
    background: var(--cs-dark-card);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--cs-white);
    font-size: 1.25rem;
    padding: 0.75rem 1rem;
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    background: var(--cs-dark-card);
    border-color: var(--cs-teal);
    color: var(--cs-white);
    box-shadow: 0 0 0 0.2rem rgba(65,175,187,0.25);
}

.contact-form .form-control::placeholder { color: rgba(255,255,255,0.4); }

.contact-form label { color: var(--cs-white); font-size: 1.25rem; font-weight: 700; }

.contact-form .form-check-label { font-size: 1rem; font-weight: 400; color: var(--cs-text); }
.contact-form .form-check-label a { color: var(--cs-teal); }

/* ── FAQs (Accordion) ───────────────────────────────────────────── */

.faqs { padding: 5rem 0; }
.faqs h2 { text-align: center; margin-bottom: 3rem; }

.faqs .accordion-item {
    background: var(--cs-dark-card);
    border: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 0.5rem;
    border-radius: var(--cs-radius) !important;
}

.faqs .accordion-button {
    background: var(--cs-dark-card);
    color: var(--cs-white);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--cs-radius) !important;
}

.faqs .accordion-button:not(.collapsed) { background: var(--cs-dark-card); color: var(--cs-teal); box-shadow: none; }
.faqs .accordion-button::after { filter: invert(1); }
.faqs .accordion-button:focus { box-shadow: none; }
.faqs .accordion-body { color: var(--cs-text); font-size: 1.25rem; }

/* ── Single Case Study ───────────────────────────────────────────── */

.case-study-single { padding: 5rem 0; }
.case-study-single h1 { margin-bottom: 2rem; }
.case-study-single h2 { font-size: 2rem; margin-bottom: 1rem; }
.case-study-single p { color: var(--cs-text); }
.case-study-single img { border-radius: var(--cs-radius); width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

/* ── About Page ──────────────────────────────────────────────────── */

.about-page { padding: 5rem 0 10rem 0; }
.about-page h1 { text-align: center; color: var(--cs-white); }
.about-page .lead { font-size: 1.5rem; text-align: center; color: var(--cs-white); margin-bottom: 2.5rem; }

/* ── Page Content ────────────────────────────────────────────────── */

.page-content { padding: 5rem 0; }
.page-content h1 { margin-bottom: 2rem; }
.page-content p, .page-content li { color: var(--cs-text); }
.page-content a { color: var(--cs-teal); }
.page-content img { max-width: 100%; height: auto; border-radius: var(--cs-radius); }

/* ── Archive Pages ───────────────────────────────────────────────── */

.archive-page { padding: 5rem 0; }
.archive-page h1 { text-align: center; margin-bottom: 3rem; }

.area-link {
    display: block;
    background: var(--cs-dark-card);
    border-radius: var(--cs-radius);
    padding: 1.5rem;
    text-align: center;
    color: var(--cs-white);
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 700;
}

.area-link:hover { background: var(--cs-teal); color: var(--cs-white); }

/* ── Blog ────────────────────────────────────────────────────────── */

.blog-card {
    background: var(--cs-dark-card);
    border-radius: var(--cs-radius);
    padding: 2rem;
    height: 100%;
}

.blog-card h3 { font-size: 1.5rem; }
.blog-card p { color: var(--cs-text); }
.blog-card a { text-decoration: none; color: inherit; }
.blog-card a:hover { color: inherit; }
.blog-card .badge { background: var(--cs-teal); font-size: 0.85rem; }

/* ── Thanks Pages ────────────────────────────────────────────────── */

.thanks-page { padding: 10rem 0; text-align: center; }
.thanks-page h1 { margin-bottom: 1rem; }
.thanks-page p { font-size: 1.5rem; color: var(--cs-white); }

/* ── 404 ─────────────────────────────────────────────────────────── */

.error-404 { padding: 10rem 0; text-align: center; }
.error-404 h1 { font-size: 8rem; margin-bottom: 1rem; }
.error-404 p { font-size: 1.5rem; color: var(--cs-text); }

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer { padding: 5rem 0 10rem 0; color: var(--cs-white); }
.site-footer a { color: var(--cs-white); text-decoration: none; font-size: 1.25rem; display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--cs-teal); }
.site-footer p { color: var(--cs-white); }
.site-footer .footer-heading { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { font-size: 1.25rem; }
.site-footer img { max-width: 200px; width: 100%; height: auto; margin-bottom: 1.5rem; }
.site-footer .company-info { font-size: 1.25rem; }

/* ── WhatsApp Widget ─────────────────────────────────────────────── */

.whatsapp { position: fixed; bottom: 2.5%; right: 2.5%; width: 75px; height: 75px; z-index: 9999; }
.whatsapp img { width: 75px; height: 75px; }

/* ── Sitemap ─────────────────────────────────────────────────────── */

.sitemap-page { padding: 5rem 0; }
.sitemap-page h1 { margin-bottom: 2rem; }
.sitemap-page h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; }
.sitemap-page ul { list-style: none; padding: 0; }
.sitemap-page li { padding: 0.25rem 0; }
.sitemap-page a { color: var(--cs-teal); font-size: 1.25rem; }

/* ── Responsive: Medium (768px - 991px) ──────────────────────────── */

@media (max-width: 991.98px) {
    h1, .h1 { font-size: 3rem; }
    .hero { padding: 5rem 0; }
    .hero-image { text-align: center; margin-top: 2rem; }
    .hero-image img { max-width: 500px; }
    .hero .hero-email { max-width: 100%; }
    .badges img { max-width: 200px; }
    .team { background-attachment: scroll; }
    .green { padding: 5rem 0; }
}

/* ── Responsive: Small (< 768px) ─────────────────────────────────── */

@media (max-width: 767.98px) {
    html { font-size: 14px; }
    h1, .h1 { font-size: 3rem; }
    .hero { padding: 3rem 0; }
    .hero h1 { font-size: 3rem; }
    .hero .hero-email { flex-direction: column; gap: 0.5rem; }
    .hero .hero-email input[type="email"] { border-radius: 5px; }
    .hero .hero-email .btn-cs { border-radius: 5px; }
    .team-member { min-height: auto; }
    .pricing-card .pricing { font-size: 2.5rem; }
    .green h2 { text-align: center; }
    .green p { text-align: center; }
    .site-footer { text-align: center; }
    .site-footer .footer-heading { margin-top: 2rem; }
}