/*
Theme Name: RS EN Blog
Author: RAINTY SQUARE IT SOLUTIONS
Description: Custom blog theme with clean design, hero section, featured articles, CTA, and footer.
Version: 1.6 (Cleaned, Fixed Layouts & Footer)
*/

/* -------------------- Root Variables -------------------- */
:root {
  --brand: #FC5A5A;
  --brand-600: #FC5A5A;
  --ink: #0f172a;
  --muted: #0f2d52;
  --surface: #ffffff;
  --bg: #f5f7fb;
  --blue: #2563eb;
  --border: #e2e8f0;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 10px 25px rgba(13,38,76,.12);
  --shadow-soft: 0 6px 16px rgba(13,38,76,.08);
  --container: 1160px;
  --footer-bg: #0f2d52; 
  --footer-text: #CFE0FF;
  --footer-dark-blue: #0f2d52; 
  --footer-light-text: #A9BDDF;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
img { 
  max-width: 100%; 
  display: block; 
}
.center-img {
  display: block; 
  margin: 0 auto; 
  max-width: 100%; 
  height: auto; 
  border-radius: 12px; 
  margin-top: 20px;
  margin-bottom: 20px;
}
/* -------------------- Global Helpers -------------------- */
/* --- Popular Page Search Bar --- */
.popular-search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 25px 0 40px;
}

.popular-search-input {
  width: 60%;
  max-width: 500px;
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 50px;
  outline: none;
  transition: border-color 0.3s;
}

.popular-search-input:focus {
  border-color: #0073aa;
}

.popular-search-btn {
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 22px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.popular-search-btn:hover {
  background-color: #005f87;
}

.search-feedback {
  text-align: center;
  font-size: 16px;
  color: #333;
  margin-bottom: 25px;
}

.popular-pagination {
  text-align: center;
  margin-top: 40px;
}

.popular-pagination a,
.popular-pagination span {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  background: #f1f1f1;
  color: #333;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.3s;
}

.popular-pagination a:hover {
  background: #333;
  color: #fff;
}

.popular-pagination .current {
  background: #333;
  color: #fff;
  font-weight: bold;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  background: var(--surface);
  color: var(--ink);
}
.btn--primary {
  background: var(--blue);
  color: #fff;
}
.btn--light {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
}
.btn--sm { padding: .55rem .9rem; font-size: 14px; }
.btn--viewall,
.btn--morearticles {
  background: transparent;
  color: #1565D8;
  border: 1px solid #1565D8;
  box-shadow: none;
  border-radius: 6px;
}
.btn--viewall::after,
.btn--morearticles::after {
  content: "→";
  margin-left: 6px;
  font-size: 18px;
  line-height: 1;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f9f0;
  color: #36B37E;
  border-radius: 999px;
  font-weight: 800;
  padding: .25rem .6rem;
  font-size: .72rem;
  letter-spacing: .02em;
}
.case-card__content {
  position: relative;
  background: var(--surface);
  padding: 1.5rem;
  border-radius: 0 0 var(--radius) var(--radius);
}

.badge-left {
  position: absolute;
  top: 20px;
  left: 20px;
  background: #e8f9f0;
  color: #36B37E;
  border-radius: 999px;
  font-weight: 800;
  padding: .25rem .6rem;
  font-size: .72rem;
  letter-spacing: .02em;
  z-index: 2;
}

.avatar {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--brand);
  display: inline-block;
  margin-top: 2px;
}

/* -------------------- Header -------------------- */
.main-header {
  background-color: var(--brand);
  padding: 20px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-logo a {
  font-size: 24px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
}
.nav-menu {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}
.nav-menu li { position: relative; }
.nav-menu li a {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: color 0.3s ease;
}
.nav-menu li a:hover { color: #000; }

/* Dropdown */
.nav-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  list-style: none;
  padding: 10px 0;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.nav-menu li:hover > ul.sub-menu { display: block; }
.nav-menu li ul.sub-menu li a {
  color: #333;
  padding: 8px 16px;
  display: block;
}
.nav-menu li ul.sub-menu li a:hover {
  background-color: var(--brand);
  color: #fff;
}

/* -------------------- Hero Section -------------------- */
.hero {
  background: var(--brand, #ff5a5a);
  color: #fff;
  padding: 96px 0 200px; /* extra bottom space for overlap */
  position: relative;
  text-align: center;
  z-index: 1;
}

.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: -180px; /* adjust curve height */
  background: #fff;
  clip-path: ellipse(45% 120% at 45% 120%);
  z-index: 0;
}

.hero__title {
  font-size: clamp(32px, 3.2vw, 44px);
  font-weight: 800;
  margin-bottom: 20px;
}
.search {
  display: flex;
  gap: .5rem;
  background: #fff;
  border-radius: 14px;
  padding: .4rem;
  border: 1px solid #d9e2f0;
  box-shadow: 0 10px 20px rgba(13,38,76,.12);
  justify-content: center;
  max-width: 720px;
  margin: 0 auto;
}
.search__field {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem .9rem;
}
.search__field input {
  border: 0;
  outline: none;
  font-size: 16px;
  min-width: 520px;
}
.search__icon { width: 18px; height: 18px; color: #9aa4b2; }

.tags {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 12px;
  color: #fff;
  justify-content: center;
}
.chip {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 14px;
}

/* -------------------- Featured Section (Original) -------------------- */
.featured {
  position: relative;
  z-index: 5;
  margin-top: -100px; /* pull up to overlap with curve */
  margin-bottom: 100px;
}

/* Make the whole featured card clickable but remove link underline */
.featured-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Prevent underline and color change on hover */
.featured-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Ensure text inside the card has no underline */
.featured-card h2,
.featured-card p,
.featured-card span,
.featured-card strong,
.featured-card time {
  text-decoration: none;
  color: inherit;
}


.featured-card__media {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand) 70%);
  min-height: 360px;
  border-radius: 14px 0 0 14px;
}
.featured-card__body { padding: 32px 34px; }
.featured-card__title {
  font-size: clamp(26px, 2.1vw, 34px);
  color: var(--muted);
  margin: .5rem 0;
}
.featured-card__excerpt { color: var(--muted); }

.badge {
  display: inline-block;
  margin: 0; /* remove auto centering */
  text-align: left; /* align text to the left */
}

/* -------------------- Case Study (Featured) Card FIX -------------------- */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.container.case {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}
.case-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  overflow: hidden;
  max-width: 100%;
  flex-grow: 1;
}

.case-card__media {
  width: 40%; 
  background: var(--brand); 
  min-height: 300px;
  border-radius: var(--radius) 0 0 var(--radius);
}

.case-card__body {
  padding: 32px 40px; 
  width: 60%; 
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.case-card__title {
    color: var(--ink);
    margin: 0.5rem 0 1rem;
    font-size: clamp(26px, 2.1vw, 34px); 
}
.case-card__excerpt { 
    color: var(--muted); 
    margin-bottom: 24px;
}
.cards--featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 0px;
  margin-top: 70px;

}
.cards--regular {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Slider Arrow Buttons */
.round {
    width: 44px;
    height: 44px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: var(--blue);
    font-size: 20px;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

/* Ensure the parent container is positioned for the arrows */
@media screen and (max-width: 767px) {
    .container.case {
        /* This is crucial for positioning the arrows relative to the whole container */
        position: relative !important; 
        /* Ensure the card takes up most of the horizontal space */
        flex-direction: column !important; 
    }
    
    .case-card {
        /* Ensure the card itself is correctly sized */
        width: 100% !important;
        max-width: 90% !important; 
        margin: 0 auto !important; /* Center the card */
    }
    
    /* Reposition the arrows */
    .round {
        /* Override display:none if it's set in a wider query */
        display: flex !important; 
        /* Make them absolute relative to the .container.case */
        position: absolute !important; 
        
        /* Center them vertically on the image area (approx 150px high based on the phone layout) */
        top: 280px !important; 
        transform: translateY(-50%) !important;
        
        /* Set size and color to match the mock-up */
        width: 44px !important; 
        height: 44px !important; 
        background: #fff !important;
        color: #1565D8 !important;
        border: none !important;
        box-shadow: var(--shadow-soft) !important;
        
        /* Ensure they are above the card */
        z-index: 10 !important; 
    }
    
    /* Position the left arrow */
    .container.case .round:first-child {
        left: 5px !important; /* Move in from the edge */
        right: auto !important;
    }
    
    /* Position the right arrow */
    .container.case .round:last-child {
        right: 5px !important; /* Move in from the edge */
        left: auto !important;
    }
}

/* -------------------- Meta Styles (Applies to all cards) -------------------- */
/* === META SECTION (GLOBAL) === */
.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.meta__left {
    display: flex;
    /* Change from center to flex-start */
    align-items: flex-start; 
    gap: 0.6rem;
}

.meta__author {
    display: flex;
    flex-direction: column; /* This is what stacks elements in most cards */
    gap: 2px;
    line-height: 1.2;
}

/* --- FIX: Force 'meta_author--dark' (used on the Featured Card) to stack children vertically --- */
/* The base .meta__author is already set to column, but we ensure the dark variant inherits/maintains it */
.meta_author--dark {
    display: flex;
    flex-direction: column; /* <-- THIS IS THE KEY ADDITION */
    line-height: 1.5; /* ensure spacing is tight */
}

.meta__author strong {
    color: #FFFFFF;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
}
.meta__author--dark strong {
    color: #183B56 !important;
}
.meta__note {
  display: flex;
  align-items: center;
  font-size: 15px;
  font-style: italic;
  font-family: "Open Sans", sans-serif;
  color: #959EAD;
}

.meta__date {
  color: #959EAD;
  font-size: 15px;
}

/* === VARIANTS FOR FEATURED / CASE / POST === */
.featured-card .meta__author strong,
.case-card .meta__author strong,
.post .meta__author strong {
  color: #ffffff;
}

.featured-card .meta__note,
.case-card .meta__note,
.post .meta__note {
  color: #959EAD;
}

.featured-card .meta__date,
.case-card .meta__date,
.post .meta__date {
  color: #959EAD;
}

/* === TICK ICON (Verified Writer) === */
.meta__note::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 50%;
  background-color: #36B37E;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E") no-repeat center;
  mask-size: 10px;
  -webkit-mask-size: 10px;
}

/* === TICK (Fallback for older browsers) === */
.meta__tick {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  color: #00a859;
}

/* -------------------- Section Layouts -------------------- */
.section {
  padding: 56px 0;
}
.section__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.section__title { font-size: 22px; margin: 0; }
.section__sub { color: #0f2d52; max-width: 600px; }

/* -------------------- Post Cards (Recent Articles) -------------------- */
.cards {
  display: grid;
  gap: 22px;
}
.cards--2 { grid-template-columns: 1fr 1fr; }
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.post {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--brand) 0%, #1e293b 95%);
  min-height: 360px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow-soft);
  padding: 30px;
}
.post__title { font-size: 1.2rem; font-weight: 600; }
.post__meta {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  margin-top: 10px;
}
.post--regular {
  height: 350px; /* adjust height here */
}


/* -------------------- CTA Section -------------------- */
.cta {
  position: relative;
  background: #0D2436;
  color: #CFE0FF;
  margin-top: 50px;
  padding: 140px 0 0;
}
.cta::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 200px;
  background: #fff;
  clip-path: ellipse(88% 100% at 50% 0%);
}
.cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 40px;
  align-items: start;
}
.cta__copy h3 {
  margin: 0 0 16px;
  color: #EAF1FF;
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.28;
  max-width: 520px;
}
.cta__form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 10px;
}
.cta__form input {
  width: 260px;
  height: 40px;
  border-radius: 10px;
  background: #0B1A35;
  border: 1px solid #243B5A;
  color: #E6F0FF;
  padding: 0 14px;
}
.cta__form input::placeholder { color: #8FA5C6; }
.cta__form .btn { height: 38px; padding: 0 16px; border-radius: 10px; }

.cta__card {
  position: relative;
  justify-self: end;
  width: 360px;
  min-height: 235px;
}
.cta__bubble {
  position: absolute;
  top: 22px;
  right: -12px;
  width: 360px;
  background: #fff;
  color: #0C1A2E;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 16px 34px rgba(13,38,76,.24);
  z-index: 5;
  overflow: hidden;
}
.cta__bubble::before {
  content: "";
  display: block;
  height: 100px;
  background: var(--brand);
  border-radius: 12px 12px 0 0;
  margin: -16px -16px 12px -16px;
}
.cta__thumb { display: none !important; }
.cta__card::before {
  content: "";
  position: absolute;
  right: -22px;
  top: 62px;
  width: 44px;
  height: 140px;
  background: #2B64F0;
  border-radius: 14px;
}
.cta__card::after {
  content: "";
  position: absolute;
  left: -36px;
  top: 150px;
  width: 176px;
  height: 130px;
  background: #0B1A35;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.articles-footer {
    text-align: center; 
    margin-top: 40px;
}

.popular-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 40px 20px;
}

.popular-card {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  margin-bottom: 30px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.popular-card__image {
  flex: 0 0 40%;
}

.popular-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popular-card__content {
  flex: 1;
  padding: 25px 30px;
}

.popular-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #153243;
  margin-bottom: 10px;
}

.popular-card__excerpt {
  font-size: 1rem;
  color: #526475;
  margin-bottom: 20px;
}

.popular-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popular-meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.popular-author-info strong {
  font-size: 0.95rem;
  color: #153243;
}

.verified-writer {
  font-size: 0.85rem;
  color: #43b581; /* green tick + text */
  margin-top: 2px;
  font-style: italic;
  display: block; /* ensures it appears below the author name */
}


.verified-writer i {
  color: #43b581;
}

.popular-meta-right time {
  font-size: 0.9rem;
  color: #8899aa;
}

.badge {
  display: inline-block;
  background: #e0f7f3;
  color: #00a67e;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 12px;
}



/* -------------------- Footer -------------------- */
.footer {
  background: #0D2436;
  color: #CFE0FF;
  margin-top: 44px;
  padding-top: 36px;
}

/* Footer Brand/Logo Styling */
.footer__grid > div:first-child strong {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
}
.footer__lead {
  color: #A9BDDF;
  font-size: 14px;
  max-width: 250px;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Dots (Social Links) */
.dots {
  display: flex;
  gap: 8px;
}
.dots span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  display: block;
}

/* Main Grid */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 22px;
  margin-top: 120px;
  position: relative;
  z-index: 1;
}

/* Footer Link Columns */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.footer__cols h4 {
  color: #E6F0FF;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
  margin-top: 0;
}
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer__col a {
  color: #A9BDDF;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}
.footer__col a:hover {
  color: #fff;
}
/* ===================== SINGLE POST PAGE ===================== */

/* Styling for the static avatar in the single post template */
.single-author-static-avatar {
    width: 40px; /* Matches the size passed to get_avatar in single.php */
    height: 40px;
    border-radius: 50%;
    background: var(--brand); /* Use your theme's brand color for the circle */
    display: block;
    object-fit: cover;
}
.single-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 20px;
}

.single-header {
  margin-bottom: 20px;
}

.single-category {
  display: inline-block;
  background: #e8f9f0;
  color: #36B37E;
  border-radius: 999px;
  font-weight: 800;
  padding: 4px 10px;
  font-size: 13px;
  margin-bottom: 10px;
}

.single-title {
  font-size: 32px;
  font-weight: 800;
  color: #16324f;
  margin-bottom: 15px;
  line-height: 1.3;
}

.single-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* Left side: date + read time */
.single-meta-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
  color: #5a6a85;
}

/* Right side: author info */
.single-meta-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.single-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.single-author img {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  object-fit: cover;
}

.single-author-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.single-author-info strong {
  font-size: 14px;
  color: #183B56;
  font-family: 'Open Sans', sans-serif;
}

.single-verified {
  font-style: italic;
  font-family: 'Open Sans', sans-serif;
  color: #5A7184;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.single-verified i {
  color: #27ae60;
  font-size: 12px;
}

/* Featured image */
.single-featured-image img {
    width: 100%;
    border-radius: 12px;
    margin: 20px 0;
    
    /* 🔥 ADDED: Ensures the image covers the area without distortion */
    height: 100%; /* Important: Must set height for object-fit to work reliably */
    object-fit: cover;
}
/* Post content */
.single-body {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
}

/* Footer Bottom Section (Copyright and Love Button) */
.footer__bottom_row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #A9BDDF;
  padding: 16px 0;
  gap: 5px;
  padding-bottom: 20px;
}
.meta__note {
  font-size: 13px;
  color: #6c757d;
  font-style: italic;
  display: inline-flex;
  align-items: center;
}

.meta__note::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  background-color: #36B37E;
  -webkit-mask: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.173 12.927a.5.5 0 0 1-.707 0L2.223 9.683a.5.5 0 0 1 .707-.707L6 11.05l7.07-7.07a.5.5 0 1 1 .707.707l-7.604 7.604z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.173 12.927a.5.5 0 0 1-.707 0L2.223 9.683a.5.5 0 0 1 .707-.707L6 11.05l7.07-7.07a.5.5 0 1 1 .707.707l-7.604 7.604z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

/* Style the heart/love button */
.love-btn {
  background: var(--blue);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  margin-bottom: 5px;
}

/* -------------------- Article Header (New Design) -------------------- */
.article-header {
  max-width: 900px;
  margin: 60px auto 40px;
  padding: 0 20px;
}

.article-category {
  display: inline-block;
  background: #ffe4e4;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.article-title {
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  color: #1a2b49;
  margin: 0 0 16px 0;
  line-height: 1.3;
}

.article-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #5a6a85;
  margin-bottom: 24px;
}

.article-meta__left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5a6a85;
}

.meta-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-views svg {
  width: 16px;
  height: 16px;
  color: #5a6a85;
}

.article-meta__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.author-avatar {
  width: 40px;
  height: 40px;
  background: var(--brand);
  border-radius: 50%;
  flex-shrink: 0;
}

.author-details {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.author-details strong {
  color: #1a2b49;
  font-weight: 600;
}

.verified {
  display: flex;
  align-items: center;
  font-size: 0.8rem;
  color: #27ae60;
  font-style: italic;
}

.verified::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  background-color: #27ae60;
  mask: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.173 12.927a.5.5 0 0 1-.707 0L2.223 9.683a.5.5 0 0 1 .707-.707L6 11.05l7.07-7.07a.5.5 0 1 1 .707.707l-7.604 7.604z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask-size: contain;
}

.article-cover img {
  border-radius: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* -------------------- Article Body (Centered & Readable Width) -------------------- */
.article__body {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

.article__body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  color: #1a2b49;
}

.article__body p {
  margin-bottom: 1.5rem;
}

.article__footnote {
  margin-top: 3rem;
  text-align: center;
  font-weight: 500;
  color: var(--brand);
}


/* -------------------- Responsive -------------------- */
/* ---------- Refined Tablet Footer Look (768px–1024px) ---------- */
@media (min-width: 768px) and (max-width: 1440px) {
  /* CTA wrapper */
  .cta {
    color: #fff;
    padding: 100px 0 60px;
    text-align: center;
    border-radius: 0 0 40px 40px;
  }

  .cta__grid {
    display: flex;
    flex-direction: column-reverse; /* Card on top, text below (like your image) */
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  .cta__card {
    order: -1;
    max-width: 400px;
    width: 90%;
  }

  .cta__bubble {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 25px rgba(0,0,0,0.15);
    padding: 24px 20px;
    text-align: left;
  }

  .cta__bubble strong {
    color: #000;
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
  }

  .cta__bubble p {
    color: #444;
    font-size: 14px;
    margin: 0;
  }

  /* Center CTA text block */
  .cta__copy h3 {
    color: #fff;
    font-weight: 600;
    font-size: 22px;
    max-width: 500px;
    margin: 0 auto 20px;
  }

  .cta__form input,
  .cta__form .btn {
    border-radius: 8px;
  }

  /* Footer layout stack */

  
  .footer__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 40px;
    margin-top: 80px;
  }

  .footer__cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    width: 100%;
    max-width: 600px;
  }

  .footer__col h4 {
    margin-bottom: 8px;
    color: #fff;
  }

  .footer__col a {
    color: #ccc;
    transition: color .2s ease;
  }

  .footer__col a:hover {
    color: #fff;
  }

  .footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
  }

  .footer__bottom_row {
    flex-direction: column;
    gap: 10px;
  }
}
/* ===== Clean Tablet Footer Layout (768px–1200px) ===== */
@media (min-width: 768px) and (max-width: 1440px)  {
  .cta__copy {
    margin-top: 2.0rem; /* increase or decrease to adjust space */
  }

  /* Reorder CTA section */
  .cta__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }

  .cta__card {
    order: 1;
    margin-top: 30px;
  }

  .cta__copy {
    order: 2;
    max-width: 600px;
    width: 100%;
  }

  .cta__form {
    order: 3;
    justify-content: center;
    margin: 1rem auto 0;
    width: 100%;
    max-width: 420px;
  }

  .cta__fine {
    order: 4;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #dce0e8;
  }

  /* Footer grid */
  .footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-top: 3rem;
    padding: 0 2rem;
  }

  /* Left: logo + dots */
  .footer__grid > div:first-child {
    text-align: left;
  }
  .footer__grid > div:first-child {
    margin-top: -250px; /* move ehya• up slightly */
  }
  .footer__grid > div:first-child strong {
        font-size: 30px; /* Adjust this value to your desired size (e.g., 36px, 48px, 60px) */
        line-height: 1; /* Ensures text doesn't take up too much vertical space */
    }
  .footer__lead {
        font-size: 15px; /* Increase from 14px to 18px (adjust as desired: 16px, 18px, 20px) */
    }

  .footer__grid .footer__lead {
    margin-top: 0.5rem;
    margin-bottom: 1.2rem;
    color: #959EAD;
  }

  .dots {
    display: flex;
    gap: 0.4rem;
  }

  .dots span {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ff4d4d;
  }

  /* Right side columns */
  .footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 2rem 3rem;
    text-align: left;
  }

  /* Column titles and links */
  .footer__col h4 {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.8rem;
  }

  .footer__col a {
    display: block;
    color: #dce0e8;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .footer__col a:hover {
    color: #4a9fff;
  }

  /* Footer bottom */
  .footer__bottom_row {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-direction: column-reverse; /* 👈 reverse the order */
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.footer__bottom_row p {
  color: #bfc8d9;
  font-size: 0.9rem;
  order: 0; 
}

.love-btn {
  font-size: 1.3rem;
  color: #ffffff; /* change this to your preferred color */
  text-decoration: none;
  order: 1; /* love button above copyright */
}

}
.footer,
.footer__top,
.footer__bottom {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
}
footer.footer {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

footer.footer::before {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.footer::before {
  content: "";
  position: absolute;
  top: -50px;
  left: 0;
  width: 100%;
  height: 50px;
  background: white;
}
.footer::before {
  top: -300px; /* reduce overlap to close the gap */
}
.footer {
  position: relative;
  overflow: hidden;
  background-color: #0e2433; /* your dark blue */
}


/* Card adjustments */
.post {
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, #e54b4b 0%, #242424 100%);
  color: #fff;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* Ensure the container doesn’t squash content */
.cards--wrap-rows {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Center the "More Articles" button */
.articles-footer {
  text-align: center;
  margin-top: 2rem;
}
/* ======================================
  Fix Popular Articles Card Size (Desktop)
  ====================================== */

/* Make the Popular Articles section wider */
.cards--2 {
  max-width: 1200px; /* stretch the container */
  margin: 0 auto;    /* center it nicely */
  gap: 2.5rem;       /* add space between cards */
}

/* Ensure each card fills its column */
.cards--2 article.post {
  width: 100%;
}

/* On large screens, keep 2 wide cards */
@media (min-width: 1024px) {
  .cards--2 {
    grid-template-columns: repeat(2, 1fr); /* 2 big cards side by side */
  }
}

/* On tablet, still 2 cards, just slightly narrower */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards--2 {
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
  }
}

/* ============================= */
/* 📱 320px Mobile View Fix */
/* ============================= */
@media screen and (max-width: 767px) {

  /* Make all article cards full width, centered, and stacked */
  .popular-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* spacing between cards */
  }

  .popular-card {
    width: 90%; /* slightly inset from edges */
    max-width: 320px;
    margin: 0 auto;
    border-radius: 20px;
  }

  /* Ensure image inside card fits */
  .popular-card img {
    width: 100%;
    height: auto;
    border-radius: 20px 20px 0 0;
  }

  /* Keep title and text readable */
  .popular-card h4 {
    font-size: 18px;
    line-height: 1.4;
  }

  .popular-card p {
    font-size: 15px;
  }

  /* View all button spacing */
  .view-all-btn {
    width: 90%;
    max-width: 320px;
    margin: 10px auto 20px;
    display: block;
    text-align: center;
  }

  /* Make sure search and tags fit small screen */
  .search-section input,
  .search-section button {
    width: 100%;
  }

  .tag-list {
    flex-wrap: wrap;
    gap: 6px;
  }

  .tag {
    font-size: 13px;
    padding: 6px 10px;
  }
}

/* ------------------------------
  STRICT MOBILE: HOME PAGE <=320px
  Broader selectors + stronger overrides
-------------------------------*/
@media screen and (max-width: 767px) {

  /* target common WordPress home/template body classes */
  body.page-template-home-page,
  body.page-template-page-home-php,
  body.home,
  body.front-page {
    overflow-x: hidden !important;
  }

  /* container padding */
  body.page-template-home-page .container,
  body.page-template-page-home-php .container,
  body.home .container,
  body.front-page .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 320px !important;
    box-sizing: border-box !important;
  }

  /* HEADER: logo + hamburger alignment */
  body.page-template-home-page .main-header,
  body.page-template-page-home-php .main-header,
  body.home .main-header,
  body.front-page .main-header {
    padding: 10px 8px !important;
  }
  body.page-template-home-page .header-inner,
  body.page-template-page-home-php .header-inner,
  body.home .header-inner,
  body.front-page .header-inner {
    width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 0 !important;
  }
  /* shrink logo */
  body.page-template-home-page .site-logo a,
  body.page-template-page-home-php .site-logo a,
  body.home .site-logo a,
  body.front-page .site-logo a {
    font-size: 18px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* hide desktop nav on tiny screens */
  body.page-template-home-page .nav-menu,
  body.page-template-page-home-php .nav-menu,
  body.home .nav-menu,
  body.front-page .nav-menu {
    display: none !important;
  }

  /* HERO */
  body.page-template-home-page .hero,
  body.page-template-page-home-php .hero,
  body.home .hero,
  body.front-page .hero {
    padding: 18px 8px !important;
    text-align: center !important;
  }
  body.page-template-home-page .hero__inner,
  body.page-template-page-home-php .hero__inner,
  body.home .hero__inner,
  body.front-page .hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  body.page-template-home-page .hero__title,
  body.page-template-page-home-php .hero__title,
  body.home .hero__title,
  body.front-page .hero__title {
    font-size: 1.45rem !important;
    margin: 0 !important;
  }

  /* SEARCH: stack + remove min-width */
  body.page-template-home-page .search,
  body.page-template-page-home-php .search,
  body.home .search,
  body.front-page .search {
    width: 100% !important;
    max-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;
  }
  body.page-template-home-page .search__field input,
  body.page-template-page-home-php .search__field input,
  body.home .search__field input,
  body.front-page .search__field input {
    min-width: 0 !important; /* override desktop min-width */
    width: 100% !important;
    padding: 8px 12px !important;
    font-size: 0.95rem !important;
  }
  body.page-template-home-page .search__field,
  body.page-template-page-home-php .search__field,
  body.home .search__field,
  body.front-page .search__field {
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
  }

  body.page-template-home-page .btn.btn--primary,
  body.page-template-page-home-php .btn.btn--primary,
  body.home .btn.btn--primary,
  body.front-page .btn.btn--primary {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 0.95rem !important;
  }

  /* TAGS */
  body.page-template-home-page .tags,
  body.page-template-page-home-php .tags,
  body.home .tags,
  body.front-page .tags {
    justify-content: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 8px !important;
  }
  body.page-template-home-page .tags__label,
  body.page-template-page-home-php .tags__label,
  body.home .tags__label,
  body.front-page .tags__label {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
  }
  body.page-template-home-page .chip,
  body.page-template-page-home-php .chip,
  body.home .chip,
  body.front-page .chip {
    font-size: 0.82rem !important;
    padding: 5px 8px !important;
    margin: 3px !important;
  }

  /* FEATURED / CASE */
  body.page-template-home-page .case,
  body.page-template-page-home-php .case,
  body.home .case,
  body.front-page .case {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  body.page-template-home-page .case-card,
  body.page-template-page-home-php .case-card,
  body.home .case-card,
  body.front-page .case-card {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
  }
  body.page-template-home-page .case-card__media,
  body.page-template-page-home-php .case-card__media,
  body.home .case-card__media,
  body.front-page .case-card__media {
    min-height: 150px !important;
    height: 150px !important;
  }

  /* POSTS — force single column + sizing */
  body.page-template-home-page .cards,
  body.page-template-page-home-php .cards,
  body.home .cards,
  body.front-page .cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
  }
  body.page-template-home-page .post,
  body.page-template-page-home-php .post,
  body.home .post,
  body.front-page .post {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    border-radius: 12px !important;
  }
  body.page-template-home-page .post__media,
  body.page-template-page-home-php .post__media,
  body.home .post__media,
  body.front-page .post__media {
    height: 140px !important;
  }
  body.page-template-home-page .post__title,
  body.page-template-page-home-php .post__title,
  body.home .post__title,
  body.front-page .post__title {
    font-size: 1rem !important;
  } 

  /* small typography adjustments */
  body.page-template-home-page .section__title,
  body.page-template-page-home-php .section__title,
  body.home .section__title,
  body.front-page .section__title {
    font-size: 1.2rem !important;
    text-align: center !important;
  }
  body.page-template-home-page .section__sub,
  body.page-template-page-home-php .section__sub,
  body.home .section__sub,
  body.front-page .section__sub {
    font-size: 0.85rem !important;
    text-align: center !important;
  }

  /* spacing */
  body.page-template-home-page section,
  body.page-template-page-home-php section,
  body.home section,
  body.front-page section {
    padding-top: 100px !important;
    padding-bottom: 14px !important;
  }
}

  
/* --------------------------------------------
  TABLET FIX: Stack Featured Card Vertically
  (768px–1024px)
--------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  body.page-template-page-home-php .featured .container.case,
  body.page-template-home-page .featured .container.case,
  body.home .featured .container.case,
  body.front-page .featured .container.case {
    flex-direction: column !important;
    align-items: center !important;
    gap: 24px !important;
  }

  body.page-template-page-home-php .featured .case-card,
  body.page-template-home-page .featured .case-card,
  body.home .featured .case-card,
  body.front-page .featured .case-card {
    flex-direction: column !important;
    align-items: center !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    width: 90% !important;
    max-width: 500px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important;
  }

  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-home-page .featured .case-card__media,
  body.home .featured .case-card__media,
  body.front-page .featured .case-card__media {
    width: 100% !important;
    height: 220px !important;
    border-radius: 12px 12px 0 0 !important;
  }

  body.page-template-page-home-php .featured .case-card__body,
  body.page-template-home-page .featured .case-card__body,
  body.home .featured .case-card__body,
  body.front-page .featured .case-card__body {
    width: 100% !important;
    padding: 24px 20px !important;
    text-align: left !important;
  }

  body.page-template-page-home-php .featured .case-card__title {
    font-size: 1.3rem !important;
  }
}

/* --------------------------------------------
  FIX: Article Card Layout for Tablet & Phone
  Make one article card per row
--------------------------------------------- */
@media screen and (max-width: 768px) {
  body.page-template-page-home-php .cards,
  body.page-template-home-page .cards,
  body.home .cards,
  body.front-page .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  body.page-template-page-home-php .cards .post,
  body.page-template-home-page .cards .post,
  body.home .cards .post,
  body.front-page .cards .post {
    width: 100% !important;
    margin: 0 auto !important;
  }
}

/* Narrow phone adjustment */
@media screen and (max-width: 767px) {
  body.page-template-page-home-php .cards,
  body.page-template-home-page .cards,
  body.home .cards,
  body.front-page .cards {
    gap: 20px !important;
  }

  body.page-template-page-home-php .cards .post,
  body.page-template-home-page .cards .post,
  body.home .cards .post,
  body.front-page .cards .post {
    width: 100% !important;
  }
}

/* --------------------------------------------
  ENLARGE Featured Card for Tablet & Phone
--------------------------------------------- */
@media screen and (max-width: 768px) {
  body.page-template-page-home-php .featured .case-card,
  body.page-template-home-page .featured .case-card,
  body.home .featured .case-card,
  body.front-page .featured .case-card {
    max-width: 90% !important; /* make it wider */
    width: 90% !important;
    margin: 30px auto !important;
    transform: scale(1.03); /* slight enlarge */
  }

  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-home-page .featured .case-card__media,
  body.home .featured .case-card__media,
  body.front-page .featured .case-card__media {
    height: 100px !important; /* make image taller */
  }

  body.page-template-page-home-php .featured .case-card__body,
  body.page-template-home-page .featured .case-card__body,
  body.home .featured .case-card__body,
  body.front-page .featured .case-card__body {
    padding: 28px 22px !important; /* more padding inside */
  }

  body.page-template-page-home-php .featured .case-card__title,
  body.page-template-home-page .featured .case-card__title,
  body.home .featured .case-card__title,
  body.front-page .featured .case-card__title {
    font-size: 1.4rem !important;
  }
}

/* Smaller phones: slightly reduce height */
@media screen and (max-width: 767px) {
  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-home-page .featured .case-card__media,
  body.home .featured .case-card__media,
  body.front-page .featured .case-card__media {
    height: 100px !important;
  }

  body.page-template-page-home-php .featured .case-card__title {
    font-size: 1.2rem !important;
  }
}

/* --------------------------------------------
  ENLARGE both Featured and Case Studies cards
  for Tablet & Phone View
--------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Target both featured and case studies sections */
  body.page-template-page-home-php .featured .case-card,
  body.page-template-home-page .featured .case-card,
  body.page-template-page-home-php .section .case-card,
  body.page-template-home-page .section .case-card,
  body.home .featured .case-card,
  body.home .section .case-card,
  body.front-page .featured .case-card,
  body.front-page .section .case-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: left !important;
    width: 90% !important;
    max-width: 95% !important;
    margin: 30px auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.1) !important;
    transform: scale(1.03);
    background: #fff !important;
  }

  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-home-page .featured .case-card__media,
  body.page-template-page-home-php .section .case-card__media,
  body.page-template-home-page .section .case-card__media,
  body.home .featured .case-card__media,
  body.home .section .case-card__media,
  body.front-page .featured .case-card__media,
  body.front-page .section .case-card__media {
    width: 100% !important;
    height: 280px !important;
    border-radius: 12px 12px 0 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  body.page-template-page-home-php .featured .case-card__body,
  body.page-template-home-page .featured .case-card__body,
  body.page-template-page-home-php .section .case-card__body,
  body.page-template-home-page .section .case-card__body,
  body.home .featured .case-card__body,
  body.home .section .case-card__body,
  body.front-page .featured .case-card__body,
  body.front-page .section .case-card__body {
    width: 100% !important;
    padding: 28px 22px !important;
    box-sizing: border-box !important;
  }

  body.page-template-page-home-php .featured .case-card__title,
  body.page-template-home-page .featured .case-card__title,
  body.page-template-page-home-php .section .case-card__title,
  body.page-template-home-page .section .case-card__title,
  body.home .featured .case-card__title,
  body.home .section .case-card__title,
  body.front-page .featured .case-card__title,
  body.front-page .section .case-card__title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    color: #06283D !important;
  }
}

/* Slightly smaller for phones */
@media screen and (max-width: 320px) {
  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-page-home-php .section .case-card__media,
  body.home .featured .case-card__media,
  body.home .section .case-card__media {
    height: 240px !important;
  }

  body.page-template-page-home-php .featured .case-card__title,
  body.page-template-page-home-php .section .case-card__title,
  body.home .featured .case-card__title,
  body.home .section .case-card__title {
    font-size: 1.2rem !important;
  }
}

/* --------------------------------------------
  ENLARGE Featured & Case Studies Cards
  for PHONE VIEW (max-width: 320px)
--------------------------------------------- */
@media screen and (max-width: 320px) {
  /* Both Featured + Case Studies */
  body.page-template-page-home-php .featured .case-card,
  body.page-template-home-page .featured .case-card,
  body.page-template-page-home-php .section .case-card,
  body.page-template-home-page .section .case-card,
  body.home .featured .case-card,
  body.home .section .case-card,
  body.front-page .featured .case-card,
  body.front-page .section .case-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 95% !important;
    max-width: 95% !important;
    margin: 25px auto !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
  }

  /* Image block on top */
  body.page-template-page-home-php .featured .case-card__media,
  body.page-template-home-page .featured .case-card__media,
  body.page-template-page-home-php .section .case-card__media,
  body.page-template-home-page .section .case-card__media,
  body.home .featured .case-card__media,
  body.home .section .case-card__media,
  body.front-page .featured .case-card__media,
  body.front-page .section .case-card__media {
    width: 100% !important;
    height: 260px !important;
    border-radius: 14px 14px 0 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  /* Text area below */
  body.page-template-page-home-php .featured .case-card__body,
  body.page-template-home-page .featured .case-card__body,
  body.page-template-page-home-php .section .case-card__body,
  body.page-template-home-page .section .case-card__body,
  body.home .featured .case-card__body,
  body.home .section .case-card__body,
  body.front-page .featured .case-card__body,
  body.front-page .section .case-card__body {
    width: 100% !important;
    padding: 22px 18px !important;
    box-sizing: border-box !important;
  }

  /* Title */
  body.page-template-page-home-php .featured .case-card__title,
  body.page-template-page-home-php .section .case-card__title,
  body.page-template-home-page .featured .case-card__title,
  body.page-template-home-page .section .case-card__title,
  body.home .featured .case-card__title,
  body.home .section .case-card__title,
  body.front-page .featured .case-card__title,
  body.front-page .section .case-card__title {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #06283D !important;
    margin-bottom: 10px !important;
  }

  /* Excerpt spacing */
  body.page-template-page-home-php .featured .case-card__excerpt,
  body.page-template-page-home-php .section .case-card__excerpt,
  body.page-template-home-page .featured .case-card__excerpt,
  body.page-template-home-page .section .case-card__excerpt,
  body.home .featured .case-card__excerpt,
  body.home .section .case-card__excerpt,
  body.front-page .featured .case-card__excerpt,
  body.front-page .section .case-card__excerpt {
    font-size: 0.95rem !important;
    color: #555 !important;
    margin-bottom: 16px !important;
  }


}



/* --------------------------------------------
  📱 Fix "Get Our Stories" Email Section for 320px
--------------------------------------------- */
@media screen and (max-width: 767px) {

  /* CTA wrapper: shrink padding and center */
  .cta {
    padding: 60px 0 40px !important;
    text-align: center !important;
  }

  /* Grid layout: stack everything neatly */
  .cta__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 0 10px !important;
  }

  /* Fix the heading */
  .cta__copy h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    max-width: 280px !important;
    margin: 0 auto 12px !important;
  }

  /* Input + button stack vertically */
  .cta__form {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
    gap: 10px !important;
  }

  .cta__form input {
    width: 100% !important;
    font-size: 14px !important;
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
  }

  .cta__form .btn {
    width: 100% !important;
    font-size: 14px !important;
    height: 38px !important;
    border-radius: 8px !important;
  }

  /* Hide the best article card bubble */
  .cta__card,
  .cta__bubble {
    display: none !important;
  }

  /* Optional: center fine print or text below */
  .cta__fine {
    font-size: 13px !important;
    color: #dce0e8 !important;
    text-align: center !important;
    margin-top: 10px !important;
  }
}

.cta::before {
  height: 100px; /* default is 200px – increase for a taller curve */
  clip-path: ellipse(88% 100% at 50% 0%);
}

@media screen and (max-width: 320px) {
  .cta__copy h3 {
    margin-top: -50px !important;
  }
}

@media screen and (max-width: 320px) {
  .footer .dots {
    justify-content: center !important;
    margin: 0 auto !important;
  }
}

/* 📱 Center & unify "View All" and "More Articles" buttons + center titles/descriptions */
@media screen and (max-width: 767px) {

  /* Center section titles and descriptions */
  .section__head,
  .section__title,
  .section__sub {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Unify button look for View All and More Articles */
  .btn--viewall,
  .btn--morearticles,
  .view-all-btn {
    display: block !important;
    margin: 12px auto 0 !important;
    text-align: center !important;
    justify-content: center !important;
    border: 1px solid #1565D8 !important;
    color: #1565D8 !important;
    background: transparent !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    width: auto !important;
    min-width: 150px !important; /* keeps them same width visually */
  }

  /* If button is inside section header */
  .section__head .btn--viewall,
  .section__head .btn--morearticles,
  .section__head .view-all-btn {
    float: none !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }

  /* Optional: make buttons full-width for smaller phones */
  @media screen and (max-width: 767px) {
    .btn--viewall,
    .btn--morearticles,
    .view-all-btn {
      width: 90% !important;
    }
  }
}


/* Only for phone view */
@media screen and (max-width: 767px) {

  /* Hide normal menu */
  .site-nav {
    display: none;
  }

  /* Flex container for logo + hamburger */
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Hamburger button styling */
  .sidebar-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

  .sidebar-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 2px;
  }

  /* Sidebar styling */
  .sidebar {
    position: fixed;
    top: 0;
    right: -250px; /* hidden initially */
    width: 250px;
    height: 100%;
    background-color: #FC5A5A;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
    z-index: 9999;
    padding: 20px;
  }

  .sidebar.open {
    right: 0;
  }

  .close-btn {
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    margin-bottom: 20px;
  }

  .sidebar-links {
    list-style: none;
    padding: 0;
  }

  .sidebar-links li {
    margin-bottom: 15px;
  }

  .sidebar-links a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
  }
}

.sidebar {
  position: fixed;
  top: 0;
  right: -250px; /* hidden by default */
  width: 250px;
  height: 100%;
  background-color: #FC5A5A;
  box-shadow: -2px 0 5px #FFFFFF(0,0,0,0.3);
  transition: right 0.3s ease;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
}

.sidebar .close-btn {
  position: sticky;    /* stays visible while scrolling */
  top: 30px;           /* move down a bit from the top */
  right: 15px;         /* distance from the right edge */
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;   /* smaller padding to bring it closer to links */
  z-index: 1000;
}


.sidebar-links {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

.sidebar-links li {
  margin-bottom: 15px;
}

.sidebar-links a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 5px 0;
}

.sidebar-links .submenu {
  display: none; /* hidden by default */
  padding-left: 15px;
  margin-top: 5px;
}

.sidebar-links .submenu.open {
  display: block; /* visible when toggled */
}


/* Submenu base style */
.nav-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  list-style: none;
  margin: 0;
  padding: 5px 0;
  min-width: 115px;
  max-width: 90vw; /* never exceed viewport width */
  overflow: hidden;
  z-index: 999;
  word-wrap: break-word; /* wrap long titles */
}

/* Submenu links */
.nav-menu .submenu li a {
  display: block;
  padding: 8px 15px;
  color: #000000;
  text-decoration: none;
  white-space: normal; /* allow wrapping */
  word-break: break-word;
}

/* Show submenu when toggled */
.nav-menu .submenu.open {
  display: block;
}

/* Flip submenu to left if needed */
.nav-menu li.has-submenu.open-right .submenu {
  left: auto;
  right: 0;
}



.post__media img,
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}


/* === All Articles Grid (2 + 3 layout) === */
.all-articles__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 30px;
  justify-content: center;
}

/* First row (2 featured cards) */
.post-card:nth-child(1),
.post-card:nth-child(2) {
  grid-column: span 3; /* each takes half width */
  height: 380px;
}

/* Second row (3 regular cards) */
.post-card:nth-child(3),
.post-card:nth-child(4),
.post-card:nth-child(5) {
  grid-column: span 2; /* 3 cards across full width */
  height: 320px;
}

/* Card base style */
.post-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1f2e;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* Image & Overlay */
.post-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card__img {
  transform: scale(1.05);
}

.post-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 46, 0.95) 15%, rgba(11, 31, 46, 0) 75%);
}

/* Content */
.post-card__content {
  position: relative;
  z-index: 2;
  padding: 24px;
}

.post-card__title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 8px 0;
}

.post-card__excerpt {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 10px;
}

.post-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Badge */
.badge {
  background-color: #d2fbea;
  color: #36B37E;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* Responsive */
@media (max-width: 1024px) {
  .all-articles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .post-card {
    grid-column: span 1;
    height: 320px;
  }
}

@media (max-width: 768px) {
  .all-articles__grid {
    grid-template-columns: 1fr;
  }
  .post-card {
    height: 280px;
  }
}



/* Footer */
.articles-footer {
  text-align: center;
  margin-top: 40px;
}

/* === Unified Card Styles for Homepage (excluding .case-card image fill) === */

/* Shared Base for .post and .post-card */
.post,
.post-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #0b1f2e;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover,
.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}

/* === Image fills the card (only for .post and .post-card) === */
.post__media,
.post-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.post__img,
.post-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post:hover .post__img,
.post-card:hover .post-card__img {
  transform: scale(1.05);
}

/* === Gradient overlay (for .post and .post-card) === */
.post__overlay,
.post-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 31, 46, 0.9) 10%, rgba(11, 31, 46, 0) 70%);
  z-index: 1;
}

/* === Text Content (for all card types) === */
.post__content,
.case-card__body,
.post-card__content {
  position: relative;
  z-index: 2;
  padding: 24px;
}

.post__title,
.case-card__title,
.post-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 8px 0;
}

.post__desc,
.case-card__excerpt,
.post-card__excerpt {
  font-size: 0.9rem;
  opacity: 0.9;
  margin-bottom: 10px;
}

/* === Meta Section === */
.post__meta,
.case-card .meta,
.post-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta__author strong {
  font-weight: 600;
}

.meta__note {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* === Badge === */
.badge {
  background-color: #c9f9e5;
  color: #36B37E;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 9999px;
}

/* === Responsive === */
@media (max-width: 1024px) {
  .post,
  .post-card {
    height: 320px;
  }
}

@media (max-width: 768px) {
  .post,
  .post-card {
    height: 280px;
  }
}
@media (max-width: 767px) {
  .post,
  .post-card {
    height: 250px;
  }
}
/* --------------------------------------------
  📱 TABLET FIX: One article card per row (768px)
--------------------------------------------- */
@media (min-width: 768px) {
  body.page-template-home-page .cards,
  body.page-template-page-home-php .cards,
  body.home .cards,
  body.front-page .cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    justify-content: center !important;
  }

  body.page-template-home-page .cards .post,
  body.page-template-page-home-php .cards .post,
  body.home .cards .post,
  body.front-page .cards .post {
    width: 90% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
  }
}





/*
=====================================================
  DESKTOP OVERRIDE FIX for Screenshot Layout (≥ 1440px)
  Forces Popular to 2 columns and Recent to 3 columns.
  *** ADJUSTED MAX-WIDTH PROPERTY FOR SECTION WIDTH CONTROL ***
=====================================================
*/
@media (min-width: 1440px) {
    
    /* 1. Popular Articles Section: Must be 2 columns, centered, and full width */
    .section:nth-of-type(3) .cards--2 {
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* 💡 Spacing Control: DECREASE gap to make cards WIDER */
        gap: 5px !important; 
        
        /* 🎯 Overall Section Width Control: Change this value to make the whole card group narrower or wider */
        max-width: 1140px; /* <--- ADJUST THIS VALUE (e.g., 900px for a narrower section) */
        
        margin-left: auto !important; 
        margin-right: auto !important; 
    }

    /* 2. Recent Articles Section: Must be 3 columns, centered, and full width */
    .section:nth-of-type(4) .cards--3 {
        grid-template-columns: repeat(3, 1fr) !important;

        /* 💡 Spacing Control: DECREASE gap to make cards WIDER */
        gap: 5px !important;

        /* 🎯 Overall Section Width Control: Change this value to make the whole card group narrower or wider */
        max-width: 1140px; /* <--- ADJUST THIS VALUE (e.g., 900px for a narrower section) */
        
        margin-left: auto !important; 
        margin-right: auto !important; 
    }
}

/*
=====================================================
  TABLET FIX: All Articles Section (Max 1024px)
  Forces the complex 2-large/3-small grid into a
  single vertical column stack.
=====================================================
*/
@media (min-width: 768px) and (max-width: 1439px) {
    
    /* 1. Force the All Articles grid container to a single column */
    .all-articles__grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        
        /* ADJUST THIS VALUE for VERTICAL SPACING between cards */
        gap: 25px !important; 
        
        /* ADJUST THIS VALUE to control the MAX HORIZONTAL WIDTH of the entire stack */
        max-width: 850px !important;
        
        margin: 0 auto !important;
    }

    /* 2. Ensure ALL individual cards (large and small) fill the single column */
    .all-articles__grid .post-card,
    .all-articles__grid .post-card--large,
    .all-articles__grid .post-card--small {
        grid-column: span 1 !important;
        width: 100% !important; 
        
        /* Height can also be adjusted here */
        height: 380px !important; 
    }
}

@media screen and (min-width: 768px) {
    .footer .cta__card,
    .footer .cta__bubble {
        /* Force display back to block for the card container and bubble */
        display: block !important;
    }
}

/* =====================================================
  CTA VISIBILITY AND ALIGNMENT FIX V2 (min-width: 768px)
  Forces correct layout AND centers the left content.
===================================================== */

@media screen and (min-width: 1240px) {
    /* 1. Ensure the card is visible */
    .footer .cta__card,
    .footer .cta__bubble {
        display: block !important;
    }

    /* 2. FORCE THE CORRECT GRID LAYOUT FOR THE CONTAINER */
    .cta__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 360px !important; 
        gap: 40px !important;
        align-items: start !important;
        flex-direction: initial !important; 
    }
    
    /* 3. Revert the CTA card back to its desktop positioning */
    .cta__card {
        justify-self: end !important; 
        width: 360px !important;
    }

    /* 4. Revert the bubble to its desktop offset position */
    .cta__bubble {
        position: absolute !important;
        top: 22px !important; /* Adjusted for better alignment with text section */
        right: -12px !important;
        left: auto !important; 
        margin: 0 !important;
        width: 360px !important;
    }
    
    /* 5. CENTER THE TEXT/COPY SECTION */
    .cta__copy {
        order: initial !important; 
        text-align: center !important; /* THIS CENTERS THE HEADING TEXT */
    }

    /* 6. CENTER THE FORM INPUT AND BUTTON */
    .cta__form {
        justify-content: center !important; /* Centers the input/button pair */
        margin: 12px auto 10px !important; /* Centers the form block itself */
        max-width: fit-content !important;
    }
    
    /* 7. CENTER THE FINE PRINT */
    .cta__fine {
        text-align: center !important;
    }
}

/* =====================================================
   📱 REVISED ALIGNMENT FIX (max-width: 768px)
   Adjusts gradient height, badge size, and vertical spacing.
   ===================================================== */
@media (max-width: 768px) {

    /* 1. Image area */
.section:nth-of-type(3) .post__media,
.section:nth-of-type(4) .post__media {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    /* FIX: Set height to 100% to fill the card's height (e.g., 380px) */
    height: 100% !important; 
    border-radius: var(--radius) !important;
    overflow: hidden;
}

.section:nth-of-type(3) .post__img,
.section:nth-of-type(4) .post__img {
    width: 100% !important;
    /* FIX: Set height to 100% to ensure image fills media container */
    height: 100% !important; 
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
}

/* 2. Content overlay area: MUST be 100% height to cover the full image */
.section:nth-of-type(3) .post__overlay,
.section:nth-of-type(4) .post__overlay {
    position: absolute !important;
    top: 0 !important; /* Start from the top */
    bottom: auto !important;
    left: 0 !important;
    width: 100% !important;
    /* FIX: Cover 100% of the height */
    height: 100% !important; 
    /* Adjust gradient to be transparent at the top and dark at the bottom */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(15, 23, 42, 0) 35%, var(--ink) 150%) !important;
    display: block !important;
    z-index: 5;
}

    /* 2. Text content area: Adjust padding and spacing */
    .section:nth-of-type(3) .post__content,
    .section:nth-of-type(4) .post__content {
        /* Increase padding to pull content away from the edges */
        padding: 20px 24px 24px !important; 
        
        /* Reset min-height to allow flexibility */
        min-height: auto !important;
    }
    
    /* 3. "FEATURED" badge size and spacing */
    .section:nth-of-type(3) .badge,
    .section:nth-of-type(4) .badge {
        /* Shrink the padding and font size slightly */
        font-size: 0.75rem !important; 
        padding: 4px 12px !important; 
        margin-bottom: 12px !important; /* Push the title down */
        
        /* Set max-width to prevent the wide pill shape */
        width: fit-content !important;
    }

    /* 4. Title spacing */
    .section:nth-of-type(3) .post__title,
    .section:nth-of-type(4) .post__title {
        margin-top: 0 !important; /* Ensure title starts right after the badge */
        margin-bottom: 15px !important;
    }

    /* 5. Avatar/Meta alignment (optional refinement) */
    .section:nth-of-type(3) .post__meta,
    .section:nth-of-type(4) .post__meta {
        /* Ensure the meta section has proper spacing below the title */
        margin-top: 0 !important; 
    }

    .section:nth-of-type(3) .post__content,
.section:nth-of-type(4) .post__content {
    /* ... other CSS properties ... */
    color: #ffffff !important; /* Sets default color for elements inside content area */
}

/* 1. Change the Title Color (often needs to be brighter) */
.section:nth-of-type(3) .post__title,
.section:nth-of-type(4) .post__title {
    color: #ffffff !important; /* Set to pure white for maximum prominence */
    /* ... other CSS properties ... */
}

/* 2. Change Author Name Color */
.section:nth-of-type(3) .post__meta .meta__author strong,
.section:nth-of-type(4) .post__meta .meta__author strong {
    color: #ffffff !important; /* Lighter gray for author name */
}

/* 3. Change Date and Verified Note Color */
.section:nth-of-type(3) .post__meta .meta__date,
.section:nth-of-type(4) .post__meta .meta__date,
.section:nth-of-type(3) .post__meta .meta__note,
.section:nth-of-type(4) .post__meta .meta__note {
    color: #ffffff !important; /* A darker, subdued gray for secondary text */
}

/* =====================================================
   📱 TEXT BRIGHTNESS & CLARITY FIX (max-width: 768px)
   Removes text shadow and ensures maximum white text contrast.
   ===================================================== */
@media (max-width: 768px) {

    /* --- ENHANCE CONTRAST (Make background behind text solid) --- */

    .section:nth-of-type(3) .post__overlay,
    .section:nth-of-type(4) .post__overlay {
        /* ... existing position/size CSS ... */

        /* REVISED GRADIENT: Ensure the bottom 30% is near-solid black (var(--ink)) */
        background: linear-gradient(
            to bottom, 
            rgba(15, 23, 42, 0) 0%, 
            rgba(15, 23, 42, 0) 70%,   /* Fully transparent until 70% down */
            var(--ink) 95%             /* SOLID dark color starts aggressively here */
        ) !important;
        
        z-index: 5;
    }

    /* --- MAXIMIZE TEXT BRIGHTNESS & REMOVE SHADOW --- */

    .section:nth-of-type(3) .post__content,
    .section:nth-of-type(4) .post__content {
        /* This ensures the text elements are above the gradient and clearly defined */
        position: relative !important; 
        z-index: 10;
        /* ... other padding CSS ... */
    }

    /* 1. Remove Shadow and Maximize Title Brightness */
    .section:nth-of-type(3) .post__title,
    .section:nth-of-type(4) .post__title {
        color: #ffffff !important; 
        text-shadow: none !important; /* <-- KEY FIX: Remove any text shadow */
    }

    /* 2. Remove Shadow and Maximize Author Name Brightness */
    .section:nth-of-type(3) .post__meta .meta__author strong,
    .section:nth-of-type(4) .post__meta .meta__author strong {
        color: #ffffff !important;
        text-shadow: none !important; /* <-- KEY FIX */
    }

    /* 3. Remove Shadow and Maximize Date/Note Brightness */
    .section:nth-of-type(3) .post__meta .meta__date,
    .section:nth-of-type(4) .post__meta .meta__date,
    .section:nth-of-type(3) .post__meta .meta__note,
    .section:nth-of-type(4) .post__meta .meta__note {
        color: #ffffff !important; 
        text-shadow: none !important; /* <-- KEY FIX */
    }
}
}

@media (max-width: 767px) {
    /* --- A. RE-ORDER MAIN FOOTER GRID --- */

    /* Ensure the main grid uses flex/column stacking */
    .footer__grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; 
        gap: 40px !important; 
        margin-top: 40px !important;
    }

    /* Link Columns (Product, Services, Company, More) - Should be ORDER 1 (Top) */
    .footer__cols {
        order: 1 !important;
        
        /* 1. Force the container to be a 2-column grid */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; 
        
        /* 2. Control Spacing */
        gap: 32px 16px !important; /* Vertical gap 32px, Horizontal gap 16px */
        
        width: 100% !important;
        max-width: 400px !important;
        text-align: left !important;
        
        /* Ensure the links are grouped correctly in the HTML */
    }

    /* 3. Explicitly control the layout flow by targeting the columns (assuming the order is P, S, C, M) */
    .footer__cols > div:nth-child(1) { /* Product */
        grid-column: 1 / 2; /* Column 1, Row 1 (Default) */
        grid-row: 1 / 2;
    }
    .footer__cols > div:nth-child(2) { /* Services */
        grid-column: 2 / 3; /* Column 2, Row 1 */
        grid-row: 1 / 2;
    }
    .footer__cols > div:nth-child(3) { /* Company */
        grid-column: 1 / 2; /* Column 1, Row 2 */
        grid-row: 2 / 3;
    }
    .footer__cols > div:nth-child(4) { /* More */
        grid-column: 2 / 3; /* Column 2, Row 2 */
        grid-row: 2 / 3;
    }

     /* Logo/Lead Text/Dots Block - Should be ORDER 2 (Bottom) */
    .footer__grid > div:first-child { 
        order: 2 !important;
        width: 100% !important;
        text-align: center !important; /* Center the entire block */
        padding-top: 20px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    /* --- B. CENTER ELEMENTS WITHIN LOGO/DOTS BLOCK --- */
    
    /* Logo text (ehya•) */
    .site-logo, 
    .site-logo a {
        display: block;
        text-align: center;
    }
    .footer__grid > div:first-child strong {
        font-size: 28px !important;
        margin-bottom: 5px !important;
    }

    /* Lead Text (Build a modern...) */
    .footer__lead {
        margin: 5px auto 30px !important; 
        max-width: 280px !important;
        font-size: 16px !important;
    }

    /* Dots */
    .dots {
        justify-content: center !important;
        margin: 0 auto 20px !important;
        /* Ensure color is correct */
        background-color: transparent !important; 
    }
  
}



/* =====================================================
   📱 320px LINK READABILITY FIX
   Shrinks link text size for extremely narrow screens.
   ===================================================== */
@media (max-width: 767px) {
    /* Shrink Link Column Headings */
    .footer__cols h4 {
        font-size: 14px !important;
    }

    /* Shrink Link Items */
    .footer__col a {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    /* Adjust spacing */
    .footer__cols {
        gap: 25px 10px !important;
    }
}

/* --- Base Styles (For Mobile: 320px and up) --- */
.popular-container {
    padding: 1rem; /* Add some spacing around the edges */
}

/* Ensure cards stack vertically */
.popular-card {
    display: flex; /* Use flexbox to organize media and content */
    flex-direction: column; /* Stack image on top of content */
    margin-bottom: 2rem;
    border-radius: 12px;
}

.popular-card__image {
    width: 100%;
    height: 200px; /* Fixed height for mobile image */
    margin-bottom: 1rem;
}

.popular-card__title {
    font-size: 1.5rem;
}

.popular-meta {
    flex-direction: column; /* Stack meta elements on tiny screens */
    align-items: flex-start;
}

/* --- Refined Mobile Styles for Avatar (page-all.php) --- */
.popular-meta-left img.avatar, /* get_avatar usually adds a .avatar class */
.popular-meta-left img[width="10"][height="10"] { /* More specific target based on attributes */
    width: 32px !important;   /* Reduce to 32px, or your desired smaller size */
    height: 32px !important;  /* Ensure height matches width */
    border-radius: 50%;       /* Keep it perfectly round */
    object-fit: cover;        /* Ensure the image covers the area nicely */
    margin-right: 0.5rem;     /* Small space between avatar and author name */
    display: block;           /* Remove any inline-block spacing issues */
}

/* Ensure the container of the avatar and author name uses flexbox for alignment */
.popular-meta-left {
    display: flex;
    align-items: center; /* Vertically align avatar and text */
    /* Remove any unnecessary margin-bottom if it causes too much space */
    /* margin-bottom: 0; */ 
}

/* Style for the author name and verified tag */
.popular-author-info {
    display: flex;
    flex-direction: column; /* Stacks 'admin' and 'Verified writer' */
    line-height: 1.2; /* Adjust line spacing if needed */
}

.popular-author-info strong {
    font-size: 0.9em; /* Adjust font size of author name */
}

.popular-author-info .verified-writer {
    font-size: 0.7em; /* Adjust font size of verified text */
    color: #5cb85c; /* Example color for verification */
}

/* General adjustments for the popular-meta container on phones */
.popular-meta {
    display: flex;
    flex-direction: column; /* Stack author/date info vertically on phones */
    gap: 1.0rem; /* Space between author info and date */
    margin-top: 1rem; /* Space between excerpt and meta */
}

.popular-meta-right {
    font-size: 0.85em; /* Adjust date font size */
    color: #666; /* Lighter color for date */
}


/* --- Tablet Styles (min-width: 768px) --- */
@media (min-width: 768px) {

    .popular-container {
        padding: 2rem 4rem; /* Increase padding on larger screens */
    }

    /* Switch to a side-by-side layout for the article card */
    .popular-card {
        flex-direction: row; /* Image and content side-by-side */
        gap: 1.5rem;
    }

    .popular-card__image {
        width: 40%; /* Image takes 40% of the card width */
        height: 355px; /* Increase image height */
        flex-shrink: 0; /* Prevent image from shrinking */
        margin-bottom: 0;
    }

    .popular-card__content {
        width: 60%; /* Content takes 60% of the card width */
    }

    .popular-card__title {
        font-size: 1.75rem;
    }
    
    .popular-meta {
        flex-direction: row; /* Return meta elements to horizontal layout */
        justify-content: space-between;
        align-items: center;
    }
}


@media (max-width: 767px) {
    /* --- All Articles Grid Container Fix --- */
    .all-articles__grid {
        /* Force single column */
        grid-template-columns: 1fr !important;
        /* Center the column */
        justify-content: center !important; 
        /* Ensure containers have padding to keep them off the screen edge */
        padding: 0 10px; 
    }

    /* --- Individual Card Sizing and Alignment Fix --- */
    .post-card {
        /* Force all cards (large and small variants) to span the single column */
        grid-column: span 1 !important; 
        
        /* Ensure they take up the full available width (e.g., 90% of the viewport) */
        width: 100% !important; 
        max-width: 450px !important; /* Set a reasonable maximum width for alignment */
        
        /* Center the card horizontally */
        margin: 0 auto 20px !important; 
        
        /* Set a fixed height for visual uniformity */
        height: 300px !important; 
        
        /* Ensure image/media fills the whole space (important for the overlap look) */
        overflow: hidden !important; 
        position: relative !important;
    }
}
@media (max-width: 767px) {
    /* --- All Articles Grid Container Fix (Sets up centering) --- */
    .all-articles__grid {
        grid-template-columns: 1fr !important;
        justify-content: center !important; 
        padding: 0 10px; 
        gap: 2px !important;
    }
    /* --- Individual Card Sizing and Alignment Fix --- */
    .post-card {
        grid-column: span 1 !important; 
        
        /* 🔥 NEW WIDTH: Set to 288px */
        width: 288px !important; 
        max-width: 288px !important; /* Ensure max-width is also the fixed size */
        
        /* 🔥 NEW HEIGHT: Set to 320px */
        height: 380px !important; 
        
        /* Center the card horizontally and add bottom margin */
        margin: 0 auto 20px !important; 
        
        overflow: hidden !important; 
        position: relative !important;
    }

    /* --- Text/Meta Alignment (Padding for inner content) --- */
    .post-card__content {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        /* Keeping padding at 28px for the look shown in the previous image */
        padding: 28px !important; 
    }

    .post-card__title {
        text-align: left !important;
        font-size: 1.15rem !important; 
        line-height: 1.2 !important; 
    }
    
    .post-card__meta {
        justify-content: space-between !important;
        align-items: center !important;
    }
    
    .meta__left {
        display: flex;
        align-items: center;
    }
    @media (max-width: 767px) {


    /* Target the author's name within the card meta section */
    .post-card__content .meta__author strong {
        /* 🔥 Adjustments for better author readability: */
        font-size: 0.9rem !important;
        color: #ffffff !important;
        font-weight: 600 !important;
    }
}
}



/* --- About Page Styles (Updated with Responsive Queries) --- */

/* 1. Global Setup for About Page */
.about-page .section {
    text-align: center;
}

/* 2. Hero Section */
.about-hero {
    padding-bottom: 96px;
}
.hero__subtitle {
    max-width: 700px;
    margin: auto;
    color: #fff;
    opacity: .9;
}

/* 3. Intro and Story Sections */
.about-intro__sub {
    max-width: 750px;
    margin: auto;
}
.our-story {
    background: #f9fafb;
}
.our-story__sub {
    max-width: 750px;
    margin: auto;
    line-height: 1.8;
}

/* 4. Core Values Section */
.our-values .section__title {
    text-align: center;
}
.values-cards {
    margin-top: 28px;
}
.post__media--blue {
    background: linear-gradient(180deg, #2563eb, #1e293b);
}
.post__media--green {
    background: linear-gradient(180deg, #10b981, #065f46);
}
.post__media--red {
    background: linear-gradient(180deg, #f43f5e, #1e293b);
}
.values-cards .post__content {
    text-align: center;
}

/* 5. Team Section */
.our-team {
    background: #f9fafb;
}
.our-team__sub {
    max-width: 700px;
    margin: auto;
}
.team-cards {
    margin-top: 30px;
}

/* Team Card Images (Ensuring object-fit: cover equivalent) */
.post__media.team-member-1 {
    background: url('images/team1.jpg') center/cover no-repeat;
    background-size: cover;
}
.post__media.team-member-2 {
    background: url('images/team2.jpg') center/cover no-repeat;
    background-size: cover;
}
.post__media.team-member-3 {
    background: url('images/team3.jpg') center/cover no-repeat;
    background-size: cover;
}

.team-cards .post__content {
    /* desktop styles go here */
}

/* ============================================== */
/* 📱 MEDIA QUERIES FOR PHONE & TABLET VIEWS       */
/* ============================================== */

/* Tablet and Phone View: Stacking 3-Column Cards (Max 1024px) */
@media (max-width: 768px) {
    
    /* Reset layout for cards--3 and ensure vertical stacking */
    .values-cards,
    .team-cards {
        display: flex !important;
        flex-direction: column !important; /* Forces 1 card per row */
        gap: 25px; 
        align-items: center; /* Center the entire column */
        margin-top: 25px;
    }

    /* Ensure individual cards take up a readable width */
    .values-cards .post,
    .team-cards .post {
        width: 90%; 
        max-width: 380px; 
        margin: 0 auto;
        padding: 0;
        
        /* Ensure the card content is easily readable */
        background: #ffffff;
        color: #0f172a;
    }
    
    /* Core Values Card (Stacking media and content) */
    .values-cards .post__media {
        height: 120px; 
        width: 100%;
        border-radius: 16px 16px 0 0; 
    }
    .values-cards .post__content {
        padding: 20px;
    }
    
    /* Team Card (Image Overlay Style) */
    .team-cards .post {
        /* Set fixed height for uniform look */
        height: 360px !important; 
        min-height: 360px !important;
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }

    .team-cards .post__media {
        /* Image fills the entire card area */
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        
        /* Ensure cover property remains active */
        background-size: cover !important; 
        border-radius: inherit !important;
    }
    
    .team-cards .post__content {
        /* Content is absolutely positioned at the bottom */
        position: absolute !important; 
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        
        padding: 30px !important;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%) !important;
        color: #ffffff !important;
        text-align: center !important;
        z-index: 10;
        
        /* Use flexbox for vertical centering within the content area */
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
        height: 100% !important; 
    }
}

/* Phone View: Extra narrow screens (Max 480px) */
@media (max-width: 767px) {
    .about-hero .hero__title {
        font-size: 1.8rem;
    }
    .section__title {
        font-size: 1.3rem;
    }
    .values-cards .post,
    .team-cards .post {
        width: 100%; /* Full width on smallest screens */
        max-width: none;
    }
}



/* ========================================================== */
/* 💻 TABLET VIEW FIXES (min-width 769px AND max-width 1024px) - FINAL UNIFORM HEIGHT FIX */
/* ========================================================== */
@media (min-width: 768px)  {
    
    /* 1. Ensure the container centers and uses full available width */
    .popular-container {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
    }
    
    /* 2. FORCE THE OVERALL CARD HEIGHT AND HORIZONTAL FLEX */
    .popular-card {
        /* 🔥 Set the EXACT fixed height for the entire article container */
        height: 350px !important; 
        min-height: 350px !important; 
        
        max-width: 100% !important; 
        margin: 0 auto 30px !important; 
        
        display: flex !important; 
        flex-direction: row !important; /* Forces side-by-side layout */
        align-items: stretch !important; /* Ensures image and content match fixed height */
        
        background: var(--surface, #0f2d52) !important; 
        border-radius: var(--radius, 16px) !important;
        box-shadow: var(--shadow-soft) !important;
        padding: 0 !important; 
        color: var(--ink, #0f172a) !important;
    }
    
    /* 3. Image Container (Left Side) */
    .popular-card__image {
        position: relative !important; 
        flex: 0 0 40% !important; /* Image takes 40% width */
        
        /* 🔥 MATCH CARD HEIGHT: Ensure media fills the card height */
        height: 100% !important; 
        max-height: 100% !important; 
        
        border-radius: var(--radius, 16px) 0 0 var(--radius, 16px) !important; 
        overflow: hidden !important;
    }
    
    /* 4. Text Content Container (Right Side) */
    .popular-card__content {
        position: relative !important; 
        flex: 1 !important; 
        padding: 24px !important;
        
        /* Force the text content to push meta to the bottom */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important; 
        
        background: var(--surface, #0f2d52) !important; 
        color: var(--ink, #0f172a) !important; 
        border-radius: 0 var(--radius, 16px) var(--radius, 16px) 0 !important; 
    }
    
    /* 5. Cleanup */
    .popular-card__title {
        font-size: 1.5rem !important; 
        margin-top: 0 !important;
        margin-bottom: 8px !important;
    }
    .popular-card__excerpt {
        color: var(--muted) !important;
        flex-grow: 1 !important;
        margin-bottom: 15px !important;
    }
    .popular-card .badge {
        position: static !important; 
        margin-bottom: 8px !important; 
    }
    .badge {
    /* Change the display property to inline-flex or inline-block */
    /* inline-flex is generally better for ensuring vertical centering */
    display: inline-flex !important; 
    
    /* Remove any fixed or full-width settings */
    width: auto !important; 
    max-width: fit-content !important; /* Ensures it shrinks to content size */
    
    /* Optional: Ensure text remains centered if padding is high */
    justify-content: center;
    align-items: center;
}
}


/* ================================================= */
/* 💻/📱 CARD STACKING FIX (Tablet and Phone View)    */
/* --- Forces ALL card layouts (cards--2, cards--3) to 1 column --- */
/* ================================================= */
@media (max-width: 768px) {
    
    /* Target the main multi-column card containers */
    .cards,
    .cards--2,
    .cards--3 {
        /* Reset grid/flex properties that cause horizontal display */
        display: flex !important;
        flex-direction: column !important; /* Forces 1 card per row */
        
        /* Ensure the stack is centered and doesn't stretch too wide */
        align-items: center !important;
        margin: 0 auto;
        padding: 0 20px; /* Add horizontal padding if needed */
        
        /* Spacing between the stacked cards */
        gap: 25px !important; 
    }
    
    /* Ensure the individual articles fill the necessary width */
    /* Ensure the overall card forces vertical stacking */
.cards,
.cards--2,
.cards--3 {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    margin: 0 auto;
    padding: 0 20px;
    gap: 25px !important; 
}

/* 1. Set the .post card as the main container for positioning */
.post {
    width: 100% !important; 
    max-width: 600px !important; 
    margin: 0 auto !important;
    
    /* 🔥 Key: Set a fixed height for the entire card for uniformity */
    height: 320px !important; /* Adjust this height as needed */
    min-height: 320px !important; /* Ensure it stays fixed */
    
    position: relative !important; /* Crucial for absolute positioning of children */
    overflow: hidden !important; /* Keeps content within card bounds */
    border-radius: var(--radius, 16px) !important;
    box-shadow: var(--shadow-soft) !important;
    
    /* No background here, as the media will be the background */
    background: none !important; 
    padding: 0 !important;
}

/* 2. Make the media (image) fill the entire card as the background */
.post .post__media {
    position: absolute !important;
    inset: 0 !important; /* Covers the entire .post area */
    width: 100% !important;
    height: 100% !important;
    
    /* Ensure image covers the area, remove any radius on the image div itself */
    border-radius: inherit !important; /* Inherits from .post */
    background-size: cover !important; 
    background-position: center !important;
    z-index: 1; /* Place below overlay and content */
}

/* 3. The overlay for better text contrast */
.post .post__overlay {
    display: block !important; /* Ensure the overlay is visible */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%) !important;
    z-index: 2; /* Below content, above media */
    border-radius: inherit !important;
}

/* 4. Position the content (text, meta) at the bottom over the image */
.post .post__content {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    
    padding: 24px !important; /* Internal padding for the text */
    
    /* Text will be white for contrast over the dark image/overlay */
    color: var(--surface) !important; 
    background: none !important; /* No solid background for the content block */
    z-index: 3; /* Place above the overlay */
    
    /* Ensure title and meta are distinct */
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* Push content to the bottom */
    height: 100% !important; /* Allow content flex to work */
}

/* 5. Adjust text styles for readability over the image */
.post__title {
    font-size: 1.5rem !important; 
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
    color: var(--surface) !important; /* Ensure title is white */
}
.post__meta {
    margin-top: 15px !important;
    color: var(--surface) !important; /* Ensure meta text is white */
}
.post .badge {
    position: absolute !important; /* Position badge specifically */
    top: 20px !important;
    left: 20px !important;
    z-index: 4 !important; /* Above overlay, below content */
}
}



/* ======================================================= */
/* 📱 1. PHONE/VERTICAL STACK FIX (Max 767px) */
/* Targets phones and narrow tablets where the card stacks vertically. */
/* Includes height increase to prevent tight cropping of the illustration. */
/* ======================================================= */
@media screen and (max-width: 767px) {
    /* --- A. Increase the image container height to prevent cropping --- */
    body.page-template-page-home-php .featured .case-card__media,
    body.page-template-home-page .featured .case-card__media,
    body.page-template-page-home-php .section .case-card__media,
    body.page-template-home-page .section .case-card__media,
    body.home .featured .case-card__media,
    body.home .section .case-card__media,
    body.front-page .featured .case-card__media,
    body.front-page .section .case-card__media {
        /* Force a taller height to correctly display the illustration's aspect ratio */
        height: 200px !important; 
        width: 100% !important;
        /* Ensure border radius is only at the top of the container */
        border-radius: 12px 12px 0 0 !important;
    }
    
    /* --- B. Force image to COVER the new, taller container --- */
    .case-card__media img {
        width: 100% !important;
        height: 100% !important;
        /* Use 'cover' to ensure the image fills the container completely */
        object-fit: cover !important; 
        object-position: center !important; 
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* --- C. Ensure overall card uses new height for visual integrity --- */
    .case-card {
        /* This is important to ensure the content area aligns correctly */
        max-height: 550px !important; /* Adjust based on new media height (400) + content height */
    }
}

/* ======================================================= */
/* 💻 FINAL HORIZONTAL TABLET FIX (Min 768px - Max 1439px) */
/* This block syncs dimensions, enables COVER fit, and cleans up spacing. */
/* ======================================================= */
@media (min-width: 768px) and (max-width: 1439px) {

    /* --- 1. CARD BODY STYLES (Content Side) --- */
    .case-card__body {
        /* CRITICAL: Must be 100% minus the image width (50% in this case) */
        width: 50% !important; 
        
        /* Set a consistent, reasonable height for the entire card */
        min-height: 300px !important; 
        
        /* Ensure it remains a flexible column for content spacing */
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important; 
        
        /* Set clean internal padding (lifts meta off the bottom edge) */
        padding: 30px !important; 
        
        /* Ensure border radius is only on the right side */
        border-radius: 0 var(--radius) var(--radius) 0 !important;
    }

    /* --- 2. IMAGE CONTAINER STYLES (Media Side) --- */
    .case-card__media {
        /* Must match the image width from .case-card__body */
        width: 50% !important; 
        
        /* CRITICAL: Height must match the content body height */
        min-height: 400px !important; 
        
        /* Ensure border radius is only on the left side */
        border-radius: var(--radius) 0 0 var(--radius) !important;
        
        /* Ensure image area is white for 'contain' if we were using it, but cover overrides this */
        background-color: var(--surface, #ffffff) !important;
    }
    
    /* --- 3. IMAGE FILL (ELIMINATE WHITE BACKGROUND) --- */
    .case-card__media img {
        width: 100% !important;
        height: 100% !important;
        /* KEY FIX: 'cover' forces the image to fill the container completely, eliminating the white background. */
        object-fit: cover !important; 
        object-position: center !important; 
        margin: 0 !important;
    }

    /* --- 4. GAP/SPACING FIXES (Keep content tight) --- */
    
    /* Title to Excerpt Gap */
    .case-card__title {
        margin: 0 0 8px !important; /* Reduce space below title */
    }

    /* Excerpt to Meta Gap */
    .case-card__excerpt {
        margin-top: 20px !important; /* Pushes the meta block down */
        margin-bottom: 12px !important; 
        flex-grow: 0 !important;
        margin-top: 0 !important; /* Reset margin-top from earlier fixes */
    }
    
    /* Meta Container Reset */
    .meta {
        margin-top: 0 !important; 
        padding-top: 0 !important;
    }
}





/* ------------------------------------------------------ /
/ 2. BASE STYLES (from contact-base.css) /
/ ------------------------------------------------------ */
body {
font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--ink);
background: var(--bg);
line-height: 1.6;
}


/* ------------------------------------------------------ /
/ 3. CONTACT FORM & FOOTER STYLES (from contact-styles.css) /
/ ------------------------------------------------------ */

/* -------------------- Contact Form Base Styles -------------------- */

.contact-section {
    /* 🛠 FIX: Increased bottom padding to create a gap above the footer */
    padding: 80px 0 200px; 
    background: var(--surface);
}
.contact-header {
text-align: center;
margin-bottom: 40px;
}

.contact-title {
font-size: 32px;
font-weight: 800;
color: var(--ink);
margin-bottom: 10px;
}

.contact-subtitle {
font-size: 16px;
color: var(--muted);
max-width: 600px;
margin: 0 auto;
}

.contact-form {
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px;
}

.contact-form label {
font-weight: 600;
font-size: 14px;
color: var(--ink);
margin-top: 15px;
display: block;
}


.input-group {
background: var(--bg); 
border: 1px solid var(--border);
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
overflow: hidden;
display: flex;
align-items: center;
width: 100%;
transition: all 0.2s ease;
}

.input-group:focus-within {
border-color: var(--blue);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.input-group input,
.input-group textarea {
border: none;
outline: none;
padding: 14px 18px;
font-size: 16px;
width: 100%;
color: var(--ink);
background: transparent;
resize: none;
}

.phone-input {
display: flex;
}
.country-code {
padding: 14px 10px;
color: var(--muted);
font-size: 16px;
font-weight: 500;
border-right: 1px solid var(--border);
background: var(--bg);
flex-shrink: 0;
}

.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.form-column {
flex: 1;
}


/* --- Updated Submit Button Styles for Centering --- */
.contact-submit-btn {
    /* ❌ REMOVED: margin-left: auto; (This was for right alignment) */
    
    margin-top: 20px; /* Keep or adjust the vertical gap */
    padding: 10px 24px;
    font-size: 16px;
    border-radius: 8px;
    
    /* Box shadow removed */
    /* If you still had the box-shadow property here, remove it: */
    /* box-shadow: none; */
    
    transition: transform 0.2s ease;
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: none;
}


/* -------------------- Custom Footer STYLING -------------------- */

.custom-footer {
background: var(--footer-bg); /* Main dark blue background */
color: var(--footer-text);
padding-top: 60px;
position: relative;
overflow: hidden;
font-size: 15px;
}

.footer-content-wrapper {
display: grid;
grid-template-columns: 1fr; /* Default to single column for mobile */
gap: 40px;
padding-bottom: 40px;
}


.footer-left-block {
background: var(--footer-dark-blue); 
padding: 30px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 15px;
}

.footer-logo .logo-name {
font-size: 30px;
font-weight: 800;
color: #fff;
letter-spacing: .5px;
display: block;
}

.footer-description {
font-size: 15px;
color: var(--footer-light-text);
line-height: 1.6;
margin: 0;
max-width: 250px;
}

.dots-with-product {
display: flex;
align-items: center;
gap: 20px;
margin-top: 10px;
}

.dots {
display: flex;
gap: 8px;
}
.dots span {
width: 25px;
height: 25px;
border-radius: 50%;
background: var(--brand);
display: block;
}

/* --- Footer Right Sections (Contact Info, Location, Hours) --- */
.footer-right-sections {
display: flex;
flex-direction: column;
gap: 30px;
}

.footer-section {
display: flex;
flex-direction: column;
gap: 15px;
}

.contact-details-group {
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
}


.contact-icon {
width: 18px;
height: 18px;

color: var(--brand);
flex-shrink: 0;
margin-top: 3px;
stroke-width: 2;
}

.contact-text {
font-size: 15px;
line-height: 1.5;
color: var(--footer-light-text);
}
.location-text {
line-height: 1.4;
}

.business-hours {
font-size: 14px;
color: var(--footer-light-text);
margin-top: 20px;
margin-bottom: 0;
}


.footer-copyright {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 18px 0;
font-size: 14px;
color: var(--footer-light-text);
text-align: center;
}
.copyright-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}



/* 📱 1. PHONE VIEW (Max 767px) - FINAL ALIGNMENT FIX */

@media screen and (max-width: 767px) {

.form-row {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 0;
}
.contact-submit-btn {
    width: 100%;
    align-self: center;
}

/* Footer stacking on mobile */
.footer-content-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 30px;
}

.footer-left-block {
    order: 2; 
    padding: 20px;
    
    /* 1. Ensure logo/dots block content is centered (it was already, but good to check) */
    text-align: center; 
    align-items: center; 
}

.footer-right-sections {
    order: 1; 
    
    /* 2. CRITICAL: Align the entire contact info block to the CENTER */
    align-items: center; 
    
    gap: 20px;
    
    /* 3. CRITICAL: Ensure all internal text is centered */
    text-align: center;
    
    /* Remove padding-left if it was added for left alignment */
    padding-left: 0; 
}

.contact-details-group {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    width: 100%;
    
    /* 4. Center the group items (email/phone/location rows) */
    align-items: center;
}

.contact-item {
    /* 5. Center the icon/text pair */
    justify-content: center; 
    
    flex-direction: row; 
    align-items: flex-start;
    gap: 10px;
}

/* 6. Ensure the contact text itself can be centered (needed for multiline address) */
.contact-text {
    text-align: center;
}

.contact-icon {
    color: #FC5A5A; 
    margin-top: 5px; 
    flex-shrink: 0;
}

.business-hours {
    /* 7. Center business hours */
    text-align: center;
    align-self: center;
}


/* --- Footer Copyright Section Styles --- */

/* Ensures the entire bar spans the width and sets the background */
.footer-copyright {
    background-color: #0f2d52;
    padding: 30px 0; 
}

/* Centers the content inside the inner container */
/* Centers the content inside the inner container */
.copyright-inner {
    text-align: center;
    color: #ffffff;
    /* 🔑 CRITICAL FIX: Ensure the parent container uses standard block flow, 
       overriding any display: flex or display: grid inherited from desktop styles. */
    display: block; 
}

/* Style for the Copyright Text */
.copyright-inner .copyright-text {
    font-size: 1.0rem;
    margin-bottom: 17px; 
    line-height: 1.5;
    
    /* Ensure it takes full width for stacking */
    display: block; 
    
    /* Remove any forced shift */
    transform: none; 
}

/* Style for the Blue Circle Wrapper */
.copyright-icon-wrapper {
    width: 35px;
    height: 35px;
    background-color: #3366ff;
    border-radius: 50%;
    /* margin: 0 auto; centers the block */
    margin: 0 auto; 
    /* Use flex for internal centering of the heart, but it still functions as a block */
    display: flex; 
    justify-content: center;
    align-items: center;
    cursor: pointer;
    
    /* Remove any forced shift */
    transform: none; 
}
/* Updated: Style for the SVG White Heart Icon */
.copyright-heart-icon-svg {
    color: #ffffff;
    width: 25px; 
    height: 25px; 
}
}


/* 💻 2. TABLET VIEW (Min 768px and Max 1439px) - FINAL POSITIONING FIX */

@media screen and (min-width: 768px) and (max-width: 1439px) {

.custom-footer {
    padding-top: 40px; 
}
    
.footer-content-wrapper {
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px;
    padding: 0 40px 30px;
}
.footer-left-block {
    padding: 30px;
    align-items: flex-start;
}
.dots-with-product {
    margin-top: 10px;
}

.footer-right-sections {
    gap: 20px;
    text-align: left; 
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
    flex-direction: column; 
    width: 100%;
    margin-left: 50px; 

    /* 1. MOVE CONTACT BLOCK DOWN: Use margin-top to push the block down. 
       Adjust this value (e.g., 10px, 20px) to fine-tune the vertical balance. */
    margin-top: 30px; 
}

.contact-details-group {
    align-items: flex-start; 
}

.contact-item {
    flex-direction: row; 
    justify-content: flex-start; 
    align-items: flex-start; 
    gap: 10px; 
}

/* 2. PREVENT PHONE NUMBER WRAP: Target the specific phone number text */
.contact-item:nth-child(2) .contact-text {
    white-space: nowrap; 
}

/* Add font-size rules back if you want to keep the tablet size larger than base */
.contact-text {
    /* Example to match previous suggestion: */
    /* font-size: 16px; */ 
}
    
.contact-icon {
    color: #FC5A5A; 
    margin-right: 10px;
    margin-top: 5px; 
    flex-shrink: 0;
}

.business-hours {
    margin-top: 10px;
    align-self: flex-start;
}


/* --- Footer Copyright Section Styles --- */

/* Ensures the entire bar spans the width and sets the background */
.footer-copyright {
    background-color: #0f2d52;
    padding: 30px 0; 
}

/* Centers the content inside the inner container */
.copyright-inner {
    text-align: center;
    color: #ffffff;
}

/* Style for the Copyright Text */
.copyright-inner .copyright-text {
    font-size: 1rem;
    margin-bottom: 18px; 
    line-height: 1.5;
    
    /* This shifts the text 150 pixels to the right */
    transform: translateX(170px); 
}

/* Style for the Blue Circle Wrapper */
.copyright-icon-wrapper {
    width: 30px;
    height: 30px;
    background-color: #3366ff;
    border-radius: 50%;
    margin: 0 auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    /* 🛠 FIX: Apply the same horizontal shift to align the button under the text */
    transform: translateX(-30px); 
}

/* Updated: Style for the SVG White Heart Icon */
.copyright-heart-icon-svg {
    color: #ffffff;
    width: 20px; 
    height: 20px; 
}
}


/* 🖥 3. DESKTOP VIEW (Min 1440px) - ALIGNMENT & FONT SIZE EDIT */

@media screen and (min-width: 1440px) {
.footer-content-wrapper {
    grid-template-columns: 350px 1fr; 
    gap: 120px; 
    padding-bottom: 60px;
}

.footer-left-block {
    padding: 40px;
    gap: 20px;
    
    /* 💡 OPTIONAL: Increase logo and description text here */
    /*
    .footer-logo .logo-name { font-size: 32px; }
    .footer-description { font-size: 16px; }
    */
}

.footer-right-sections {
    align-items: flex-start;
    text-align: left; 
    margin-left: auto;
    margin-right: -100px; 
}

.contact-details-group {
    align-items: flex-start; 
    width: 100%; 
}

.contact-item {
    justify-content: flex-start; 
    align-items: flex-start;
    flex-direction: row; 
    position: static;
    padding-right: 0;
}

/* 💡 ADDED: Increase font size for Email, Phone, and Location text */
.contact-text {
    font-size: 18px; /* Increased from 15px */
}

/* 🎨 ICON COLOR FIX: Use the desired color and align it */
.contact-item .contact-icon {
    color: #FC5A5A; 
    margin-top: 5px; 
    flex-shrink: 0;
}

/* Handle multiline location text */
.contact-item.contact-location .contact-text {
    text-align: left; 
}

.business-hours {
    /* 💡 ADDED: Increase font size for Business Hours text */
    font-size: 20px; /* Increased from 14px */
    text-align: left;
    margin-top: 32px;
}

.copyright-inner {
    text-align: center;
}

.copyright-text {
    font-size: 18px;
    margin-bottom: 25px;
}

.copyright-icon-wrapper {
    width: 65px; /* Slightly larger circle */
    height: 65px; 
}

/* Updated: Desktop styling for the SVG White Heart Icon */
.copyright-heart-icon-svg {
    width: 28px;   /* Slightly larger SVG heart for desktop */
    height: 28px;  
}

/* --- Footer Copyright Section Styles --- */

/* Ensures the entire bar spans the width and sets the background */
.footer-copyright {
    background-color: #0f2d52;
    padding: 30px 0; 
}

/* Centers the content inside the inner container */
.copyright-inner {
    text-align: center;
    color: #ffffff;
}

/* Style for the Copyright Text */
.copyright-inner .copyright-text {
    font-size: 1rem;
    margin-bottom: 18px; 
    line-height: 1.5;
    
    /* 👈 NEW: Shift the text 10 pixels to the right */
    transform: translateX(390px); 
}

/* Style for the Blue Circle Wrapper */
.copyright-icon-wrapper {
    width: 30px;
    height: 30px;
    background-color: #3366ff;
    border-radius: 50%;
    margin: 0 auto; /* Keeps the button centered */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* Updated: Style for the SVG White Heart Icon */
.copyright-heart-icon-svg {
    color: #ffffff;
    width: 20px; 
    height: 20px; 
}
}