#header {
 background: #fff;
 transition: all 0.5s;
 z-index: 997;
 padding: 15px 0;
 box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#header .logo {
 font-size: 28px;
 margin: 0;
 padding: 0;
 line-height: 1;
 font-weight: 700;
 letter-spacing: 0.5px;
 text-transform: uppercase;
}

#header .logo a {
 color: #111;
}

#header .logo a span {
 color: #023866;
}

#header .logo img {
 max-height: 40px;
}

/*--------------------------------------------------------------
# Header Social Links
--------------------------------------------------------------*/
.header-social-links {
 margin-left: 20px;
 border-left: 1px solid #c4c4c4;
}

.header-social-links a {
 color: #a0a0a0;
 display: inline-block;
 line-height: 0px;
 transition: 0.3s;
 padding-left: 20px;
}

.header-social-links a i {
 line-height: 0;
}

.header-social-links a:hover {
 color: #023866;
}

@media (max-width: 768px) {
 .header-social-links {
  padding: 0 15px 0 0;
  border-left: 0;
 }
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation
*/
.navbar {
 padding: 0;
}

.navbar ul {
 margin: 0;
 padding: 0;
 display: flex;
 list-style: none;
 align-items: center;
}

.navbar li {
 position: relative;
}

.navbar a {
 display: flex;
 align-items: center;
 justify-content: space-between;
 padding: 10px 0 10px 30px;
 font-family: 'Roboto', sans-serif;
 font-size: 13px;
 font-weight: 600;
 color: #111;
 white-space: nowrap;
 text-transform: uppercase;
 transition: 0.3s;
}

.navbar a i {
 font-size: 12px;
 line-height: 0;
 margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a {
 color: #023866;
}

.navbar .dropdown ul {
 display: block;
 position: absolute;
 left: 14px;
 top: calc(100% + 30px);
 margin: 0;
 padding: 10px 0;
 z-index: 99;
 opacity: 0;
 visibility: hidden;
 background: #fff;
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
 transition: 0.3s;
 border-top: 2px solid #023866;
}

.navbar .dropdown ul li {
 min-width: 200px;
}

.navbar .dropdown ul a {
 padding: 10px 20px;
 font-size: 14px;
 font-weight: 500;
 text-transform: none;
 color: #111;
}

.navbar .dropdown ul a i {
 font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
 color: #023866;
}

.navbar .dropdown:hover > ul {
 opacity: 1;
 top: 100%;
 visibility: visible;
}

.navbar .dropdown .dropdown ul {
 top: 0;
 left: calc(100% - 30px);
 visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
 opacity: 1;
 top: 0;
 left: 100%;
 visibility: visible;
}

@media (max-width: 1366px) {
 .navbar .dropdown .dropdown ul {
  left: -90%;
 }
 .navbar .dropdown .dropdown:hover > ul {
  left: -100%;
 }
}

/**
* Mobile Navigation
*/
.mobile-nav-toggle {
 color: #111;
 font-size: 28px;
 cursor: pointer;
 display: none;
 line-height: 0;
 transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
 color: #fff;
}

@media (max-width: 992px) {
 .mobile-nav-toggle {
  display: block;
 }
 .navbar ul {
  display: none;
 }
}

.navbar-mobile {
 position: fixed;
 overflow: hidden;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 background: rgba(0, 0, 0, 0.9);
 transition: 0.3s;
 z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
 position: absolute;
 top: 15px;
 right: 15px;
}

.navbar-mobile ul {
 display: block;
 position: absolute;
 top: 55px;
 right: 15px;
 bottom: 15px;
 left: 15px;
 padding: 10px 0;
 background-color: #fff;
 overflow-y: auto;
 transition: 0.3s;
}

.navbar-mobile a {
 padding: 10px 20px;
 font-size: 15px;
 color: #111;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
 color: #023866;
}

.navbar-mobile .getstarted {
 margin: 15px;
}

.navbar-mobile .dropdown ul {
 position: static;
 display: none;
 margin: 10px 20px;
 padding: 10px 0;
 z-index: 99;
 opacity: 1;
 visibility: visible;
 background: #fff;
 box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
 min-width: 200px;
}

.navbar-mobile .dropdown ul a {
 padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
 font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
 color: #023866;
}

.navbar-mobile .dropdown > .dropdown-active {
 display: block;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
 padding: 60px 0;
 overflow: hidden;
}

.section-bg {
 background-color: #f7f7f7;
}

.section-title {
 text-align: center;
 padding-bottom: 30px;
}

.section-title h2 {
 font-size: 32px;
 font-weight: bold;
 text-transform: uppercase;
 margin-bottom: 20px;
 padding-bottom: 20px;
 position: relative;
}

.section-title h2::after {
 content: '';
 position: absolute;
 display: block;
 width: 50px;
 height: 3px;
 background: #023866;
 bottom: 0;
 left: calc(50% - 25px);
}

.section-title p {
 margin-bottom: 0;
}

/*--------------------------------------------------------------
# innbar
--------------------------------------------------------------*/
.innbar {
 padding: 15px 0;
 background: #023866;
 min-height: 40px;
 margin-top: 72px;
}

.innbar h2 {
 font-size: 26px;
 font-weight: 300;
 color: #fff;
}

.innbar ol {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 padding: 0;
 margin: 0;
 color: #fff;
}

.innbar ol a {
 color: #fff;
}

.innbar ol li + li {
 padding-left: 10px;
}

.innbar ol li + li::before {
 display: inline-block;
 padding-right: 10px;
 color: #fff;
 content: '/';
}

@media (max-width: 991px) {
 .innbar {
  margin-top: 58px;
 }
 .innbar .d-flex {
  display: block !important;
 }
 .innbar ol {
  display: block;
 }
 .innbar ol li {
  display: inline-block;
 }
}

/*--------------------------------------------------------------
# Topic
--------------------------------------------------------------*/
.topic {
 padding: 40px 0 20px 0;
}

.topic .info {
 padding: 30px;
 margin-bottom: 60px;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.topic-img {
 max-height: 540px;
 width: 100%;
 margin: -30px -30px 20px -30px;
 overflow: hidden;
}

.topic-title {
 font-size: 28px;
 font-weight: bold;
 color: #111;
 padding: 0;
 margin: 0 0 20px 0;
}
.topic-title h2 {
 font-size: 28px;
 font-weight: bold;
 color: #111;
 padding: 0;
 margin: 0 0 20px 0;
}

.topic .info .info-title a {
 color: #111;
 transition: 0.3s;
}

.topic .info-title a:hover {
 color: #023866;
}

.topic-meta {
 margin-bottom: 15px;
 color: #777777;
}

.topic-meta ul {
 display: flex;
 flex-wrap: wrap;
 list-style: none;
 align-items: center;
 padding: 0;
 margin: 0;
}

.topic .info .info-meta ul li + li {
 padding-left: 20px;
}

.topic .info .info-meta i {
 font-size: 16px;
 margin-right: 8px;
 line-height: 0;
}

.topic .info .info-meta a {
 color: #847872;
 font-size: 14px;
 display: inline-block;
 line-height: 1;
}

.topic-content p {
 line-height: 30px;
}

.topic h3 {
 margin-top: 1.5rem;
}

.topic .info .info-content .read-more {
 -moz-text-align-last: right;
 text-align-last: right;
}

.topic .info .info-content .read-more a {
 display: inline-block;
 background: #023866;
 color: #fff;
 padding: 6px 20px;
 transition: 0.3s;
 font-size: 14px;
 border-radius: 4px;
}

.topic .info .info-content .read-more a:hover {
 background: #1ed33c;
}

.topic .info .info-content h3 {
 font-size: 22px;
 margin-top: 30px;
 font-weight: bold;
}

.topic .info .info-content blockquote {
 overflow: hidden;
 background-color: #fafafa;
 padding: 60px;
 position: relative;
 text-align: center;
 margin: 20px 0;
}

.topic .info .info-content blockquote p {
 color: #4d4643;
 line-height: 1.6;
 margin-bottom: 0;
 font-style: italic;
 font-weight: 500;
 font-size: 22px;
}

.topic .info .info-content blockquote::after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 bottom: 0;
 width: 3px;
 background-color: #111;
 margin-top: 20px;
 margin-bottom: 20px;
}

.topic .info .info-footer {
 padding-top: 10px;
 border-top: 1px solid #e6e6e6;
}

.topic .info .info-footer i {
 color: #5e5e5e;
 display: inline;
}

.topic .info .info-footer a {
 color: #1e1e1e;
 transition: 0.3s;
}

.topic .info .info-footer a:hover {
 color: #023866;
}

.topic .info .info-footer .cats {
 list-style: none;
 display: inline;
 padding: 0 20px 0 0;
 font-size: 14px;
}

.topic .info .info-footer .cats li {
 display: inline-block;
}

.topic .info .info-footer .tags {
 list-style: none;
 display: inline;
 padding: 0;
 font-size: 14px;
}

.topic .info .info-footer .tags li {
 display: inline-block;
}

.topic .info .info-footer .tags li + li::before {
 padding-right: 6px;
 color: #6c757d;
 content: ',';
}

.topic .info .info-footer .share {
 font-size: 16px;
}

.topic .info .info-footer .share i {
 padding-left: 5px;
}

.topic .info-single {
 margin-bottom: 30px;
}

.topic .topic-author {
 padding: 20px;
 margin-bottom: 30px;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.topic .topic-author img {
 width: 120px;
 margin-right: 20px;
}

.topic .topic-author h4 {
 font-weight: 600;
 font-size: 22px;
 margin-bottom: 0px;
 padding: 0;
 color: #111;
}

.topic .topic-author .social-links {
 margin: 0 10px 10px 0;
}

.topic .topic-author .social-links a {
 color: rgba(17, 17, 17, 0.5);
 margin-right: 5px;
}

.topic .topic-author p {
 font-style: italic;
 color: #bfb9b6;
}

/*=====================Sidebar =================*/
.topic .sidebar {
 padding: 30px;
 margin: 0 0 60px 20px;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.topic .sidebar .sidebar-title {
 font-size: 20px;
 font-weight: 700;
 padding: 0 0 0 0;
 margin: 0 0 15px 0;
 color: #111;
 position: relative;
}

.topic .sidebar .sidebar-item {
 margin-bottom: 30px;
}

.topic .sidebar .search-form form {
 background: #fff;
 border: 1px solid #ddd;
 padding: 3px 10px;
 position: relative;
}

.topic .sidebar .search-form form input[type='text'] {
 border: 0;
 padding: 4px;
 border-radius: 4px;
 width: calc(100% - 40px);
}

.topic .sidebar .search-form form button {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 border: 0;
 background: none;
 font-size: 16px;
 padding: 0 15px;
 margin: -1px;
 background: #023866;
 color: #fff;
 transition: 0.3s;
 border-radius: 0 4px 4px 0;
 line-height: 0;
}

.topic .sidebar .search-form form button i {
 line-height: 0;
}

.topic .sidebar .search-form form button:hover {
 background: #1ecf3b;
}

.topic .sidebar .categories ul {
 list-style: none;
 padding: 0;
}

.topic .sidebar .categories ul li + li {
 padding-top: 10px;
}

.topic .sidebar .categories ul a {
 color: #111;
 transition: 0.3s;
}

.topic .sidebar .categories ul a:hover {
 color: #023866;
}

.topic .sidebar .categories ul a span {
 padding-left: 5px;
 color: #b4aca8;
 font-size: 14px;
}

.topic .sidebar .recent-posts .post-item + .post-item {
 margin-top: 15px;
}

.topic .sidebar .recent-posts img {
 width: 80px;
 float: left;
}

.topic .sidebar .recent-posts h4 {
 font-size: 15px;
 margin-left: 95px;
 font-weight: bold;
}

.topic .sidebar .recent-posts h4 a {
 color: #111;
 transition: 0.3s;
}

.topic .sidebar .recent-posts h4 a:hover {
 color: #023866;
}

.topic .sidebar .recent-posts time {
 display: block;
 margin-left: 95px;
 font-style: italic;
 font-size: 14px;
 color: #b4aca8;
}

.topic .sidebar .tags {
 margin-bottom: -10px;
}

.topic .sidebar .tags ul {
 list-style: none;
 padding: 0;
}

.topic .sidebar .tags ul li {
 display: inline-block;
}

.topic .sidebar .tags ul a {
 color: #515151;
 font-size: 14px;
 padding: 6px 14px;
 margin: 0 6px 8px 0;
 border: 1px solid #c4c4c4;
 display: inline-block;
 transition: 0.3s;
}

.topic .sidebar .tags ul a:hover {
 color: #fff;
 border: 1px solid #023866;
 background: #023866;
}

.topic .sidebar .tags ul a span {
 padding-left: 5px;
 color: #aaaaaa;
 font-size: 14px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
 color: #fff;
 font-size: 14px;
 background: #111;
}

#footer .footer-top {
 padding: 60px 0 30px 0;
 background: #023866;
}

#footer .footer-top .footer-contact {
 margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
 font-size: 22px;
 margin: 0 0 10px 0;
 padding: 2px 0 2px 0;
 line-height: 1;
 font-weight: 500;
 letter-spacing: 1px;
 text-transform: uppercase;
 color: #fff;
}

#footer .footer-top .footer-contact p {
 font-size: 14px;
 line-height: 24px;
 margin-bottom: 0;
 font-family: 'Roboto', sans-serif;
 color: rgba(255, 255, 255, 0.7);
}

#footer .footer-top h4 {
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 position: relative;
 padding-bottom: 12px;
}

#footer .footer-top .footer-links {
 margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
 list-style: none;
 padding: 0;
 margin: 0;
}

#footer .footer-top .footer-links ul i {
 padding-right: 2px;
 color: #1ed33c;
 font-size: 18px;
 line-height: 1;
}

#footer .footer-top .footer-links ul li {
 padding: 10px 0;
 display: flex;
 align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
 padding-top: 0;
}

#footer .footer-top .footer-links ul a {
 color: rgba(255, 255, 255, 0.6);
 transition: 0.3s;
 display: inline-block;
 line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
 text-decoration: none;
 color: #fff;
}

#footer .footer-newsletter {
 font-size: 15px;
 color: rgba(255, 255, 255, 0.7);
}

#footer .footer-newsletter h4 {
 font-size: 16px;
 font-weight: bold;
 color: #fff;
 position: relative;
 padding-bottom: 12px;
}

#footer .footer-newsletter form {
 margin-top: 30px;
 background: #fff;
 padding: 6px 10px;
 position: relative;
 border-radius: 4px 0 0 4px;
 text-align: left;
}

#footer .footer-newsletter form input[type='email'] {
 border: 0;
 padding: 4px 8px;
 width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type='submit'] {
 position: absolute;
 top: 0;
 right: -4px;
 bottom: 0;
 border: 0;
 background: none;
 font-size: 16px;
 padding: 0 20px;
 background: #023866;
 color: #fff;
 transition: 0.3s;
 border-radius: 0 4px 4px 0;
 box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type='submit']:hover {
 background: #21d9df;
}

#footer .credits {
 padding-top: 5px;
 font-size: 13px;
 color: #fff;
}

#footer .social-links a {
 font-size: 18px;
 display: inline-block;
 background: rgba(255, 255, 255, 0.08);
 color: #fff;
 line-height: 1;
 padding: 8px 0;
 margin-right: 4px;
 border-radius: 4px;
 text-align: center;
 width: 36px;
 height: 36px;
 transition: 0.3s;
}

#footer .social-links a:hover {
 background: hsl(216, 75%, 42%);
 color: #ffffff;
 text-decoration: none;
}