/* =========================================================================
   FINAL WORKING STYLESHEET (MOBILE-FIRST )
========================================================================= */

/* --- General Styling & Variables --- */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@300;400;500&display=swap' );

:root {
  --primary-color: #2d4221; --secondary-color: #d4a373; --background-color: #fefae0;
  --text-color: #3a3a3a; --light-text-color: #ffffff; --accent-color: #606c38;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Roboto', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.7; overflow-x: hidden; }
.container { width: 100%; margin: 0 auto; padding: 0 1rem; }
h1, h2, h3 { font-family: 'Merriweather', serif; color: var(--primary-color); margin-bottom: 1rem; font-weight: 700; }
h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; }
p { margin-bottom: 1rem; font-weight: 300; }
.centered-large-paragraph { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; font-size: 1.1rem; }
.btn { display: inline-block; padding: 10px 18px; background-color: var(--secondary-color); color: var(--light-text-color); text-decoration: none; font-weight: 500; border-radius: 5px; transition: all 0.3s ease; border: 2px solid var(--secondary-color); }
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* --- Header & Mobile Navigation --- */
.main-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(45, 66, 33, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.7rem 0; transition: background-color 0.3s ease; }
.main-header.scrolled { background-color: rgba(45, 66, 33, 0.95); }
.main-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-family: 'Merriweather', serif; font-size: 1.4rem; color: var(--light-text-color); text-decoration: none; z-index: 1001; }
.logo span { color: var(--secondary-color); }
.breadcrumb-nav { display: none; z-index: -1; } /* Hidden on mobile */
.mobile-nav-toggle { display: block; background: none; border: none; color: white; font-size: 1.8rem; cursor: pointer; z-index: 1001; }
.main-nav ul { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #2d4221; flex-direction: column; justify-content: right; align-items: center; list-style: none; padding-top: 60px; }
.main-nav ul.is-open { display: flex;}
.main-nav ul li { margin: 0.1rem; }
.main-nav ul li a { color: #d4a373; text-decoration: none; font-size: 1.2rem; }

/* --- Sections --- */
.hero { height: 90vh; background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1444464666168-49d633b86797?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=3869' ) no-repeat center center/cover; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--light-text-color); padding: 60px 1rem 0; }
.hero-content h1 { color: var(--light-text-color); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-content p { font-size: 1rem; margin-bottom: 1.5rem; }
.favicon-img { width: 48px; height: 48px; margin-top: 1rem; filter: invert(100%); opacity: 0.8; }
.section { padding: 50px 0; }
.section-light { background-color: #ffffff; }
.section-dark { background-color: var(--primary-color); color: var(--background-color); }
.section-dark h2, .section-dark h3 { color: var(--light-text-color); }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title::after { content: ''; display: block; width: 50px; height: 3px; background: var(--secondary-color); margin: 1rem auto 0; }

/* --- Technology Tabs --- */
.content-tabs { display: flex; flex-direction: column; align-items: stretch; margin-bottom: 2rem; }
.tab-link { padding: 12px 16px; margin: 5px 0; cursor: pointer; background: transparent; border: 2px solid var(--accent-color); color: var(--accent-color); font-weight: 500; border-radius: 5px; transition: all 0.3s ease; text-align: center; }
.tab-link:hover, .tab-link.active { background: var(--accent-color); color: white; }
.content-pane { display: none; }
.content-pane.active { display: block; }

/* --- Grids (Mobile: Single Column) --- */
.tech-grid, .team-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.tech-card, .team-member { background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border: 1px solid #e0e0e0; text-align: center; }
.team-member h3, .team-member p { color: #3a3a3a; }
.team-member img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid var(--secondary-color); margin-bottom: 1rem; }

/* --- Contact & Footer --- */
.contact-form { max-width: 100%; margin: 0 auto; background: #fff; padding: 1.5rem; border-radius: 8px; }
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-weight: 500; }
.form-group input, .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.submit-btn { width: 100%; padding: 12px; border: none; background-color: var(--primary-color); color: white; font-size: 1rem; cursor: pointer; }
.main-footer { background-color: #1c1c1c; color: #ccc; padding: 2rem 1rem; text-align: center; }
.social-links a { color: #ccc; margin: 0 10px; font-size: 1.3rem; }
.cta-button { display: inline-block; background-color: #d4af37; color: #1a1a1a; padding: 8px 18px; border-radius: 5px; text-decoration: none; font-weight: bold; margin: 1rem 0; }

/* =============================================
   STALYTICS DEMO FOOTER BRANDING
   ============================================= */

.stalytics-branding-footer {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05); /* A very subtle background tint */
    border-left: 3px solid #00aaff; /* Using a brand accent color */
    border-radius: 4px;
    max-width: 600px; /* Keeps the text block from becoming too wide on large screens */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.stalytics-branding-footer p {
    margin: 0;
    padding: 0;
    font-size: 0.95rem; /* Slightly smaller to feel like a footnote */
    line-height: 1.6;
    color: #ccc; /* A lighter text color to distinguish it */
}

.stalytics-branding-footer strong {
    color: #fff; /* Make your brand name stand out */
    font-weight: 600;
}

.stalytics-branding-footer em {
    color: #00aaff; /* Use the accent color for the slogan */
    font-style: italic;
    display: block; /* Puts the slogan on its own line */
    margin-top: 0.5rem;
}

.stalytics-branding-footer .cta-button {
  display: inline-block;
  background-color: #d4af37;
  color: #001430;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  margin: 1rem 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
/* =========================================================================
   RESPONSIVE UPGRADES - Tablet and Desktop
========================================================================= */

/* Medium screens (tablets, 768px and up) */
@media (min-width: 768px) {
  .container { padding: 0 2rem; }
  h1 { font-size: 2.5rem; } h2 { font-size: 2rem; }
  .hero-content h1 { font-size: 2.5rem; }
  .content-tabs { flex-direction: row; justify-content: center; }
  .tab-link { margin: 5px; }
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large screens (desktops, 992px and up) */
@media (min-width: 992px) {
  .mobile-nav-toggle { display: none; }
  .breadcrumb-nav { display: flex; align-items: center; font-size: 0.9rem; color: #fafafa; }
  .breadcrumb-nav ol { padding: 0; margin: 0; display: flex; align-items: center; }
  .breadcrumb-nav li { display: flex; align-items: center; }
  .breadcrumb-nav li::after { content: "›"; margin: 0 0.75rem; color: #aaa; }
  .breadcrumb-nav li:last-child::after { content: ""; }
  .breadcrumb-nav a { color: #fff; text-decoration: none; }
  .main-header { padding: 0px; }
  .main-nav ul { display: flex; position: static; width: auto; background: transparent; flex-direction: row; margin: 0px; padding: 20px; }
  .main-nav ul li { margin: 0 0 0 20px; }
  .main-nav ul li a { font-size: 1rem; padding-bottom: 3px; }
  .main-nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: width 0.4s ease; }
  .main-nav ul li a:hover::after { width: 100%; }
  h1 { font-size: 3.5rem; } h2 { font-size: 2.5rem; }
  .hero { height: 100vh; }
  .hero-content h1 { font-size: 3rem; }
  .tech-grid { grid-template-columns: repeat(3, 1fr); }
}

/* =============================
   Silktide Cookie Banner Fix
============================= */
#silktide-cookie-consent-wrapper {
  background-color: #000;
  color: #f0f0f0;
}

/* =============================
   Silktide Modal & Backdrop Fix
============================= */

#silktide-wrapper {
  --backdropBackgroundColor: rgba(0, 0, 0, 0.9); 
  --backdropBackgroundBlur: 0px;
}

#silktide-modal {
  background-color: #1a1a1a; 
  border: 1px solid #ffc107;
}
#silktide-modal .switch__pill {
  background: #ffffff; 
}
#silktide-modal .switch__dot {
  background: #111111;
}
#silktide-modal .switch input:checked + .switch__pill {
  background: #ffc107;
}

#silktide-modal .switch__on,
#silktide-modal .switch__off {
  color: #111111;
  position: absolute;
  transition: opacity 150ms ease-out;
}

#silktide-modal .switch__off {
  opacity: 1;
}
#silktide-modal .switch__on {
  opacity: 0;
}

#silktide-modal .switch input:checked ~ .switch__off {
  opacity: 0;
}
#silktide-modal .switch input:checked ~ .switch__on {
  opacity: 1;
}

#silktide-modal h1, 
#silktide-modal p, 
#silktide-modal legend {
  color: #f0f0f0 !important;
}


#silktide-cookie-icon svg {
  fill: #ffc107;
}