/*
Theme Name: SJ Dynamics 2026
Version: 1.0
*/

/* =========================
   ROOT
========================= */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --accent: #003366;       
    --accent-1: #0074C8; 
    --accent-2: #1253a4;    
    --accent-3: #30302f;  
}

/* =========================
   GLOBAL
========================= */
body {

}
    

h1, h2, h3, h4, h5, h6, strong {
 color: var(--accent) !important;
}

p {

}

i {
    font-size: 5rem;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-2);
    text-decoration: none;
}

.logo {
    max-height: 10vh;
} 

 /*-- Cookies --*/
.cookie-container {
display: none;
}

.cookie-container.active {
  display: block;
}

.header-hidden {
  display: none !important;
  transform: translateY(-100%);
  opacity: 0;
  transition: all 0.3s ease;
}


.bg-accent {
    background: var(--accent)  !important;
}

.bg-accent-1 {
    background: var(--accent-1)  !important;
}

.bg-accent-2 {
    background: var(--accent-2)  !important;
}

.bg-accent-3 {
    background: var(--accent-3)  !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-accent-1 {
    color: var(--accent-1) !important;
}

.text-accent-2 {
    color: var(--accent-2) !important;
}

.text-accent-3 {
    color: var(--accent-3) !important;
}

/* -----------------------------------------------------------------
   Base .btn styles (your existing button helpers – keep as‑is)
   ----------------------------------------------------------------- */
.btn {
    font-weight: 600;
    transition: .5s;
}

/* -----------------------------------------------------------------
   NEW • .btn‑accent (primary brand colour)
   ----------------------------------------------------------------- */
.btn-accent,
.btn-accent-1,
.btn-accent-2,
.btn-accent-3 {
    /* shared button traits */
    font-weight: 400;               /* match original .btn-primary */
    transition: .5s;
    border-color: #c4c4c4;
}

/* Primary accent – uses --accent (the “brand blue”) */
.btn-accent {
    background: var(--accent) !important;
    color: var(--bs-white) !important;   /* white text on dark bg */
}
.btn-accent:hover {
    background: var(--bs-white) !important;
    color: var(--accent) !important;
}

/* -----------------------------------------------------------------
   Variant • .btn‑accent‑1 (lightest accent colour)
   ----------------------------------------------------------------- */
.btn-accent-1 {
    background: var(--accent-1) !important;
    color: var(--bs-black) !important;   /* dark text on light bg */
}


/* -----------------------------------------------------------------
   Variant • .btn‑accent‑2 (mid‑tone accent colour)
   ----------------------------------------------------------------- */
.btn-accent-2 {
    background: var(--accent-2) !important;
    color: var(--bs-black) !important;   /* make text readable on ~#646674 */
}


/* -----------------------------------------------------------------
   Variant • .btn‑accent‑3 (soft accent colour)
   ----------------------------------------------------------------- */
.btn-accent-3 {
    background: var(--accent-3) !important;
    color: var(--bs-black) !important;   /* dark text works on #b0afbb */
}

.vh-50 {
  height: 50vh; /* Element occupies exactly half the screen height */
}

/* 
-----------------------------------------------------------------
   testimonial-carousel
----------------------------------------------------------------- 
*/

.testimonial-carousel .owl-nav {
	text-align: center;
}
/* Owl dots styling */
.testimonial-carousel .owl-dots {
  text-align: center;
  margin-top: 1rem;
}

.testimonial-carousel .owl-dot {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 8px;
  background: var(--accent-1); /* inactive color */

}

.testimonial-carousel .owl-dot.active {
  background-color: var(--accent-1); /* active color */
}

.nav-link {
    color: var(--accent-1);
    font-size: 1.2rem;
}

.nav-link:hover {
   background: var(--accent-1);
    color: #fff;
    border-radius: 5px;
}

.current-menu-item .nav-link {
    background: var(--accent);
    color: #fff;
    border-radius: 5px;
}

.smedia-icon-btn {
background: var(--accent-1);
color: #fff;
padding: 10px;
border-radius: 5px;

}

.smedia-icon-btn:hover {
background: var(--accent);
color: #fff;
padding: 10px;
border-radius: 5px;

}

.page-spacer {
padding-top: 150px;
}