.portfolio #portfolio-flters {
      padding: 2px 15px;
      margin: 0 auto 35px;
      list-style: none;
      text-align: center;
      border-radius: 50px
}

.portfolio #portfolio-flters li {
      cursor: pointer;
      display: inline-block;
      padding: 10px 20px 12px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
      text-transform: uppercase;
      color: #313030;
      margin-bottom: 5px;
      transition: .3s ease-in-out
}

#footer .credits a,
#footer .footer-top .footer-links ul a:hover,
.mobile-nav-toggle.bi-x,
.portfolio #portfolio-flters li.filter-active,
.portfolio #portfolio-flters li:hover,
.services .icon-box:hover .icon i,
.team .member .social a:hover {
      color: #0dcaf0
}

.portfolio #portfolio-flters li:last-child {
      margin-right: 0
}

#footer .footer-top .footer-links,
.portfolio .portfolio-item {
      margin-bottom: 30px
}

.portfolio .portfolio-item .portfolio-info {
      opacity: 0;
      position: absolute;
      left: 30px;
      right: 30px;
      bottom: 0;
      z-index: 3;
      transition: .3s ease-in-out;
      background: rgba(246, 240, 240, .9);
      padding: 15px
}

.portfolio .portfolio-item .portfolio-info h4 {
      font-size: 18px;
      font-weight: 600;
      color: #473d3a
}

.portfolio .portfolio-item .portfolio-info p {
      color: #7f6d68;
      font-size: 14px;
      margin-bottom: 0
}

.portfolio .portfolio-item .portfolio-info .details-link,
.portfolio .portfolio-item .portfolio-info .preview-link {
      position: absolute;
      right: 40px;
      font-size: 24px;
      top: calc(50% - 18px);
      color: #635551
}

.portfolio .portfolio-item .portfolio-info .details-link:hover,
.portfolio .portfolio-item .portfolio-info .preview-link:hover {
      color: #ff5821
}

.portfolio .portfolio-item .portfolio-info .details-link {
      right: 10px
}

.portfolio .portfolio-item:hover .portfolio-info {
      height: auto;
      opacity: 1;
      bottom: 20px
}

.navbar li,
.portfolio-container {
      position: relative
}

.portfolio-item {
      border-radius: 4px;
      border-style: initial;
      border-color: #f4f4f4
}

a {
      text-decoration: none
}

#topbar {
      background: #191919;
      font-size: 15px;
      height: 40px;
      padding: 0;
      color: rgba(255, 255, 255, .6)
}

#topbar .contact-info a {
      line-height: 0;
      color: rgba(255, 255, 255, .6);
      transition: .3s
}

#header .logo a,
#topbar .contact-info a:hover,
#topbar .social-links a:hover,
.back-to-top:hover,
.cta p,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul a:hover,
.navbar .dropdown ul li:hover>a,
.navbar-dark .nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .show>.nav-link,
.pricing .featured h3,
.pricing .featured h4,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul li,
.services .icon-box:hover h4 a,
.services .icon-box:hover p,
.why-us .box:hover h4,
.why-us .box:hover p,
.why-us .box:hover span {
      color: #fff
}

#topbar .contact-info i {
      color: var(--bs-info);
      line-height: 0;
      margin-right: 5px
}

#topbar .contact-info .phone-icon {
      margin-left: 15px
}

#topbar .social-links a {
      color: rgba(255, 255, 255, .86) !important;
      padding: 4px 12px;
      display: inline-block;
      line-height: 1px;
      transition: .3s
}

#header {
      background: rgba(25, 25, 25, .95);
      transition: .5s;
      z-index: 997;
      height: 70px
}

#header.fixed-top {
      background: #191919
}

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

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

.scrolled-offset {
      margin-top: 70px
}

.navbar {
      padding: 0;
      font-size: 18px
}

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

.navbar>ul>li {
      margin-left: 5px
}

.navbar a,
.navbar a:focus {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 25px 15px;
      font-size: 18px;
      color: #fff;
      white-space: nowrap;
      transition: .3s
}

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

.navbar .active,
.navbar .active:focus,
.navbar a:hover,
.navbar li:hover>a {
      background: #23adc9
}

.navbar .dropdown ul {
      display: block;
      position: absolute;
      left: 0;
      top: calc(100% + 30px);
      margin: 0;
      z-index: 99;
      opacity: 0;
      visibility: hidden;
      background: #fff;
      box-shadow: 0 0 30px rgba(127, 137, 161, .25);
      transition: .3s
}

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

.navbar .dropdown ul a {
      padding: 10px 20px;
      color: #191919
}

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

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

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

.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-nav-toggle {
      color: #fff;
      font-size: 22px;
      cursor: pointer;
      display: none;
      line-height: 0;
      transition: .5s
}

@media (max-width:991px) {
      .mobile-nav-toggle {
            display: block
      }

      .navbar ul {
            display: none
      }
}

.navbar-mobile {
      position: fixed;
      overflow: hidden;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: #191919;
      transition: .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: 25px;
      bottom: 25px;
      left: 25px;
      padding: 10px 15px;
      overflow-y: auto;
      transition: .3s;
      background: url("../../assets/img/background-mobile-2.webp") bottom right no-repeat, rgba(0, 0, 0, .9)
}

.navbar-mobile a {
      font-size: 15px
}

.navbar-mobile .active,
.navbar-mobile a:hover,
.navbar-mobile li:hover>a {
      background-color: rgba(255, 255, 255, 0);
      border-bottom: 1px solid rgba(255, 255, 255, .1)
}

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

.navbar-mobile .dropdown ul {
      position: static;
      display: none;
      z-index: 99;
      opacity: 1;
      visibility: visible;
      box-shadow: 0 0 30px rgba(127, 137, 161, .25)
}

.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul li:hover>a {
      color: #191919;
      background: #fff;
      box-shadow: 0 0 30px rgba(127, 137, 161, .25)
}

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

.navbar-dark .navbar-toggler-icon {
      background-image: none !important
}

.navbar-dark .navbar-toggler {
      color: rgba(255, 255, 255, .9) !important;
      border-color: rgba(255, 255, 255, 0) !important
}

#hero {
      width: 100%;
      height: calc(100vh - 110px);
      background: url("../../assets/img/hieu-vu-minh-4eDiRuTHU30-unsplash.webp") top center/cover;
      position: relative
}

#hero::before {
      content: "";
      background: rgba(0, 0, 0, .5);
      position: absolute;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0
}

#hero h1 {
      margin: 0 0 10px;
      font-size: 48px;
      font-weight: 700;
      line-height: 56px;
      text-transform: uppercase;
      color: #fff
}

#hero h2 {
      color: #eee;
      margin-bottom: 30px;
      font-size: 24px
}

body {
      font-family: Montserrat
}

#hero .btn-get-started {
      font-family: Monserat, sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: .5px;
      display: inline-block;
      padding: 10px 28px;
      transition: .5s;
      border: 2px solid #fff;
      color: #fff
}

@media (min-width:1024px) {
      #hero {
            background-attachment: fixed
      }
}

section {
      padding: 60px 0;
      overflow: hidden
}

.section-title {
      text-align: center;
      padding: 30px 0;
      position: relative
}

.section-title h1,
.section-title h2 {
      font-size: 32px;
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 20px;
      padding-bottom: 0;
      color: #191919;
      position: relative;
      z-index: 2
}

.section-title span {
      position: absolute;
      top: 30px;
      color: #f4f4f4;
      left: 0;
      right: 0;
      z-index: 1;
      font-weight: 700;
      font-size: 52px;
      text-transform: uppercase;
      line-height: 0
}

.section-title p {
      margin-bottom: 0;
      position: relative;
      z-index: 2
}

.about .content h3 {
      font-weight: 600;
      font-size: 26px
}

.about .content ul {
      list-style: none;
      padding-top: 20px
}

.about .content ul li {
      padding-bottom: 10px
}

.about .content ul i {
      font-size: 20px;
      padding-right: 4px;
      color: #0567a8
}

.about .content p:last-child {
      margin-bottom: 0
}

.why-us {
      padding-top: 10px
}

.why-us .box {
      padding: 50px 30px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, .1);
      transition: .3s ease-in-out
}

.why-us .box span {
      display: block;
      font-size: 28px;
      font-weight: 700;
      color: #0dcaf0
}

.why-us .box h4 {
      font-size: 24px;
      font-weight: 600;
      padding: 0;
      margin: 20px 0;
      color: #191919
}

.why-us .box p {
      color: #aaa;
      font-size: 15px;
      margin: 0;
      padding: 0
}

.why-us .box:hover {
      background: #0dcaf0;
      padding: 30px 30px 70px;
      box-shadow: 10px 15px 30px rgba(0, 0, 0, .18);
      border-radius: 4px;
      border-width: 1px
}

.clients {
      background: #f2f2f2;
      padding: 15px 0;
      text-align: center
}

.clients img {
      width: 50%;
      filter: grayscale(100);
      transition: .4s ease-in-out;
      display: inline-block;
      padding: 15px 0
}

.clients img:hover {
      filter: none;
      transform: scale(1.2)
}

@media (max-width:768px) {
      #hero {
            text-align: center
      }

      #hero .container {
            padding-top: 40px
      }

      #hero h1 {
            font-size: 28px;
            line-height: 36px
      }

      #hero h2 {
            font-size: 18px;
            line-height: 24px;
            margin-bottom: 30px
      }

      .clients img {
            width: 40%
      }
}

.services .icon-box {
      text-align: center;
      padding: 80px 20px;
      transition: .3s ease-in-out;
      border-radius: 4px;
      box-shadow: 0 2px 15px rgba(0, 0, 0, .1);
      color: inherit
}

.services .icon-box .icon {
      margin: 0 auto 20px;
      width: 64px;
      height: 64px;
      background: #0dcaf0;
      transition: .3s ease-out;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      transform-style: preserve-3d
}

.services .icon-box .icon i {
      color: #fff;
      font-size: 28px
}

.services .icon-box .icon::before {
      position: absolute;
      content: '';
      left: -8px;
      top: -8px;
      height: 100%;
      width: 100%;
      border-radius: 8px;
      background: rgba(13, 202, 240, .24);
      transition: .3s ease-out;
      transform: translateZ(-1px)
}

.services .icon-box h4 {
      font-weight: 700;
      margin-bottom: 15px;
      font-size: 24px
}

.services .icon-box h4 a {
      color: #191919
}

.services .icon-box p {
      line-height: 24px;
      font-size: 14px;
      margin-bottom: 0
}

.services .icon-box:hover {
      background: #0dcaf0;
      border-color: #515f7d;
      padding: 70px 20px 90px
}

.services .icon-box:hover .icon {
      background: #fff
}

.services .icon-box:hover .icon::before {
      background: rgb(246, 240, 240, .28)
}

.cta {
      background: linear-gradient(rgba(2, 2, 2, .7), rgba(0, 0, 0, .5)) 0 0/cover, url("../../assets/img/herrreiprich-0eOS0HNvrPU-unsplash.webp") center center/cover fixed;
      padding: 120px 0
}

.cta h3 {
      color: #fff;
      font-size: 28px;
      font-weight: 700
}

.cta .cta-btn {
      font-family: Raleway, sans-serif;
      text-transform: uppercase;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: 1px;
      display: inline-block;
      padding: 10px 28px;
      transition: .5s;
      margin-top: 10px;
      border: 2px solid #fff;
      color: #fff
}

.cta .cta-btn:hover {
      background: #0dcaf0;
      border: 2px solid #0dcaf0
}

.pricing .box {
      padding: 20px;
      background: #f9f9f9;
      text-align: center;
      border-radius: 8px;
      position: relative;
      overflow: hidden
}

.pricing .box h3 {
      padding: 15px;
      font-size: 18px;
      text-transform: uppercase;
      font-weight: 600;
      color: #191919
}

.pricing .box h4 {
      font-size: 42px;
      color: #0dcaf0;
      font-weight: 500;
      font-family: "Open Sans", sans-serif;
      margin-bottom: 20px
}

.pricing .box h4 sup {
      font-size: 20px;
      top: -15px;
      left: -3px
}

.pricing .box h4 span {
      color: #bababa;
      font-size: 16px;
      font-weight: 300
}

.pricing .box ul {
      padding: 0;
      list-style: none;
      color: #191919;
      text-align: center;
      line-height: 20px;
      font-size: 14px
}

.pricing .box ul li {
      padding-bottom: 16px
}

.pricing .box ul i {
      color: #0567a8;
      font-size: 18px;
      padding-right: 4px
}

.pricing .box ul .na {
      color: #ccc;
      text-decoration: line-through
}

.pricing .box .btn-wrap,
.pricing .featured .btn-wrap {
      padding: 15px;
      text-align: center
}

.pricing .box .btn-buy {
      background: #0dcaf0;
      display: inline-block;
      padding: 10px 40px;
      color: #fff;
      transition: .3s;
      font-size: 14px;
      font-family: Raleway, sans-serif;
      font-weight: 600
}

.contact .email-form button[type=submit]:hover,
.pricing .box .btn-buy:hover {
      background: #0898b5
}

.pricing .featured {
      background: #0dcaf0;
      box-shadow: none;
      color: #fff
}

.pricing .featured h4 span {
      color: rgba(255, 255, 255, .58)
}

.pricing .featured .btn-buy {
      background: rgba(255, 255, 255, .2)
}

.pricing .featured .btn-buy:hover {
      background: #0898b5;
      color: #fff;
      border-radius: 4px;
      border-left: 1px dashed #fff;
      border-right: 1px dashed #fff
}

.team .member {
      text-align: center;
      margin-bottom: 20px;
      box-shadow: 0 0 12px 0 rgba(0, 0, 0, .1);
      padding: 30px 20px;
      background: #fff
}

.team .member img {
      max-width: 60%;
      border-radius: 50%;
      margin: 0 0 30px
}

.team .member h4 {
      font-weight: 700;
      margin-bottom: 2px;
      font-size: 18px
}

.team .member span {
      font-style: italic;
      display: block;
      font-size: 13px
}

.team .member p {
      padding-top: 10px;
      font-size: 14px;
      font-style: italic;
      color: #aaa
}

.team .member .social {
      margin-top: 15px
}

.team .member .social a {
      color: #919191;
      transition: .3s
}

.team .member .social i {
      font-size: 18px;
      margin: 0 2px
}

.contact .info-box {
      color: #444;
      text-align: center;
      box-shadow: 0 0 30px rgba(214, 215, 216, .6);
      padding: 20px 0 30px
}

.contact .info-box i {
      font-size: 32px;
      color: #0dcaf0;
      border-radius: 50%;
      padding: 8px;
      border: 2px dotted #0898b5
}

.contact .info-box h3 {
      font-size: 20px;
      color: #777;
      font-weight: 700;
      margin: 10px 0
}

.contact .info-box p {
      padding: 0;
      line-height: 24px;
      font-size: 14px;
      margin-bottom: 0
}

.contact .email-form {
      box-shadow: 0 0 30px rgba(214, 215, 216, .6);
      padding: 30px
}

.contact .email-form .error-message {
      display: none;
      color: #fff;
      background: #ed3c0d;
      text-align: left;
      padding: 15px;
      font-weight: 600
}

.contact .email-form .error-message br+br {
      margin-top: 25px
}

.contact .email-form .sent-message {
      display: none;
      color: #fff;
      background: #18d26e;
      text-align: center;
      padding: 15px;
      font-weight: 600
}

.contact .email-form .loading {
      display: none;
      background: #fff;
      text-align: center;
      padding: 15px
}

.contact .email-form .loading:before {
      content: "";
      display: inline-block;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      margin: 0 10px -6px 0;
      border: 3px solid #18d26e;
      border-top-color: #eee;
      animation: 1s linear infinite animate-loading
}

.contact .email-form input,
.contact .email-form textarea {
      border-radius: 0;
      box-shadow: none;
      font-size: 14px
}

.contact .email-form input::focus,
.contact .email-form textarea::focus {
      background-color: #cc1616
}

.contact .email-form input {
      padding: 10px 15px
}

.contact .email-form textarea {
      padding: 12px 15px
}

.contact .email-form button[type=submit] {
      background: #0dcaf0;
      border: 0;
      padding: 10px 24px;
      color: #fff;
      transition: .4s
}

@keyframes animate-loading {
      0% {
            transform: rotate(0)
      }

      100% {
            transform: rotate(360deg)
      }
}

#footer {
      background: #0c0c0c;
      padding: 0 0 30px;
      color: #fff;
      font-size: 14px
}

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

#footer .footer-top .footer-info {
      margin-bottom: 15px;
      color: #fff;
      text-align: left;
}

#footer .footer-top .footer-info h3 {
      font-size: 36px;
      margin: 0 0 20px;
      padding: 2px 0;
      line-height: 1;
      font-weight: 700;
      text-align: left;
}

#footer .footer-top .footer-info p {
      font-size: 14px;
      line-height: 24px;
      margin-bottom: 0;
      font-family: Raleway, sans-serif
}

#footer .footer-top .social-links a {
      font-size: 18px;
      display: inline-block;
      background: #262626;
      color: #fff;
      line-height: 1;
      padding: 8px 0;
      margin-right: 4px;
      border-radius: 50%;
      text-align: center;
      width: 36px;
      height: 36px;
      transition: .3s
}

#footer .footer-top .social-links a:hover {
      background: #0dcaf0;
      color: #fff;
      text-decoration: none
}

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

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

#footer .footer-top .footer-links ul i {
      color: #0dcaf0;
      font-size: 18px;
      line-height: 1.2;
      flex-shrink: 0;
      padding-right: 8px;
      margin-top: 2px;
}

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

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

#footer .footer-top .footer-links ul a {
      color: #fff;
      transition: .3s;
      display: inline-block;
      line-height: 1
}

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

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

#footer .footer-top .footer-newsletter form input[type=submit] {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      border: 0;
      background: #0dcaf0;
      font-size: 16px;
      padding: 0 20px;
      color: #fff;
      transition: .3s;
      border-radius: 0 4px 4px 0;
      cursor: pointer;
}

#footer .footer-top .footer-newsletter form input[type=submit]:hover {
      background: #0dcaf0
}

#footer .copyright {
      border-top: 1px solid #262626;
      text-align: center;
      padding-top: 30px
}

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

@media (max-width:575px) {

      .section-title h1,
      .section-title h2 {
            font-size: 28px;
            margin-bottom: 15px
      }

      .section-title span {
            font-size: 38px
      }

      #footer .footer-top .footer-info {
            margin: -20px 0 30px
      }
}

.footer-info {
      background: url("../../assets/img/background-mobile-2.webp") bottom right no-repeat !important
}

.back-to-top {
      position: fixed;
      visibility: hidden;
      opacity: 0;
      right: 15px;
      bottom: 15px;
      z-index: 996;
      width: 40px;
      height: 40px;
      transition: .4s
}

.back-to-top i {
      font-size: 28px;
      color: #fff;
      line-height: 0
}

.back-to-top.active {
      visibility: visible;
      opacity: 1
}

.nav-link {
      display: block;
      padding: .5rem 1rem;
      color: #8ed2ef;
      text-decoration: none;
      transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out
}

.nav-link:focus,
.nav-link:hover {
      color: #454848;
      background-color: #afafb3
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
      color: #fff;
      background: #4e5d6c
}

/* Modern Footer Styles */
#footer.modern-footer {
  background: #0d1115; /* Darker, almost black */
  color: #fff;
  font-family: "Raleway", sans-serif;
}

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

#footer.modern-footer h4 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 25px;
}

#footer.modern-footer .footer-info .address-text {
  color: #a0a4a8;
  font-size: 15px;
  line-height: 24px;
}

#footer.modern-footer .footer-info .contact-title {
  color: #0dcaf0;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

#footer.modern-footer .footer-info .contact-text {
  color: #a0a4a8;
  font-size: 15px;
}

#footer.modern-footer .social-links {
  margin-top: 20px;
}

#footer.modern-footer .social-links a {
  font-size: 24px;
  color: #0dcaf0;
  margin-right: 15px;
  transition: 0.3s;
  display: inline-block;
}

#footer.modern-footer .social-links a:hover {
  color: #fff;
}

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

#footer.modern-footer .footer-links ul li {
  padding: 8px 0;
  display: flex;
  align-items: center;
  position: relative;
}

#footer.modern-footer .footer-links ul a {
  color: #a0a4a8;
  transition: 0.3s;
  text-decoration: none;
  font-size: 15px;
  position: relative;
}

#footer.modern-footer .footer-links ul a:hover {
  color: #fff;
}

/* Optional: small cyan dot before link on hover */
#footer.modern-footer .footer-links ul li:hover::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: #0dcaf0;
  border-radius: 50%;
}

#footer.modern-footer .modern-newsletter-form {
  display: flex;
  flex-direction: column;
}

#footer.modern-footer .modern-newsletter-form input {
  background: #15191e;
  border: 1px solid #2a2e35;
  border-radius: 4px;
  color: #fff;
  padding: 12px 15px;
  margin-bottom: 15px;
  width: 100%;
}

#footer.modern-footer .modern-newsletter-form input:focus {
  outline: none;
  border-color: #0dcaf0;
  background: #15191e;
  box-shadow: none;
}

#footer.modern-footer .modern-newsletter-form button {
  background: #0dcaf0;
  border: 0;
  border-radius: 4px;
  padding: 12px 20px;
  color: #000;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  transition: 0.3s;
  width: 100%;
}

#footer.modern-footer .modern-newsletter-form button:hover {
  background: #0bafcf;
  color: #000;
}

#footer.modern-footer .footer-bottom {
  padding: 25px 0;
  color: #a0a4a8;
  font-size: 14px;
  border-top: 1px solid #2a2e35;
}

#footer.modern-footer .footer-bottom p {
  margin-bottom: 5px;
}

#footer.modern-footer .footer-bottom .footer-bottom-links a {
  color: #7b7f84;
  text-decoration: none;
  transition: 0.3s;
}

#footer.modern-footer .footer-bottom .footer-bottom-links a:hover {
  color: #0dcaf0;
}

/* Fix for newsletter input text visibility */
#footer.modern-footer .modern-newsletter-form input.form-control,
#footer.modern-footer .modern-newsletter-form input.form-control:focus {
  color: #212529 !important;
}