:root{
  --color-dark-bg: 23, 38, 58;
  --color-extra-dark-bg: 18, 20, 20;
}
.mode-switcher a.layout:first-child{
  background: var(--color-white) !important;
  color: var(--color-primary-two) !important;
}

.mode-switcher a.layout:last-child{
  background: var(--color-primary-two)  !important;
  color: var(--color-white)  !important;
}

.topbar {
  background: rgba(var(--color-black-rgb), 1);
}

.topbar .support .support-items a {
  color: var(--color-white);
}

.topbar .support .support-items a i{
  color: var(--color-white);
}

.topbar .support .support-items a:hover{
  color: var(--color-white);
}

.topbar .support .support-items > a::before {
  background-color: var(--color-white);
}

.topbar .support .dropdown ul li a {
  color: var(--color-secondary);
}

.header-main .social .social-item .content {
 color: var(--color-white);
}
.header-main .social .social-item .content .contents {
  color: var(--color-white);
}

#header.fixed-top {
  background: var(--color-black);
}

.fixed-top .navbar a, .fixed-top .navbar a:focus {
  color: var(--color-white);
}


  @media (min-width: 992px){
.fixed-top .navbar .dropdown ul::before {
  background-color: var(--color-black);

}
}

  @media (max-width: 991px){
.navbar-mobile ul.mainmenu {
background: var(--color-black)
}
.navbar-mobile a, .navbar-mobile a:focus {
  color: var(--color-white);
}

.navbar-mobile .dropdown ul {
  background: var(--color-black);
}

.navbar .dropdown ul li a {
  color: var(--color-white);
}
.navbar .dropdown ul.megamenu-style li > h6 {
  color: var(--color-white);
}
}



.fixed-top .navbar .dropdown ul.megamenu-style li > h6 {
  color: var(--color-white);
}

.fixed-top .navbar .dropdown ul {
  background: var(--color-black);
  
}

.fixed-top .navbar .dropdown ul li a {
  color: var(--color-white);
}

.fixed-top .navbar .dropdown ul a:hover, .fixed-top .navbar .dropdown ul a.active:hover, .fixed-top  .navbar .dropdown ul li:hover > a {
  color: var(--color-primary);
}

.fixed-top .navbar .dropdown ul.megamenu-style li:hover > a {
  background: none;
  color: var(--color-white);
}

.fixed-top .navbar .dropdown ul.megamenu-style li > a:hover {
  color: var(--color-primary);
  background-color: rgba(var(--color-secondary-light-rgb), 0.2);
}

.modal-content {
  background-color: rgba(var(--color-dark-bg), 1.0);
}

.modal.unmetered-model .modal-title {
  color: var(--color-white);
}

.modal.unmetered-model .modal-body p span {
  color: var(--color-white);
}

.modal.unmetered-model .modal-body p {
  color: var(--color-white);
}

.close, .close:hover{
  color: var(--color-white);
}



body{
  background: rgba(var(--color-dark-bg), 1.0);
}



.section-bg .section-header h2 {
  color: var(--color-white);
}

.section-bg  .section-header p {
  color: var(--color-white);
}

.section-header h2 {
  color: var(--color-secondary);
}

.section-header p {
  color: var(--color-info-dark);
}

.offcanvas .offcanvas-inner{
background: rgba(var(--color-dark-bg), 1);
}

.offcanvas-header h5 {
  color: var(--color-white);
}

.offcanvas-header .style-swicher-close {
color: var(--color-white) !important;
}

.switcher-style-head {

  color: var(--color-white) !important;
}

#switcher-canvas .canvas-footer {
background: rgba(var(--color-extra-dark-bg), 1);
}

.switch-select .form-check-label {
    color: var(--color-white) !important;
}

.bg-lighted{
  background-color: rgba(var(--color-dark-bg), 0.7);
}

/*.card-style-one {
background: rgba(var(--color-extra-dark-bg), 1);
}

.card-style-one .content h4 {
  color: var(--color-white);
}

.card-style-one .content p {
  color: var(--color-secondary-light);
}*/

/*.pricing-box::before {
  background-color: rgba(var(--color-extra-dark-bg), 1.0);
}

.pricing-box .pricing-top h3 {
  color: var(--color-white);
}

.pricing-box .pricing-top p {
  color: var(--color-secondary-light);
}

.pricing-box .pricing-bottom ul li {
  color: var(--color-secondary-light);
}

.pricing-box .pricing-top h4 {
  color: var(--color-white);
}

.form-control {
  background-color: var(--color-extra-dark-bg);
  border: 1px solid var(--color-secondary-dark);
  color: var(--color-secondary-light);
}

.pricing-box-four {
  border-color: rgba(var(--color-secondary-dark-rgb), 1);
  background: rgba(var(--color-dark-bg), 1);
}

.pricing-box-four h3 {
  color: var(--color-white);
}

.pricing-box-four p {
  color: var(--color-secondary-light);
}

.pricing-box-four h4 {
  color: var(--color-white);
}

.pricing-box-four ul li {
  color: var(--color-secondary-light);
}

.just-one-click li {
  background-color: rgba(var(--color-dark-bg), 1.0);
}

.under-hood {
  background-color: rgba(var(--color-dark-bg), 1.0);
}

.under-hood .underhood-content h4 {
  color: var(--color-white);
}

ul.list-style-one li {
  color: var(--color-secondary-light);
}

.card-style-two {
  background: rgba(var(--color-dark-bg), 1.0);
  border-color: rgba(var(--color-secondary-light-rgb), 0.3);
}

.card-style-two .content h3 {
  color: var(--color-white);
}

.card-style-two .content p {
  color: var(--color-secondary-light);
}

.card-style-two:hover .icon svg {
  fill: rgba(var(--color-dark-bg), 1.0);
}

.card-style-three {
 
  background: rgba(var(--color-dark-bg), 1.0);
  border: 1px solid;
  border-color: var(--color-primary-two);
}

.card-style-three .content h3 {
  color: var(--color-white);
}

.card-style-three .content p {
  color: var(--color-secondary-light);
}

.faq {
  background: rgba(var(--color-extra-dark-bg), 1.0);
}

.faq .accordion .accordion-item {
  border-color: rgba(var(--color-secondary-light), 1);
}

.faq .accordion .accordion-item .accordion-header .accordion-button.collapsed {
  background: rgba(var(--color-dark-bg), 1.0);
}

.faq .accordion .accordion-item .accordion-header .accordion-button{
  background: rgba(var(--color-dark-bg), 1.0);
  color: var(--color-white);
  border-color: rgba(var(--color-secondary-dark-rgb), 1) !important;
}

.accordion-body {
  background: rgba(var(--color-dark-bg), 1.0);
  color: rgba(var(--color-secondary-light), 1);
}*/

.table-plans table {
  background: rgba(var(--color-white-rgb), 1);
}


.blog-side-bar {
  background: var(--color-white);
  padding: 20px;
  border-radius: 4px;
}


.iner-content.with-dark h4{
  color: var(--color-white);
}

.iner-content.with-dark p{
  color: var(--color-secondary-light);
}

.iner-content.with-dark ul li{
  color: var(--color-secondary-light);
}

.iner-content.with-dark ul li:before{
  color: var(--color-white);
}