/*-- SANAS ENERGY Color Theme: Gold-Orange & Navy Blue --*/

/* ===================================
   CSS Variables
====================================== */
:root {
  --navy:  #0B2D6E;
  --gold:  #E89520;
  --gold-light: #F5AA30;
  --dark:  #1a1a2e;
}

/* ===================================
   Scrollbar
====================================== */
::-webkit-scrollbar-thumb {
  background: var(--navy);
}

/* ===================================
   General / Headings
====================================== */
h2 {
  color: var(--navy);
}

/* ===================================
   Loader
====================================== */
.loader div:nth-child(1) {
  background: var(--navy);
}

.loader div:nth-child(2) {
  background: var(--gold);
}

.loader div:nth-child(3) {
  background: var(--navy);
}

/* ===================================
   Navbar
====================================== */
.navbar {
  background-color: var(--navy) !important;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover {
  border-bottom-color: var(--gold);
  color: var(--gold);
}

/* ===================================
   Buttons
====================================== */

/* Outlined dark button → navy */
.btn.btn-white {
  border-color: var(--navy);
  color: var(--navy);
}

/* Outlined brand button → gold */
.btn.btn-light-blue {
  color: var(--gold);
  border-color: var(--gold);
}

/* Hover: blue button becomes gold text */
.btn.btn-hvr-blue:hover,
.btn.btn-hvr-blue:focus {
  color: #fff;
  border-color: var(--gold);
}

/* Hover: light-blue button becomes gold */
.btn.btn-hvr-light-blue:hover,
.btn.btn-hvr-light-blue:focus {
  color: #fff;
  border-color: var(--gold);
}

/* Ripple effect fill color */
.btn-hvr-effect {
  background: var(--gold);
  border-color: var(--gold);
}

.btn.btn-hvr-blue .btn-hvr-blue,
.btn.btn-hvr-blue .btn-hvr-effect {
  background: var(--gold);
  border-color: var(--gold);
}

.btn.btn-hvr-light-blue .btn-hvr-light-blue,
.btn.btn-hvr-light-blue .btn-hvr-effect {
  background: var(--gold);
  border-color: var(--gold);
}

/* ===================================
   Side Menu
====================================== */

.side-menu .btn-close::before,
.side-menu .btn-close::after {
  background: var(--navy);
}

.side-nav .navbar-nav .nav-link {
  color: var(--navy);
}

.side-nav .navbar-nav .nav-link::after {
  background: var(--gold);
}

.side-menu-footer .banner-icons ul li i {
  color: var(--navy);
}

.side-menu-footer .banner-icons ul li a:hover {
  background-color: var(--gold);
}

/* ===================================
   Services Section
====================================== */

/* Front icon color */
.flip-box i {
  color: var(--navy);
}

.flip-box h5 {
  color: var(--navy);
}

.flip-box p {
  color: #444;
}

/* Blue (middle) box front accent colors */
.flip-box .blue-box h5 {
  color: var(--gold);
}

.flip-box .blue-box .flip-box-front i {
  color: var(--gold);
}

.flip-box .blue-box .flip-box-front p {
  color: var(--gold);
}

/* All service flip-backs → gold */
.flip-box-back {
  background-color: var(--gold) !important;
}

.flip-box .blue-box .flip-box-back {
  background-color: var(--navy) !important;
}

/* Back text stays white */
.flip-box .flip-box-back h5,
.flip-box .blue-box .flip-box-back h5,
.flip-box .flip-box-back p,
.flip-box .flip-box-back i {
  color: #fff !important;
}

/* ===================================
   Counter Section
====================================== */
.counter-section .media i {
  color: var(--gold);
}

.counter-section .media .media-body span {
  color: var(--gold);
}

/* ===================================
   Team Section
====================================== */
.team-section .item:hover .team-detail {
  background: var(--gold);
}

.team-section .team-detail h5 {
  color: var(--navy);
}

.team-section .owl-carousel button.owl-dot {
  background: #ccc;
}

.team-section .owl-carousel button.owl-dot.active {
  background-color: var(--gold);
}

/* ===================================
   Portfolio Section
====================================== */
.cubeportfolio .cbp-l-filters-buttonCenter .cbp-filter-item:hover,
.cubeportfolio .cbp-l-filters-buttonCenter .cbp-filter-item-active.cbp-filter-item {
  color: var(--gold);
}

.cubeportfolio .cbp-l-grid-mosaic-flat .cbp-caption-activeWrap {
  background: var(--gold);
}

.cubeportfolio .cbp-l-grid-mosaic-flat .cbp-caption-activeWrap:hover {
  background-color: var(--navy);
  opacity: 0.9;
}

/* ===================================
   Quote Section
====================================== */
.quote-section h3 {
  color: var(--navy);
}

.quote-section .left-quote,
.quote-section .right-quote {
  color: var(--gold);
}

/* ===================================
   Pricing Section
====================================== */

/* Inactive plan header → navy */
.price-tag h4 {
  background-color: var(--navy);
  color: #fff;
}

/* Active plan header → gold */
.active .price-tag h4 {
  background-color: var(--gold);
  color: #fff;
}

.active .price-tag h4,
.active .price-tag p {
  color: var(--navy);
}

/* ===================================
   Contact Section
====================================== */
.contact-section .media-body h5 {
  color: var(--navy);
}

.contact-section .media i {
  color: var(--gold);
}

/* ===================================
   Footer
====================================== */
.footer-social-icons ul li a:hover {
  background-color: var(--gold);
  color: #fff;
}

/* ===================================
   Slider — dark overlay + timer bar
====================================== */

/* Darken slide images so text is readable */
.slider .bg-overlay {
  background-color: rgba(0, 0, 0, 0.52) !important;
  opacity: 1 !important;
}

.slider .tp-bannertimer {
  background: var(--gold) !important;
}