/* ---------------------------------------------------------------------------
   rescue.css — original fallback stylesheet for the beyazresidence.net static
   mirror (Wayback rescue, source snapshot 2022-06-03).

   The site ran the commercial BeTheme 21.4.6. The Internet Archive preserved
   only base.css / style.css of that theme; layout.css, shortcodes.css,
   responsive.css, animations.min.css and ALL theme JavaScript were never
   captured. No BeTheme code was copied here — this file is written from
   scratch against the theme's surviving class names so the archived markup
   lays out correctly without them.

   Colour decisions are taken from the site's OWN inline theme-options CSS:
     #263271  header / hero navy      (#Header_wrapper, #Intro)
     #0f84e7  accent blue             (.quick_fact .title, .button)
     #0d122d  deep navy
     #bec2d5 / #becee8  muted light blue text
   Typeface: Ubuntu (the theme's configured Google font).
   --------------------------------------------------------------------------- */

:root {
  --brand-navy: #263271;
  --brand-navy-deep: #0d122d;
  --brand-blue: #0f84e7;
  --brand-blue-dark: #0a6bbe;
  --brand-muted: #bec2d5;
  --text: #4a4a4a;
  --heading: #1c1e33;
  --line: #e4e7f0;
}

* { box-sizing: border-box; }

html { height: auto; }

body {
  margin: 0;
  /* base.css pins body{min-width:960px}; the responsive.css that lifted it on
     small screens was never archived, so it is released here. */
  min-width: 0;
  font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: #fff;
  overflow-x: hidden;
}

#Wrapper { max-width: 100%; margin: 0; overflow: visible; box-shadow: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Ubuntu", "Helvetica Neue", Arial, sans-serif;
  color: var(--heading);
  line-height: 1.3;
  margin: 0 0 15px;
  font-weight: 500;
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; font-weight: 400; }
h6 { font-size: 15px; }
p { margin: 0 0 1em; }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { color: var(--brand-blue-dark); }
img { max-width: 100%; height: auto; border: 0; display: block; }
hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
hr.no_line { border: 0; margin: 0; height: 0; }
hr.hr_narrow { width: 60px; margin: 12px auto; border-top: 2px solid var(--brand-blue); }

/* ---------------------------------------------------------------- layout ---
   base.css ships a float grid whose widths assume the lost layout.css
   box-sizing/padding rules. It is replaced here by an equivalent flex grid
   using the same class names. */

.container,
.section_wrapper { max-width: 1220px; margin: 0 auto; padding: 0 24px; position: relative; }

.section { padding: 40px 0; position: relative; }
.section.full-width { padding: 0; }

.mcb-wrap-inner,
.wrap > .mcb-wrap-inner { display: flex; flex-wrap: wrap; align-items: flex-start; margin: 0 -12px; }

.wrap { width: 100%; }
.wrap.two-fifth  { width: 40%; }
.wrap.three-fifth { width: 60%; }
.wrap.one { width: 100%; }
.section_wrapper.mcb-section-inner { display: flex; flex-wrap: wrap; }

.column {
  float: none !important;
  margin: 0 0 24px !important;
  padding: 0 12px;
  min-width: 0;
  width: 100%;
}
.column.one           { width: 100%; }
.column.one-second    { width: 50%; }
.column.one-third     { width: 33.3333%; }
.column.two-third     { width: 66.6666%; }
.column.one-fourth    { width: 25%; }
.column.three-fourth  { width: 75%; }
.column.one-fifth     { width: 20%; }
.column.two-fifth     { width: 40%; }
.column.three-fifth   { width: 60%; }
.column.one-sixth     { width: 16.6666%; }

.column_placeholder { display: none; }
.column_attr { position: relative; }
.align_center { text-align: center; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------------------------------------------------------------- header ---
   The archived markup uses BeTheme's "overlay" header: the nav lives inside
   #Overlay and is revealed by theme JavaScript that no longer exists. It is
   restyled here as a permanently visible horizontal bar. */

#Header_wrapper { background-color: var(--brand-navy); background-image: none !important; position: relative; }

/* #Overlay (the nav) is a SIBLING of #Top_bar in the archived markup, so the
   header itself becomes the flex row: logo on the left, menu on the right. */
#Header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 28px;
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 24px;
}

#Top_bar {
  position: relative !important;
  background: transparent;
  padding: 0;
  order: 1;
  flex: 0 0 auto;
  z-index: 5;
}
#Top_bar .container { max-width: none; padding: 0; }
#Top_bar .column.one { margin: 0 !important; padding: 0; width: auto; }
.top_bar_left { display: flex; align-items: center; justify-content: flex-start; }

/* text logo — the image logo (uploads/2020/12/beyazeryaman_logo.png) is lost */
#Top_bar .logo { margin: 0; }
/* the theme's inline CSS pins #logo to line-height:60px / padding:15px 0 for the
   image logo that no longer exists — override it for the text mark */
#Top_bar .logo a#logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.15;
  padding: 0;
  white-space: nowrap;
}
#Top_bar .logo a#logo:hover { color: #fff; }
#Top_bar .logo a#logo .logo-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .22em;
  line-height: 1.2;
  color: var(--brand-muted);
  text-transform: uppercase;
  margin-top: 4px;
}
#logo img { display: none; }

.menu_wrapper, .secondary_menu_wrapper, .banner_wrapper, .search_wrapper,
.header_placeholder { display: none; }
.overlay-menu-toggle { display: none; }

#Overlay {
  position: static !important;
  background: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block !important;
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
}
#overlay-menu { position: static !important; display: block; }

ul#menu-main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: static !important;
  transform: none !important;
}
ul#menu-main-menu li { margin: 0; padding: 0; list-style: none; }
ul#menu-main-menu li a {
  display: block;
  padding: 8px 13px;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  border-radius: 5px;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
ul#menu-main-menu li a:hover { background: rgba(255, 255, 255, .13); color: #fff; }
ul#menu-main-menu li.current-menu-item > a,
ul#menu-main-menu li.current_page_item > a { background: var(--brand-blue); color: #fff; }

/* -------------------------------------------------------------- hero ---
   Slider Revolution 5.4.8 hero: its JavaScript AND all twelve slide
   photographs are absent from the archive, so the slider markup is replaced
   by a static hero carrying the site's own wording. */

.rescue-hero {
  background: linear-gradient(160deg, #263271 0%, #1b2454 55%, #0d122d 100%);
  color: #fff;
  padding: 96px 0 104px;
  text-align: center;
}
.rescue-hero .container { max-width: 900px; }
.rescue-hero h1 {
  color: #fff;
  font-size: 46px;
  font-weight: 300;
  letter-spacing: .02em;
  margin: 0 0 18px;
}
.rescue-hero h1 strong { font-weight: 700; display: block; letter-spacing: .06em; }
.rescue-hero .hero-sep { width: 148px; height: 4px; background: var(--brand-blue); margin: 26px auto; border-radius: 2px; }
.rescue-hero p { color: var(--brand-muted); font-size: 18px; margin: 0 auto 30px; max-width: 640px; }
.rescue-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.rescue-hero .hero-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 30px; border-radius: 6px;
  font-size: 15px; font-weight: 500; letter-spacing: .03em;
  background: var(--brand-blue); color: #fff;
  border: 2px solid var(--brand-blue);
  transition: background-color .2s ease, color .2s ease;
}
.rescue-hero .hero-btn:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff; }
.rescue-hero .hero-btn.ghost { background: transparent; border-color: rgba(255, 255, 255, .55); }
.rescue-hero .hero-btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.rescue-hero .hero-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

/* ------------------------------------------------------------ shortcodes ---
   .image_frame, .quick_fact and .button styling lived in the lost
   shortcodes.css. */

.image_frame { margin: 0 0 12px; }
.image_frame .image_wrapper { position: relative; overflow: hidden; }
.image_frame img { margin: 0 auto; }
.image_frame .mask { display: none; }

/* service tiles (the four linked icon cards) */
.column_column > .column_attr > a[style*="border"] {
  border: 1px solid rgba(147, 153, 184, .55) !important;
  border-radius: 8px;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  height: 100%;
}
.column_column > .column_attr > a[style*="border"]:hover {
  background: rgba(255, 255, 255, .07);
  border-color: var(--brand-blue) !important;
  transform: translateY(-3px);
}
.rescue-tile-icon { width: 88px; height: 88px; margin: 0 auto 6px; display: block; }
.rescue-tile-icon svg { width: 100%; height: 100%; fill: none; stroke: #becee8; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.column_column > .column_attr > a[style*="border"]:hover .rescue-tile-icon svg { stroke: #fff; }

/* section separator that used home_smarthome_sep1.png (148x5, lost) */
.rescue-sep { width: 148px; height: 4px; background: var(--brand-blue); margin: 0 auto; border-radius: 2px; }

.quick_fact { text-align: center; padding: 10px 0 20px; }
.quick_fact .number-wrapper { color: var(--brand-blue); font-weight: 500; }
.quick_fact .number { font-size: 72px; line-height: 1; display: inline-block; }
.quick_fact .title { color: var(--brand-blue); font-size: 17px; font-weight: 400; margin: 8px 0 0; line-height: 1.4; }
.quick_fact .desc { display: none; }

a.button, .button_align a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 6px;
  color: #fff !important; font-size: 14px; font-weight: 500; letter-spacing: .03em;
  line-height: 1.3; text-align: center; border: 0; box-shadow: none;
  transition: filter .2s ease;
}
a.button:hover { filter: brightness(.92); color: #fff !important; }
/* the theme set this one button to a pale blue inline; white-on-pale fails contrast */
a.button[style*="#95c5f8"] { color: var(--brand-navy-deep) !important; font-weight: 700; }
a.button.button_full_width { width: 100%; }
.button_align { width: 100%; }
.button_align.align_center { text-align: center; }
a.button .button_icon { display: inline-flex; }
a.button .button_icon i { font-style: normal; }

/* the theme's icon font (icon-*) was not archived; empty glyph spans are hidden */
i[class^="icon-"]:empty, i[class*=" icon-"]:empty { display: none; }

/* ---------------------------------------------------------- rescue notice ---
   The online payment / debt tracking / heating automation portals were
   server-side systems that no longer exist. Their links are preserved, but
   each destination explains the situation and points to the management line. */

.rescue-note {
  border: 1px solid #d6e4f6;
  border-left: 4px solid var(--brand-blue);
  background: #f2f7fd;
  border-radius: 6px;
  padding: 18px 22px;
  margin: 0 0 24px;
  color: #35414f;
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}
.rescue-note strong { color: var(--heading); font-weight: 500; }
.rescue-note.on-dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(190, 206, 232, .35);
  border-left-color: var(--brand-blue);
  color: #dfe4f2;
}
.rescue-note.on-dark strong { color: #fff; }
.rescue-note a { font-weight: 500; }
.rescue-note.on-dark a { color: #9ecbf5; }

.rescue-contact { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; }
.rescue-contact a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 6px;
  background: var(--brand-blue); color: #fff; font-size: 14px; font-weight: 500;
}
.rescue-contact a:hover { background: var(--brand-blue-dark); color: #fff; }
.rescue-contact a.alt { background: #25d366; }
.rescue-contact a.alt:hover { background: #1eb257; }
.rescue-contact svg { width: 17px; height: 17px; fill: currentColor; flex: none; }

/* interior stub pages */
.rescue-subheader { background: var(--brand-navy); color: #fff; padding: 54px 0 58px; text-align: center; }
.rescue-subheader h1 { color: #fff; font-size: 34px; margin: 0; letter-spacing: .04em; }
.rescue-subheader p { color: var(--brand-muted); margin: 12px 0 0; font-size: 16px; }
.rescue-page { padding: 56px 0 64px; }
.rescue-page .container { max-width: 820px; }
.rescue-page h2 { font-size: 26px; margin-top: 34px; }
.rescue-page h2:first-child { margin-top: 0; }
.rescue-page ul { margin: 0 0 1em; padding-left: 22px; }
.rescue-page li { margin-bottom: .4em; }

.rescue-bank { border: 1px solid var(--line); border-radius: 8px; padding: 20px 24px; margin: 0 0 24px; }
.rescue-bank .lbl { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8a93a5; margin: 0 0 4px; }
.rescue-bank .iban { font-size: 19px; font-weight: 500; color: var(--heading); letter-spacing: .04em; margin: 0; }

/* ---------------------------------------------------------------- footer ---*/

#Footer {
  background: var(--brand-navy-deep) !important;
  background-image: none !important;
  color: #97a0bb;
  padding: 0 !important;
  margin: 0;
}
#Footer .footer_copy { border-top: 1px solid rgba(255, 255, 255, .08); padding: 28px 0 30px; }
#Footer .container { display: flex; flex-direction: column; align-items: center; gap: 14px; }
#Footer .column.one { margin: 0 !important; padding: 0; width: 100%; text-align: center; }
#Footer .copyright { font-size: 14px; color: #8b94b0; }
#Footer .copyright a { color: #becee8; }

#Footer ul.social {
  display: flex; justify-content: center; gap: 10px;
  list-style: none; margin: 14px 0 0; padding: 0; float: none;
}
#Footer ul.social li { margin: 0; }
#Footer ul.social li a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); color: #becee8;
  transition: background-color .2s ease, color .2s ease;
}
#Footer ul.social li a:hover { background: var(--brand-blue); color: #fff; }
#Footer ul.social svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------ responsive ---
   responsive.css was not archived. */

@media only screen and (max-width: 1120px) {
  #Header { flex-direction: column; justify-content: center; padding: 20px 24px 16px; }
  #Top_bar, #Overlay { flex: 0 0 auto; width: 100%; }
  .top_bar_left { justify-content: center; }
  ul#menu-main-menu { justify-content: center; }
}

@media only screen and (max-width: 960px) {
  .column.one-fourth { width: 50%; }
  .column.one-third  { width: 33.3333%; }
  .wrap.two-fifth, .wrap.three-fifth { width: 100%; }
  .rescue-hero h1 { font-size: 36px; }
  .rescue-hero { padding: 70px 0 76px; }
  h2 { font-size: 28px; }
}

@media only screen and (max-width: 680px) {
  body { font-size: 15px; }
  .column.one-fourth, .column.one-third, .column.one-second,
  .column.two-third, .column.three-fourth, .column.one-fifth,
  .column.two-fifth, .column.three-fifth, .column.one-sixth { width: 100%; }
  .container, .section_wrapper { padding: 0 18px; }
  .section { padding: 34px 0; }
  .rescue-hero { padding: 54px 0 58px; }
  .rescue-hero h1 { font-size: 28px; }
  .rescue-hero p { font-size: 16px; }
  .rescue-hero .hero-actions { flex-direction: column; }
  .rescue-hero .hero-btn { width: 100%; justify-content: center; }
  ul#menu-main-menu li a { font-size: 12px; padding: 7px 10px; }
  #logo { font-size: 20px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h3 { font-size: 21px; }
  .quick_fact .number { font-size: 56px; }
  .rescue-contact a { width: 100%; justify-content: center; }
  .rescue-subheader h1 { font-size: 26px; }
}