/*
  @Author: ThemeMascot
  @URL: http://ThemeMascot.com

  This is the file where you can add your custom styles to change the look of
  theme. But don't modify main-style.css file.

/* ============================================================
   ELEN CONSULTING STYLE.CSS LEGEND & SECTION MAP
   ------------------------------------------------------------
   Purpose:
   - This file contains all custom CSS overrides and layout styles
     for the legacy Bootstrap 3 + jQuery theme (ThemeMascot base)

   SECTION MAP:
   ------------------------------------------------------------
   1.  Global Tokens & Typography .............. 
       - :root color variables, body font (Roboto), link styles,
         heading scales (h1-h6), responsive typography.

   2.  Header / Navigation ..................... 
       - .navbar, .header-nav a, hero/heading consistency.

   3.  Intro / Lead Text ....................... 
       - #homepage-intro, .lead.justified, text spacing.

   4.  Services Section (Homepage) ............. 
       - .services-section, .services-grid--grid (CSS Grid layout),
         .service-card, .service-icon, .service-title, .service-text.
         Includes tablet & desktop media queries (576px / 992px).

   5.  Featured Projects Section ............... 
       - .featuredprojects-section and related title styles.

   6.  Footer (ELEN – dark theme) .............. 
       - #footer tokens, layout, colors, quick links, social icons,
         responsive tweaks, and mobile stacking rules (991px).

   ------------------------------------------------------------
    Notes:
   - Colors: Adjust via tokens in :root or #footer :root block.
   - Type: Edit clamp() values for heading sizes; weights below.
   - Layout tweaks: Use existing @media queries (575.98 / 576 / 992).
   - Avoid inline HTML edits where !important is present.
   - Reference this map before any modification.
   ============================================================ */

/* ============================================================
   COLOR TOKEN REFERENCE 
   ------------------------------------------------------------
   All global and footer colors are defined as CSS variables 
   within the :root selector. Adjust values here to change colors 
   sitewide, instead of editing individual selectors.
   ============================================================ */

/* ---------- GLOBAL TOKENS  ---------- */
:root {
	/* Global */
  --color-text:       #2A2A2A;   /* Default paragraph/body text */
  --color-heading:    #111111;   /* Headings (H1-H6) */
  --color-muted:      #555555;   /* Subtle text, captions, secondary labels */
  --color-link:       #2d2e4b;   /* Primary link color (matches brand blue tone) */
  --color-link-hover: #20232d;   /* Link hover/focus color (darker accent) */
  
	/* Footer */
  --footer-bg:         #2d2e4b;
  --footer-text:       #dddddd;
  --footer-text-hover: #ffffff;
  --footer-gap:        15px;
}

/* ---------- BRAND REFERENCE (for visual alignment) ----------
   #2d2e4b - Primary ELEN blue (used in footer, links, buttons)
   #232437 - Neutral gray used in titles, cards, and icons
   #f9f9fb - Light gray background used for cards/sections
   #111111 / #2A2A2A - Main heading/body text tones
   ------------------------------------------------------------
   Best Practices:
   - Change only hex values, keep variable names unchanged.
   - To apply a new color scheme, modify these tokens.
   - Avoid duplicating color definitions elsewhere in style.css.
   ============================================================ */

/* ============================================================
   TYPOGRAPHY TOKEN REFERENCE 
   ------------------------------------------------------------
   Defines the typographic hierarchy and responsive behavior
   of all text styles across the site. Built on the Roboto font
   family and a responsive clamp scale for flexible sizing.
   ============================================================ */

/* Your custom css codes start here: */
.vimeo-fullScreen-bg .fluid-width-video-wrapper {
  padding-top: 0;
  width: auto;
}

#map {
  height: 400px; /* The height is 400 pixels */
}

/* ==============================
   TYPOGRAPHY
   (global + headings + header/nav)
   ============================== */

/* Brandable tokens (easy tweaks) */
/* Base */
html{ font-size:100%; } /* 16px */

body{
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.625;
  color: var(--color-text);
  letter-spacing: 0.2px;
}

/* Links */
a{
  color: var(--color-link);
  text-decoration: none;
  transition: color .3s ease;
}
a:hover, a:focus{ color: var(--color-link-hover); }

/* Paragraphs */
p{
  font-size: 1rem; /* 16px */
  font-weight: 400;
  color: var(--color-muted);
  margin: 0 0 1.2em;
}

/* --------------------------------
   Headings (Roboto, responsive scale)
   -------------------------------- */
h1, h2, h3, h4, h5, h6{
  font-family: "Roboto", sans-serif;
  color: var(--color-heading);
  margin: 0 0 .6em;
  line-height: 1.25;
  letter-spacing: -.2px;
}

/* Sizes */
h1{ font-size: clamp(2rem, 3vw + 1rem, 3rem); }          /* 32→48px */
h2{ font-size: clamp(1.5rem, 1.8vw + .7rem, 1.875rem); } /* 24→30px */
h3{ font-size: clamp(1.5rem, 1.6vw + .7rem, 1.75rem); }  /* 24→28px */
h4{ font-size: clamp(1.25rem, 1vw + .7rem, 1.5rem); }    /* 20→24px */
h5{ font-size: clamp(1.125rem, .6vw + .8rem, 1.25rem);}  /* 18→20px */
h6{
  font-size: 1rem;                                      /* 16px */
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Mobile adjustments for headings (hero text, etc.) */
@media (max-width: 575.98px) {
  h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem);   /* ~28–40px */
    line-height: 1.1;
    letter-spacing: 0;                        /* reset tight spacing */
  }

  h2 {
    font-size: clamp(1.125rem, 5vw, 1.5rem);  /* ~18–24px */
    line-height: 1.3;
  }
}

/* Weights */
h1, h2{ font-weight: 700; } /* Bold for top levels */
h3, h4{ font-weight: 500; } /* Medium for mids */
h5, h6{ font-weight: 400; } /* Regular for small headings */

/* Optional variants */
h1.light, h2.light, h3.light, h4.light, h5.light, h6.light{
  font-weight: 300;
  color: #444;
}

/* ------------------------------
   THEME-SPECIFIC HEAD / HERO / NAV
   (keeps your selector coverage)
   ------------------------------ */
.navbar,
.navbar a,
.menuzord-menu > li > a,
.header-nav a,
.home-content h1,
.home-content h5,
.large,
.heading,
.media-heading{
  font-family: "Roboto", sans-serif;
}

/* Make header/hero/nav default to Roboto Medium */
.navbar,
.navbar a,
.navbar-nav > li > a,
.navbar-brand,
.header-nav,
.header-nav a{
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;   /* Matches your previous intent */
  letter-spacing: 0.02em;
}

/* Keep your lead override (no italics) */
p.lead{ font-style: normal !important; }

/* ========= Intro Text Alignment (homepage) ========= */
#homepage-intro {
  padding-top: 30px;   /* adjust top space */
  padding-bottom: 0px; /* adjust bottom space */
}

.lead.justified {
  text-align: justify;
  text-justify: inter-word;
}
/* ========= Featured Projects Section (homepage) ========= */
.featuredprojects-section {
  padding: 20px 0;
  background: #ffffff;
}

/* Title + subtitle */
.featuredprojects-section .section-title {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 6px;
  color: #232437;
  text-align: center;
}

.featuredprojects-section .section-subtitle {
  margin: 0 auto 20px;
  font-size: 16px;
  line-height: 1.6;
  color: #232437;
  max-width: 760px;
  text-align: center;
}


/* =========================================
   FOOTER
   ========================================= */
/* Base skin */
#footer{
  background-color: var(--footer-bg);
  color: var(--footer-text);
  padding: 56px 0 28px;
  font-size: 14px;
  line-height: 1.3;
}

/* If an inline style or .text-white slipped in, neutralize it */
#footer.text-white, 
#footer.text-white *{
  color: var(--footer-text) !important;
}
#footer[style]{
  background-color: var(--footer-bg) !important;
}

/* Top-aligned main row (logo/contacts/address/links) */
#footer .footer-main,
#footer .container > .row:first-child{
  display: flex;
  align-items: flex-start; /* top-align columns */
}

/* Normalize spacing for columns */
#footer .mb-40{ margin-bottom: 24px !important; }
#footer .mt-40{ margin-top: 24px !important; }

/* Headings in footer */
#footer h5,
#footer h6,
#footer .footer-title{
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 var(--footer-gap);
  color: var(--footer-text);
}

/* Body text elements */
#footer p,
#footer address{
  margin: 0 0 var(--footer-gap);
  color: var(--footer-text);
}

/* Tagline under the logo */
#footer .footer-tagline{
  font-size: 14px;
  margin: 0 0 var(--footer-gap);
  color: var(--footer-text);
}

/* Links default gray, white on hover (mirrors header dark nav) */
#footer a{
  color: var(--footer-text);
  text-decoration: none;
  transition: color .25s ease;
}
#footer a:hover,
#footer a:focus,
#footer a:active{
  color: var(--footer-text-hover);
}

/* Quick Links list */
#footer .footer-links{
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 30px;
  row-gap: 11px;
}
#footer .footer-links li{ margin: 0; white-space: nowrap;}
#footer .footer-links a{
  font-size: 14px;       
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Phone/email link size (not uppercase) */
#footer .footer-phone,
#footer .footer-email{
  font-size: 14px;
  text-transform: none;
  letter-spacing: 12;
}

/* Social icons (Font Awesome) — inherit gray, white on hover */
#footer .footer-social{ margin-top: var(--footer-gap); }
#footer .footer-social i,
#footer .footer-social .fa{
  font-size: 16px;
  color: var(--footer-text);
  transition: color .25s ease;
}
#footer .footer-social i:hover,
#footer .footer-social .fa:hover{
  color: var(--footer-text-hover);
}

/* Copyright (inside footer) */
#footer .copyright{
  margin-top: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--footer-text);
}

/* ---------- Responsive tweaks ---------- */
@media (max-width: 575.98px){
/* 1) Stop the row from being flex on phones – let columns stack full-width */
#footer .container > .row:first-child{
  display: block;                 /* was flex on desktop */
}

/* 2) Make each column take the full width and add comfy spacing */
#footer .footer-main > [class*="col-"]{
  width: 100%;
  margin-bottom: 20px;
  text-align: center;             /* center text per your design */
}

/* 3) Quick Links: switch grid to a single column on mobile */
#footer .footer-links{
  display: grid;
  grid-template-columns: 1fr;     /* was repeat(2, max-content) */
  column-gap: 0;
  row-gap: 10px;
  justify-content: center;        /* center the single column */
}

#footer .footer-links a{
  font-size: 14px;                /* keep readable */
  letter-spacing: 0.3px;          /* a bit less than desktop’s 0.5px */
}

/* 4) Center the extras */
#footer .footer-social,
#footer img,
#footer .footer-title,
#footer p,
#footer address{
  text-align: center;
}

/* 5) Small alignment nudge */
#footer .footer-social{ margin-top: 8px; }
#footer address{ margin-top: 8px;
}
}

/* ===== Kill decorative dash/line from theme, sitewide ===== */
.lead::after,
.lead::before,
.section-subtitle::after,
.section-subtitle::before,
.text-center.lead::after,
.text-center.lead::before,
.text-center.lead.section-subtitle::after,
.text-center.lead.section-subtitle::before,
p.lead.justified.section-subtitle::after,
p.lead.justified.section-subtitle::before{
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
}