/* ==========================================================
   Custom Theme Override - Oladunni David Oladosu
   Only accent color change: Orange → Blue
   ========================================================== */

:root {
  --primary: #4A90D9;
  --secondary: #1E6AC0;
  --gradient1: radial-gradient(50% 50% at 50% 50%, #4A90D9 0%, #1E6AC0 100%);
  --gradient2: linear-gradient(144.12deg, #6BA3E0 14.68%, #1E6AC0 81.68%);
  --gradient3: linear-gradient(136.55deg, #6BA3E0 5.49%, #1E6AC0 100%);
  --gradient4: linear-gradient(213.44deg, #000000 43.78%, #2A7AD4 124.39%);
  --gradient5: linear-gradient(150deg, #000000 29.69%, #4A90D9 51.45%, #1E6AC0 82.71%);
  --gradient6: linear-gradient(125.1deg, #232323 28.16%, #2A7AD4 120.37%);
}

/* Override all remaining orange fallbacks */
.box-gradient1::before,
.box-gradient2::before {
  background-color: #1E6AC0 !important;
}

.gradient-icon {
  background: var(--gradient5) !important;
}

/* Override orange PNG backgrounds with blue gradients */
/* Accordion service icons - replaces orange img-bg.png */
.section-services .services-wrap .heading .icon {
  background: var(--gradient3) !important;
  background-image: none !important;
}

/* Avatar wrap - replaces orange bg-avatar.png */
.avatar-wrap {
  background: var(--gradient1) !important;
  background-image: none !important;
}

/* Section banner avatar wrap */
.section-banner .avatar-wrap {
  background: var(--gradient1) !important;
  background-image: none !important;
}

/* Dot circles in banners */
.dot-circle {
  background: var(--gradient2) !important;
}

/* Theme button overrides (if used) */
.theme-btn {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
}
.theme-btn:hover {
  background: none !important;
  color: var(--primary) !important;
}

/* Override form error color */
form .msg-error {
  color: var(--primary);
}

/* Reduce hero section spacing */
.section-hero {
  padding: 60px 0 40px;
}
.section-hero .infor {
  margin-bottom: 40px;
}
.section-hero .main-title {
  margin-bottom: 50px;
}

/* Wider sidebar + closer to content */
/* Large desktop: 1700px+ */
@media (min-width: 1700px) {
  .left-sidebar {
    max-width: 460px !important;
    width: 460px !important;
    padding: 36px 30px !important;
  }
}
/* Standard desktop/laptop: 1151-1699px */
@media (min-width: 1151px) and (max-width: 1699px) {
  .left-sidebar {
    max-width: 340px !important;
    width: 340px !important;
    padding: 28px 22px !important;
  }
  .avatar-carousel,
  .avatar-carousel .swiper-slide,
  .avatar-carousel .swiper-slide img {
    max-height: 260px !important;
    height: 260px !important;
  }
}
/* Content layout for all desktop */
@media (min-width: 1151px) {
  .main-content .offset-xxl-5 {
    margin-left: 35% !important;
  }
  .main-content .col-xxl-7 {
    flex: 0 0 65% !important;
    max-width: 65% !important;
  }
  .main-content .offset-xl-4 {
    margin-left: 30% !important;
  }
  .main-content .col-xl-7 {
    flex: 0 0 70% !important;
    max-width: 70% !important;
  }
}
/* Tablet: sidebar flows into page */
@media (max-width: 1150px) and (min-width: 768px) {
  .left-sidebar {
    max-width: 66.66% !important;
    width: auto !important;
    padding: 28px 20px !important;
  }
  .avatar-carousel {
    max-width: 320px;
    max-height: 320px;
    aspect-ratio: 1 / 1;
  }
  .avatar-carousel .swiper-slide,
  .avatar-carousel .swiper-slide img {
    max-width: 320px;
    max-height: 320px;
    height: 320px !important;
    width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
  }
}
/* Mobile */
@media (max-width: 767px) {
  .left-sidebar {
    max-width: 100% !important;
    width: auto !important;
    padding: 24px 16px !important;
  }
  .avatar-carousel {
    max-width: 280px;
    max-height: 280px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-right: auto;
  }
  .avatar-carousel .swiper-slide,
  .avatar-carousel .swiper-slide img {
    max-width: 280px;
    max-height: 280px;
    height: 280px !important;
    width: 280px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: top center;
  }
}

/* Sidebar heading - stack logo and status vertically */
.left-sidebar .heading {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  overflow: visible;
}

.left-sidebar .heading img {
  max-width: 160px;
  height: auto;
  display: block;
}

/* Avatar carousel */
.avatar-carousel {
  width: 100%;
  max-height: 320px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: -30px;
}
.avatar-carousel .swiper-slide {
  max-height: 320px;
}
.avatar-carousel .swiper-slide img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.avatar-carousel .swiper-pagination {
  bottom: 8px !important;
  text-align: right !important;
  padding-right: 12px;
  left: auto !important;
  width: auto !important;
  right: 0;
}
.avatar-carousel .swiper-pagination-bullet {
  background: rgba(255,255,255,0.5);
  opacity: 1;
  width: 7px;
  height: 7px;
}
.avatar-carousel .swiper-pagination-bullet-active {
  background: var(--primary);
}

/* Signature - bring forward and visible */
.left-sidebar .image .signature {
  width: 140px !important;
  position: relative;
  z-index: 5;
  margin-top: -20px;
}

/* Hide settings panel */
.tf-setting-color,
.tf-setting-color .btn-setting-color {
  display: none !important;
}

/* ---- New custom components (not in original template) ---- */

/* Service cards */
.service-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.service-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.service-card .card-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--primary);
  font-size: 24px;
}

.service-card .card-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
}

.service-card .card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-card .card-list li {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  padding: 6px 0;
  padding-left: 20px;
  position: relative;
}

.service-card .card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

/* Framework items */
.framework-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.framework-item .fw-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  font-size: 18px;
}

.framework-item .fw-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  line-height: 1.6;
}

.framework-item .fw-title {
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Impact stats */
.impact-stat {
  text-align: center;
  padding: 24px;
}

.impact-stat .stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--primary);
  font-size: 28px;
}

.impact-stat .stat-title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.impact-stat .stat-desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 1.6;
}

/* Mission/Vision boxes */
.mission-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px;
  margin-bottom: 24px;
}

.mission-box .mission-label {
  color: var(--primary);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.mission-box .mission-text {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  line-height: 1.7;
  font-weight: 500;
}

/* Credential cards */
.credential-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  transition: border-color 0.3s ease;
}

.credential-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.credential-item .cred-type {
  color: var(--primary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.credential-item .cred-title {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 4px;
}

.credential-item .cred-institution {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

/* Advisory list items */
.advisory-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.advisory-item .adv-number {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.advisory-item .adv-title {
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}

.advisory-item .adv-desc {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin-top: 4px;
}

/* Brand positioning statement */
.brand-statement {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 48px;
  margin: 48px 0;
  position: relative;
}

.brand-statement::before {
  content: '\201C';
  position: absolute;
  top: 20px;
  left: 32px;
  font-size: 72px;
  color: var(--primary);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}

.brand-statement p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 17px;
  line-height: 1.8;
  font-style: italic;
}

/* CTA buttons */
.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary-custom:hover {
  background: #3A7EC5;
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-outline-custom:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary);
  color: var(--primary);
}

/* Divider */
.section-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 20px 0;
}

/* Responsive */
@media (max-width: 767px) {
  .brand-statement {
    padding: 32px;
  }
  .mission-box {
    padding: 28px;
  }
  .service-card {
    padding: 24px;
  }
}