@charset "UTF-8";

/*  
Theme Name: citywide
Theme URI: https://thedesigningworld.com/
Description: CityWide Project, Very simple theme. Markup of css which can facilitate customization.
Version: 2.0
Author: Go Imai
Author URI: https://thedesigningworld.com/
Tags: black,silver,white,light,two-columns,right-sidebar,fixed-width,custom-background,custom-menu,editor-style,sticky-post,translation-ready,threaded-comments
License: GNU General Public License v5.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/*-----------------------------------------------------------------------------
 WordPress CMS Theme. Based on work by CityWide Project: http://CityWide.studiobrain.net/
---------------------------------------------------------------------------- */

/*reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent;}
body{line-height:1;}
ol, ul{list-style:none;margin:0;padding:0;}
blockquote, q{quotes:none;}
:focus{outline:0;}
ins{text-decoration:none;}
del{text-decoration:line-through;}
table{border-collapse:collapse;border-spacing:0;}
caption{width:100%;}
a{outline:none;}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('../fonts/Roboto-Bold.eot');
    src: url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Bold.woff2') format('woff2'),
        url('../fonts/Roboto-Bold.woff') format('woff'),
        url('../fonts/Roboto-Bold.ttf') format('truetype'),
        url('../fonts/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.eot');
    src: url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Light.woff2') format('woff2'),
        url('../fonts/Roboto-Light.woff') format('woff'),
        url('../fonts/Roboto-Light.ttf') format('truetype'),
        url('../fonts/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.eot');
    src: url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Black.woff2') format('woff2'),
        url('../fonts/Roboto-Black.woff') format('woff'),
        url('../fonts/Roboto-Black.ttf') format('truetype'),
        url('../fonts/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.eot');
    src: url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Regular.woff2') format('woff2'),
        url('../fonts/Roboto-Regular.woff') format('woff'),
        url('../fonts/Roboto-Regular.ttf') format('truetype'),
        url('../fonts/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.eot');
    src: url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Roboto-Medium.woff2') format('woff2'),
        url('../fonts/Roboto-Medium.woff') format('woff'),
        url('../fonts/Roboto-Medium.ttf') format('truetype'),
        url('../fonts/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root{
	--brand: #0081a8;
    --text: #000;
    --muted: #6c757d;
    --border: #e6e6e6;
    --bg: #fff;
    --menuWidth: 300px;
	--footer-blue:#154e8b;     /* top strip */
	--footer-dark:#1f2429;     /* main footer background */
	--footer-dark-2:#21262c;   /* subtle contrast */
	--footer-text:#e6e9ee;
	--footer-muted:#b9c0c9;
	--divider:rgba(255,255,255,.12);
}
*{ box-sizing: border-box; }
body{ font-family: 'Roboto'; color: var(--text); }
footer p {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 15px;
}
/* ---------------- Top Bar ---------------- */
.new_top_bar {display: flex; justify-content: space-between; align-items: center; background: #0080A8; color: #000; padding: 0px 0px 0px 20px; font-family: Arial, sans-serif; font-size: 14px; flex-wrap: wrap;}
.new_top_bar .top-left {display: flex;align-items: center; flex-wrap: wrap; gap: 20px;}
.new_top_bar .top-left i {margin-right: 6px;}

.new_top_bar .top-right {background: #ff7802;display: flex; align-items: center; gap: 15px; padding: 15px 15px;}
.new_top_bar .top-right a {color: #000;font-size: 16px;transition: color 0.3s;}
.new_top_bar .top-right a:hover {color: #4d9bbf;}

/* -------------- Navbar -------------- */
.navbar{background: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,.06); padding:.7rem 0;}
.navbar-nav .nav-link{color: var(--text) !important; padding: 20px 20px !important;transition: all .25s;}
.navbar-nav .nav-link:hover{color: var(--brand) !important;}
.navbar-brand img{height: 140px; margin-bottom: -80px; position: relative; z-index: 3;}

/* Dropdown menu */
.dropdown-menu{border:1px solid var(--border);border-radius:0rem; padding:0rem; min-width: 18rem;}
.dropdown-item{ border-radius:0rem; padding:15px 10px;}
.dropdown-item:hover{ background: var(--brand); color:#fff; border-radius:0rem;}
.dropdown-submenu{ position: relative; }
.dropdown-submenu > .dropdown-menu{top:0; left:100%;margin-left:.25rem; margin-top:-.5rem;}

/* Desktop hover open */
@media (min-width: 992px){
	.dropdown:hover > .dropdown-menu{ display:block;border-radius: 0px; width: 190px;}
	.dropdown-submenu:hover > .dropdown-menu{ display:block; backdrop-color:#f00; color:#fff;}
}

/* -------------- Banner -------------- */
.hero-slide {height: 100vh;min-height: 500px; position: relative;}
.hero-slide .overlay {position:absolute;inset:0;z-index:1;}
.hero-slide .container {z-index:2;}
.text-brand {color: #0080A8;}
.btn-brand {background: #0080A8;color:#fff; padding:.75rem 1.5rem; font-weight:600; border-radius:.5rem; transition:.3s;}
.btn-brand:hover {background:#d68910; color:#fff;}
.carousel-control-prev-icon, .carousel-control-next-icon {background-size: 70% 70%; filter: invert(1);}
.text-align-right{text-align:right;}
.carousel-item h1 span {
    display: inline-block;
    width: 100%;
}

/* ============ TOP STRIP ============ */
.footer-topstrip{background:#0080A8;color:#000; text-align:center; padding:40px 0;}
.footer-topstrip .kicker{opacity:.85; letter-spacing:.12em; text-transform:uppercase; font-weight:600; font-size:.9rem;}
.footer-topstrip .hotline{font-weight:800; font-size:2.1rem; line-height:1.1;margin-top:.25rem;}
.footer-topstrip .hotline b{ font-weight:800; }

/* ============ MAIN FOOTER ============ */
.site-footer{position:relative; color:var(--footer-text); background:var(--footer-dark); overflow:hidden;}


.site-footer::before{content:""; position:absolute; inset:0; background: radial-gradient(1200px 600px at 50% -10%, rgba(255,255,255,.05), transparent 60%), repeating-linear-gradient(-18deg, rgba(255,255,255,.03) 0 40px, rgba(0,0,0,0) 40px 80px); mix-blend-mode:overlay; opacity:.55; pointer-events:none;}

.footer-inner{ position:relative; z-index:1; padding:64px 0 28px; }
.footer-brand{font-size:2.25rem; font-weight:800; letter-spacing:.02em; display:inline-block; line-height:1;}
.footer-tag{margin-top:.15rem;text-transform:lowercase; letter-spacing:.17em; font-size:.9rem; color:var(--footer-muted);}
.footer-desc{ color:var(--footer-muted); margin-top:18px; }
.footer-title{font-size:1.5rem;font-weight:800; margin-bottom:1rem;}
h2.wp-block-heading, p.widgetTitle {
    font-size:1.5rem;font-weight:800; margin-bottom:1rem;
}

.wp-block-list li{color:var(--footer-text);text-decoration:none; display:block; padding:10px 0; opacity:.85;}
#menu-main-menu-1 a{color:var(--footer-text);text-decoration:none; display:block; padding:10px 0; opacity:.85;}
.footer-links a{color:var(--footer-text);text-decoration:none; display:block; padding:.35rem 0; opacity:.85;}
#menu-main-menu-1 a:hover{ opacity:1; text-decoration:underline; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }

.footer-contact i{width:22px; text-align:center; opacity:.9; margin-right:.5rem;}
.footer-contact p{ margin-bottom:.45rem; color:var(--footer-text); opacity:.95; }
.footer-divider{border-top:1px solid var(--divider); margin-top:36px; margin-bottom:16px;}

/* Social boxed icons (bottom-right) */
.footer-social a{width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:#2b3137; border:1px solid var(--divider); color:#ffffff; text-decoration:none; border-radius:6px; margin-left:.4rem; transition:transform .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; opacity:.95;}
.footer-social a:hover{background:#32383f; border-color:#3f4650; transform:translateY(-2px); opacity:1;}
.footer-copy{color:var(--footer-muted); font-size:.95rem;}
.carousel-control-next, .carousel-control-prev {width: 10% !important;}
.footerWidget img {width: 100%;height: auto;max-width: 250px !important; margin: auto;display: block;}


/*Blog Banner*/
.blog_title_bar {background-color: #0080A8;padding: 76px 0px;}
.blog_title_bar h1{font-family: "Outfit", Sans-serif;font-size: 38px; font-weight: 600; line-height: 48px; color: #000000; text-align: center;}

.blog_set {font-family: "Outfit", Sans-serif;line-height: 26px; color: #000;font-size: 16px;}

/* Headings */
.blog_set h1,
.blog_set h2,
.blog_set h3,
.blog_set h4,
.blog_set h5,
.blog_set h6 {font-weight: 600; line-height: 1.3; margin: 1.5em 0 0.6em; color: #111;}

.blog_set h1 {font-size: 2rem;}
.blog_set h2 {font-size: 1.75rem;}
.blog_set h3 {font-size: 1.5rem;}
.blog_set h4 {font-size: 1.25rem;}
.blog_set h5 {font-size: 1.1rem;}
.blog_set h6 {font-size: 1rem; font-weight: 500; color: #666;}

/* Paragraphs */
.blog_set p {margin-bottom: 15px;}

/* Links */
.blog_set a {color: #0073e6; text-decoration: none;}
.blog_set a:hover {text-decoration: underline;}

/* Lists */
.blog_set ul,
.blog_set ol {margin: 1em 0 1.2em 1.5em;}
.blog_set li {margin-bottom: 0.5em;}

/* Blockquote */
.blog_set blockquote {border-left: 4px solid #0073e6; padding-left: 1em; margin: 1.5em 0; color: #555; font-style: italic; background: #f9f9f9;}

/* Images */
.blog_set img {max-width: 100%; height: auto; display: block; margin: 1.5em auto; border-radius: 6px;}

/* Tables */
.blog_set table {width: 100%; border-collapse: collapse; margin: 1.5em 0;}
.blog_set table th,
.blog_set table td {border: 1px solid #ddd; padding: 0.75em; text-align: left;}
.blog_set table th {background: #f2f2f2;font-weight: 600;}

/* Code blocks */
.blog_set pre,
.blog_set code {font-family: "Outfit", Sans-serif;background: #f4f4f4; padding: 0.3em 0.6em; border-radius: 4px;}
.blog_set pre {overflow-x: auto;padding: 1em; margin: 1.5em 0;}


/* -------------- Mobile Slide-in Menu -------------- */
@media (max-width: 991.98px){
    .navbar .navbar-collapse{position: fixed; top:0; left:-100%; height:100vh; width: var(--menuWidth); background:#fff; box-shadow: 8px 0 24px rgba(0,0,0,.08); padding:1rem 1rem 2rem; overflow-y:auto; transition:left .35s ease; z-index: 10000;}
    .navbar .navbar-collapse.show{ left:0; }
    .nav-overlay{content:""; position: fixed; inset:0; background: rgba(0,0,0,.35); opacity:0; pointer-events:none; transition: opacity .3s ease; z-index: 9999;}
    .nav-overlay.show{ opacity:1; pointer-events:auto; }
	.mobile-close{display:flex; align-items:center; justify-content:space-between; padding-bottom:.75rem; border-bottom:1px solid var(--border); margin-bottom: .75rem;}
    .mobile-close span{ font-weight:600; }	  
	.footer-topstrip{ padding:18px 0; }
    .footer-topstrip .hotline{ font-size:1.75rem; }
    .footer-inner{ padding:52px 0 24px; }
	.footer-title{ margin-top:12px; }
}
@media (max-width: 768px) {
	.new_top_bar {flex-direction: column; align-items: flex-start;}
	.new_top_bar .top-right {width: 100%; justify-content: center; margin-top: 10px;}
}
@media (max-width: 575.98px){
    .footer-topstrip .kicker{ font-size:.82rem; letter-spacing:.1em; }
    .footer-topstrip .hotline{ font-size:1.55rem; }
	.footer-brand{ font-size:2rem; }
}

/* Toggle symbol (+ / -) */
.submenu-toggle::after{content: "+"; float:right; font-weight:700; transition:.3s; margin-left:6px;}
.submenu-toggle.open::after{ content:"-"; }

.floating-icons {
  position: fixed;
  bottom: 20px;   /* distance from bottom */
  left: 20px;    /* distance from right */
  display: flex;
  flex-direction: column;
  gap: 15px;      /* space between icons */
  z-index: 9999;  /* always on top */
}

.floating-icons img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
  cursor: pointer;
}

.floating-icons img:hover {
  transform: scale(1.1);
}