/* ==========================================================================
   Caritas Egypt — site overrides for the Charity-sympathy template
   Loaded after css/style.css and css/responsive.css
   ========================================================================== */

:root{
  --ce-red:#ff2e3d;
  --ce-dark:#252525;
  --ce-grey:#848484;
}

/* ---------- Wordmark logo (replaces the template's logo.png) -------------- */
/* Fixed to 115px so the menu bar keeps the height the template's layout
   expects — the hero and page banners pull up by exactly that much. */
.ce-logo{ margin:0; padding-top:22px; height:115px; }
.ce-logo a{ display:block; line-height:1; text-decoration:none; }
.ce-logo .ce-logo-mark{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:34px;
  font-weight:800;
  letter-spacing:-1px;
  color:#ff2e3d;
  text-transform:lowercase;
}
/* The menu bar sits over a dark photo (the hero, or the page banner), so the
   wordmark is light by default and switches to dark once the sticky white bar
   takes over on scroll. */
.ce-logo .ce-logo-sub{
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:15px;
  font-weight:700;
  letter-spacing:7px;
  color:#ffffff;
  margin-top:2px;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.ce-logo .ce-logo-tag{
  display:block;
  font-family:'Open Sans', sans-serif;
  font-size:11px;
  font-style:italic;
  color:rgba(255,255,255,.72);
  margin-top:4px;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.ce-logo .ce-logo-mark{ text-shadow:0 1px 4px rgba(0,0,0,.3); }

/* The sticky bar is also dark, so the wordmark stays light — it just gets
   more compact. */
.stricky-fixed .ce-logo{ height:auto; padding-top:14px; padding-bottom:14px; }
.stricky-fixed .ce-logo .ce-logo-tag{ display:none; }

/* ---------- Menu fit -----------------------------------------------------
   Six top-level items don't fit the template's default column widths, so the
   menu wrapped onto a second line. Give the menu a little more room and set a
   slightly tighter type size. If you add a seventh item, tighten further or
   move one item into a dropdown.
   ------------------------------------------------------------------------- */
@media only screen and (min-width:992px){
  .theme_menu .col-md-3{ width:21%; }
  .theme_menu .menu-column{ width:63%; padding-left:0; padding-right:0; }
  .main-menu .navigation > li > a{ font-size:13px; margin-right:12px; }
  .main-menu .navigation > li:last-child > a{ margin-right:0; }
}
@media only screen and (min-width:992px) and (max-width:1199px){
  .theme_menu .col-md-3{ width:18%; }
  .theme_menu .menu-column{ width:67%; }
  .main-menu .navigation > li > a{
    font-size:11px; margin-right:2px; padding-left:5px; padding-right:5px;
  }
  .ce-logo .ce-logo-mark{ font-size:28px; }
  .ce-logo .ce-logo-sub{ font-size:11px; letter-spacing:4px; }
  .ce-logo .ce-logo-tag{ font-size:10px; }
}

/* ---------- Home hero ---------------------------------------------------- */
.ce-hero{
  position:relative;
  margin-top:-115px;
  padding:250px 0 150px;
  background:#2a2a2a center center/cover no-repeat;
  text-align:left;
}
.ce-hero:before{
  content:'';
  position:absolute; left:0; top:0; width:100%; height:100%;
  background:linear-gradient(90deg, rgba(20,20,20,.82) 0%, rgba(20,20,20,.55) 60%, rgba(20,20,20,.35) 100%);
}
.ce-hero .container{ position:relative; z-index:2; }
.ce-hero h5{
  color:#ff2e3d; font-size:15px; font-weight:700;
  letter-spacing:4px; text-transform:uppercase; margin-bottom:18px;
}
.ce-hero h1{
  color:#fff; font-size:56px; line-height:1.12; font-weight:800;
  text-transform:uppercase; margin-bottom:22px;
}
.ce-hero h1 span{ color:#ff2e3d; }
.ce-hero p{
  color:#e8e8e8; font-size:17px; line-height:30px;
  max-width:640px; margin-bottom:34px;
}
.ce-hero .ce-hero-btns a{ margin-right:14px; margin-bottom:12px; }

@media only screen and (max-width:767px){
  .ce-hero{ padding:200px 0 90px; }
  .ce-hero h1{ font-size:34px; }
}

/* ---------- Page banner: allow a per-page photo -------------------------- */
.ce-banner{
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.ce-banner .text p{ max-width:760px; margin:0 auto; }

/* ---------- Generic section helpers -------------------------------------- */
.ce-section{ padding:90px 0; }
.ce-section.alt{ background:#f7f7f7; }
.ce-section .section-title{ margin-bottom:50px; }

.ce-lead{ font-size:18px; line-height:32px; color:#5f5f5f; }
.ce-quote{
  border-left:4px solid #ff2e3d;
  padding:6px 0 6px 24px;
  margin:26px 0;
  font-size:19px; line-height:33px; font-style:italic; color:#333;
}
.ce-quote cite{ display:block; font-size:13px; font-style:normal; color:#9e9e9e; margin-top:10px; }

/* ---------- Pillar / value cards ----------------------------------------- */
.ce-pillars .ce-pillar{
  background:#fff; border:1px solid #eaeaea; padding:38px 30px;
  text-align:center; margin-bottom:30px;
  transition:all .3s ease;
}
.ce-pillars .ce-pillar:hover{ box-shadow:0 14px 34px rgba(0,0,0,.09); transform:translateY(-4px); border-color:#fff; }
.ce-pillars .ce-pillar .icon{
  width:78px; height:78px; line-height:78px; margin:0 auto 22px;
  border-radius:50%; background:#ff2e3d; color:#fff; font-size:30px;
}
.ce-pillars .ce-pillar h3{
  font-size:19px; font-weight:700; text-transform:uppercase;
  color:#252525; margin-bottom:14px; letter-spacing:.5px;
}
.ce-pillars .ce-pillar p{ color:#848484; line-height:26px; margin:0; }

/* Equal-height cards in a row (Bootstrap 3 floats leave them ragged). */
@media only screen and (min-width:768px){
  .ce-pillars .row,
  .ce-where .row,
  .ce-news .row{ display:flex; flex-wrap:wrap; }
  .ce-pillars .row > [class*="col-"],
  .ce-where .row > [class*="col-"],
  .ce-news .row > [class*="col-"]{ display:flex; float:none; }
  .ce-pillars .ce-pillar,
  .ce-where .ce-where-col,
  .ce-news .ce-news-item{ width:100%; }
}

/* ---------- Topic cards --------------------------------------------------- */
.ce-topics .ce-topic{
  position:relative; display:block; height:250px;
  margin-bottom:30px; overflow:hidden; background:#252525;
}
.ce-topics .ce-topic img{
  position:absolute; left:0; top:0; width:100%; height:100%;
  object-fit:cover; display:block; opacity:.62; transition:all .4s ease;
}
.ce-topics .ce-topic:hover img{ opacity:.38; transform:scale(1.06); }
.ce-topics .ce-topic .ce-topic-body{
  position:absolute; left:0; bottom:0; width:100%; padding:26px 24px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%);
}
.ce-topics .ce-topic h4{
  color:#fff; font-size:19px; font-weight:700; text-transform:uppercase;
  margin:0 0 6px; letter-spacing:.5px;
}
.ce-topics .ce-topic p{ color:#d8d8d8; font-size:13px; line-height:22px; margin:0; }

/* ---------- Programme detail blocks -------------------------------------- */
.ce-prog{ padding:70px 0; border-bottom:1px solid #eee; }
.ce-prog:nth-child(even){ background:#f9f9f9; }
.ce-prog img{ width:100%; height:340px; object-fit:cover; background:#e5e5e5; }
.ce-prog h2{
  font-size:30px; font-weight:800; text-transform:uppercase;
  color:#252525; margin:0 0 8px; letter-spacing:.5px;
}
.ce-prog h2 span{ color:#ff2e3d; }
.ce-prog .ce-kicker{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:#ff2e3d; margin-bottom:14px;
}
.ce-prog p{ color:#6d6d6d; line-height:29px; }
.ce-prog .ce-contact-line{
  margin-top:18px; padding-top:16px; border-top:1px solid #e4e4e4;
  font-size:13px; color:#9a9a9a;
}
.ce-prog .ce-contact-line a{ color:#ff2e3d; }

/* ---------- Where-we-work columns ---------------------------------------- */
.ce-where .ce-where-col{
  background:#fff; border-top:4px solid #ff2e3d; padding:34px 30px;
  margin-bottom:30px; box-shadow:0 4px 20px rgba(0,0,0,.05); height:100%;
}
.ce-where .ce-where-col h3{
  font-size:20px; font-weight:800; text-transform:uppercase;
  color:#252525; margin:0 0 6px;
}
.ce-where .ce-where-col .ce-sub{ font-size:12px; color:#a5a5a5; letter-spacing:1px; text-transform:uppercase; margin-bottom:18px; display:block; }
.ce-where .ce-where-col ul{ margin:0; padding:0; list-style:none; }
.ce-where .ce-where-col ul li{
  position:relative; padding:8px 0 8px 24px; color:#6d6d6d;
  font-size:14px; border-bottom:1px dashed #ececec;
}
.ce-where .ce-where-col ul li:last-child{ border-bottom:0; }
.ce-where .ce-where-col ul li:before{
  content:'\f105'; font-family:'FontAwesome'; position:absolute; left:4px; top:8px; color:#ff2e3d;
}

/* ---------- Facts counter tweaks ----------------------------------------- */
.ce-facts{ background:#252525 center center/cover no-repeat; position:relative; padding:80px 0; }
.ce-facts:before{ content:''; position:absolute; inset:0; background:rgba(25,25,25,.88); }
.ce-facts .container{ position:relative; z-index:2; }
.ce-facts .ce-fact{ text-align:center; margin-bottom:20px; }
.ce-facts .ce-fact .ce-num{
  font-family:'Montserrat', sans-serif; font-size:46px; font-weight:800; color:#fff; line-height:1;
}
.ce-facts .ce-fact .ce-num span{ color:#ff2e3d; }
.ce-facts .ce-fact h4{
  font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  color:#c9c9c9; margin-top:14px; font-weight:600; line-height:20px;
}

/* ---------- Call to action band ------------------------------------------ */
.ce-cta{
  background:#ff2e3d; padding:58px 0; text-align:center;
}
.ce-cta h2{ color:#fff; font-size:30px; font-weight:800; text-transform:uppercase; margin:0 0 10px; }
.ce-cta p{ color:rgba(255,255,255,.9); font-size:16px; margin:0 0 26px; }
.ce-cta .thm-btn{ background:#fff !important; color:#ff2e3d !important; border-color:#fff !important; }
.ce-cta .thm-btn:hover{ background:#252525 !important; color:#fff !important; border-color:#252525 !important; }

/* ---------- News cards ---------------------------------------------------- */
.ce-news .ce-news-item{ background:#fff; border:1px solid #eee; margin-bottom:30px; }
.ce-news .ce-news-item img{ width:100%; height:210px; object-fit:cover; background:#e9e9e9; }
.ce-news .ce-news-item .ce-news-body{ padding:24px 22px 28px; }
.ce-news .ce-news-item .ce-date{ font-size:12px; color:#ff2e3d; letter-spacing:1px; text-transform:uppercase; }
.ce-news .ce-news-item h4{ font-size:17px; line-height:26px; font-weight:700; color:#252525; margin:10px 0 12px; }
.ce-news .ce-news-item p{ font-size:14px; line-height:24px; color:#8a8a8a; margin:0; }

/* ---------- Events -------------------------------------------------------- */
.ce-news .ce-news-item h4 a{ color:#252525; transition:color .25s ease; }
.ce-news .ce-news-item h4 a:hover{ color:#ff2e3d; text-decoration:none; }
.ce-news .ce-news-item > a{ display:block; overflow:hidden; }
.ce-news .ce-news-item > a img{ transition:transform .5s ease; }
.ce-news .ce-news-item:hover > a img{ transform:scale(1.05); }

/* Placeholder when an event has no photo — shows the date instead. */
.ce-news-noimg{
  height:210px; background:#252525; color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.ce-news-noimg span{
  font-family:'Montserrat', sans-serif; font-size:26px; font-weight:800;
  text-transform:uppercase; letter-spacing:1px; color:#ff2e3d;
}

.ce-news .ce-where-line{
  font-size:13px; color:#9a9a9a; margin:0 0 8px;
}
.ce-news .ce-where-line i{ color:#ff2e3d; margin-right:5px; }

/* Past events sit back a little so upcoming ones lead. */
.ce-news .ce-past img,
.ce-news .ce-past .ce-news-noimg{ filter:saturate(.55) opacity(.85); }
.ce-news .ce-past:hover img,
.ce-news .ce-past:hover .ce-news-noimg{ filter:none; }

.ce-event-body{ margin-top:26px; }
.ce-event-body p{ color:#5f5f5f; font-size:16px; line-height:31px; margin-bottom:18px; }

/* ---------- Get involved ------------------------------------------------- */
.ce-involve{ background:#fff; border:1px solid #ebebeb; padding:40px 34px; margin-bottom:30px; }
.ce-involve .icon{ font-size:34px; color:#ff2e3d; margin-bottom:18px; display:block; }
.ce-involve h3{ font-size:21px; font-weight:800; text-transform:uppercase; color:#252525; margin:0 0 14px; }
.ce-involve p{ color:#7c7c7c; line-height:27px; }
.ce-involve ul{ padding-left:0; list-style:none; margin:16px 0 0; }
.ce-involve ul li{ padding:7px 0 7px 22px; position:relative; color:#6d6d6d; font-size:14px; }
.ce-involve ul li:before{ content:'\f00c'; font-family:'FontAwesome'; position:absolute; left:0; top:7px; color:#ff2e3d; font-size:12px; }

.ce-donate-box{
  background:#252525; color:#fff; padding:44px 40px; margin-top:10px;
}
.ce-donate-box h3{ color:#fff; font-size:24px; font-weight:800; text-transform:uppercase; margin:0 0 18px; }
.ce-donate-box p{ color:#c4c4c4; line-height:28px; }
.ce-donate-box .ce-account{
  background:rgba(255,255,255,.07); border-left:4px solid #ff2e3d;
  padding:20px 24px; margin:22px 0; font-size:15px; line-height:28px;
}
.ce-donate-box .ce-account strong{ color:#fff; letter-spacing:1px; }
.ce-donate-box .ce-note{ font-size:13px; color:#9a9a9a; font-style:italic; }

/* ---------- Contact cards ------------------------------------------------ */
.ce-contact-card{
  background:#fff; border:1px solid #ececec; padding:40px 28px; text-align:center;
  margin-bottom:30px; transition:all .3s ease;
}
.ce-contact-card:hover{ box-shadow:0 12px 30px rgba(0,0,0,.08); }
.ce-contact-card .icon_box{
  width:74px; height:74px; line-height:74px; margin:0 auto 20px;
  border-radius:50%; background:#ff2e3d; color:#fff; font-size:26px;
}
.ce-contact-card h4{ font-size:18px; font-weight:700; text-transform:uppercase; color:#252525; margin-bottom:12px; }
.ce-contact-card p{ color:#8b8b8b; font-size:14px; line-height:24px; margin-bottom:10px; }
.ce-contact-card h5{ font-size:15px; color:#ff2e3d; font-weight:600; word-break:break-word; }
.ce-contact-card h5 a{ color:#ff2e3d; }

.ce-map iframe{ width:100%; height:420px; border:0; display:block; }

/* ---------- Footer tweaks ------------------------------------------------ */
.ce-footer-logo{
  font-family:'Montserrat', sans-serif; font-size:34px; font-weight:800;
  text-transform:lowercase; color:#fff; margin:0 0 6px; letter-spacing:-1px;
}
.ce-footer-logo span{ color:#ff2e3d; }
.ce-footer-links li{ padding:5px 0; }
.ce-footer-links li h5{ margin:0; font-size:14px; font-weight:400; }
.ce-footer-links li h5 a{ color:#b9b9b9; transition:color .3s ease; }
.ce-footer-links li h5 a:hover{ color:#ff2e3d; }
.ce-footer-social{ margin-top:18px; padding-left:0; list-style:none; }
.ce-footer-social li{ display:inline-block; margin-right:8px; }
.ce-footer-social li a{
  width:36px; height:36px; line-height:36px; text-align:center; display:block;
  border:1px solid rgba(255,255,255,.2); color:#bdbdbd; border-radius:50%;
  transition:all .3s ease;
}
.ce-footer-social li a:hover{ background:#ff2e3d; border-color:#ff2e3d; color:#fff; }
.footer-bottom .text p{ line-height:24px; font-size:13px; }
.footer-bottom .text p a{ color:#ff2e3d; }

/* ---------- Anchor offset for the sticky header -------------------------- */
[id]{ scroll-margin-top:120px; }