/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Customized GeneratePress child theme
 Author:       Joe Njenga 
 Author URI:   https://njengah.com/developer
 Template:     generatepress
 Version:      0.1
*/

/* ============================================================
   Treasury Accrual Account - Social Media Widget Styles
   ------------------------------------------------------------
   - Uses Flexbox for layout
   - Includes FAQ link + Facebook & Twitter icons
   - Styled with Font Awesome
   - Custom class prefix: treasury_accural_account-
   ============================================================ */

.treasury_accural_account-widget {
    display: flex;
    align-items: center;
    gap: 15px;
}

.treasury_accural_account-faq-link {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}

.treasury_accural_account-social-icon {
    font-size: 20px;
    color: #1877F2;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.treasury_accural_account-social-icon i {
    padding: 8px;
    border-radius: 50%;
    background-color: #f5f5f5;
}

.treasury_accural_account-social-icon:hover {
    color: #0a66c2;
}

.treasury_accural_account-social-icon:nth-child(2) i {
    background-color: #7f8a99;
    color: white;
}

.treasury_accural_account-social-icon:nth-child(3) i {
    background-color: #a8b9c4;
    color: white;
}
.treasury_accural_account-faq-link:hover:active {
	color: #bb8114;
}

.treasury_accural_account-widget:hover .fab.fa-facebook:hover, 
.treasury_accural_account-widget:hover .fab.fa-twitter {
	background: #bb8114;
}
/**
 * Download Page Styles
 */ 

.list-group.ml-0.mb-2 {
	margin: 0;
}

/**
 * Footer Styles
 */ 

.footer-widgets-container.grid-container a {
	text-decoration: none;
	font-size: 0.9rem;
	color: #97702a;
}
.treasury_accural_account-col-lg-4 h3 {
    font-weight: 500;
    color: #585653;
    font-size: 1rem;
}

.copyright-bar {
    font-size: 0.9rem;
    color: #dce1ef;
}

.treasury_acc_account_copyright_item {
	align-self: center;
}

.treasury_acc_account_copyright_container {
	display: flex;
	align-content: center;
	
}

.treasury_acc_account_copyright_item img {
	background: #fff;
	padding: 5px;
	max-width: 60%;
	border-radius: 50%;
}


/**
* Page Template Styles
*/

body {
  background-size: cover;
  background-repeat: no-repeat;
  font-family: "Open Sans", sans-serif;
}
.services {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.services > * {
  flex-grow: 1;
}
.circle--rotate {
  border-radius: 50%;
  border: 1px #ba8014 solid;
  width: 60%;
  height: 60%;
  margin: 0 auto 0;
  position: relative;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  z-index: 0;
  padding: 0;
}
.circle--rotate > li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  z-index: 10;
  visibility: hidden;
}
.circle--rotate > li .icon {
  visibility: visible;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  font-size: 20px;
  color: #ffffff;
  border-radius: 50%;
  background-color: #000000;
  height: 15%;
  width: 15%;
  margin: -10% auto;
  transition: all 500ms ease;
  box-shadow: -10px 10px 25px rgba(0, 0, 0, 0.2);
}

.circle--rotate > li i {
  color: #ffffff;
  font-size: 35px;
  margin: auto;
  cursor: pointer;
  width: 100%;
  height: 100%;
  display: table;
}
.circle--rotate > li i::before {
  display: table-cell;
  vertical-align: middle;
}
.circle--rotate > li img {
  margin: auto;
}

.circle--slider {
  position: relative;
}
.circle--slider .rotate--circle {
  margin: 0 auto;
}
.circle--slider .circle--rotate > li div {
  position: relative;
  overflow: visible;
  background-color: #7c4102;
}
.circle--slider .circle--rotate > li div span {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transition: all 2s;
  opacity: 0;
}
.circle--slider .circle--rotate > li.active div {
  font-size: 20px;
  background-color: #c88a16;
  transition: all 1s;
}
.circle--slider .circle--rotate > li.active div span {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  z-index: -1;
  opacity: 1;
}

.circle--slider .count2 li:nth-child(2) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle--slider .count3 li:nth-child(2) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.circle--slider .count3 li:nth-child(3) {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}
.circle--slider .count4 li:nth-child(2) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.circle--slider .count4 li:nth-child(3) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle--slider .count4 li:nth-child(4) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}
.circle--slider .count5 li:nth-child(2) {
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
}
.circle--slider .count5 li:nth-child(3) {
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
}
.circle--slider .count5 li:nth-child(4) {
  -webkit-transform: rotate(216deg);
  transform: rotate(216deg);
}
.circle--slider .count5 li:nth-child(5) {
  -webkit-transform: rotate(-72deg);
  transform: rotate(-72deg);
}
.circle--slider .count6 li:nth-child(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.circle--slider .count6 li:nth-child(3) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.circle--slider .count6 li:nth-child(4) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle--slider .count6 li:nth-child(5) {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
}
.circle--slider .count6 li:nth-child(6) {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}
.circle--slider .count7 li:nth-child(2) {
  -webkit-transform: rotate(51.5deg);
  transform: rotate(51.5deg);
}
.circle--slider .count7 li:nth-child(3) {
  -webkit-transform: rotate(103deg);
  transform: rotate(103deg);
}
.circle--slider .count7 li:nth-child(4) {
  -webkit-transform: rotate(154.5deg);
  transform: rotate(154.5deg);
}
.circle--slider .count7 li:nth-child(5) {
  -webkit-transform: rotate(206deg);
  transform: rotate(206deg);
}
.circle--slider .count7 li:nth-child(6) {
  -webkit-transform: rotate(-103deg);
  transform: rotate(-103deg);
}
.circle--slider .count7 li:nth-child(7) {
  -webkit-transform: rotate(-51.5deg);
  transform: rotate(-51.5deg);
}
.circle--slider .count8 li:nth-child(2) {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.circle--slider .count8 li:nth-child(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.circle--slider .count8 li:nth-child(4) {
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}
.circle--slider .count8 li:nth-child(5) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.circle--slider .count8 li:nth-child(6) {
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.circle--slider .count8 li:nth-child(7) {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
.circle--slider .count8 li:nth-child(8) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.circle--slider .count9 li:nth-child(2) {
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}
.circle--slider .count9 li:nth-child(3) {
  -webkit-transform: rotate(80deg);
  transform: rotate(80deg);
}
.circle--slider .count9 li:nth-child(4) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
}
.circle--slider .count9 li:nth-child(5) {
  -webkit-transform: rotate(160deg);
  transform: rotate(160deg);
}
.circle--slider .count9 li:nth-child(6) {
  -webkit-transform: rotate(-160deg);
  transform: rotate(-160deg);
}
.circle--slider .count9 li:nth-child(7) {
  -webkit-transform: rotate(-120deg);
  transform: rotate(-120deg);
}
.circle--slider .count9 li:nth-child(8) {
  -webkit-transform: rotate(-80deg);
  transform: rotate(-80deg);
}
.circle--slider .count9 li:nth-child(9) {
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.circle--slider .count10 li:nth-child(2) {
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
}
.circle--slider .count10 li:nth-child(3) {
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
}
.circle--slider .count10 li:nth-child(4) {
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
}
.circle--slider .count10 li:nth-child(5) {
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
}
.circle--slider .count10 li:nth-child(6) {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
.circle--slider .count10 li:nth-child(7) {
  -webkit-transform: rotate(-144deg);
  transform: rotate(-144deg);
}
.circle--slider .count10 li:nth-child(8) {
  -webkit-transform: rotate(-108deg);
  transform: rotate(-108deg);
}
.circle--slider .count10 li:nth-child(9) {
  -webkit-transform: rotate(-72deg);
  transform: rotate(-72deg);
}
.circle--slider .count10 li:nth-child(10) {
  -webkit-transform: rotate(-36deg);
  transform: rotate(-36deg);
}
.circle--slider .animate-wrapper {
  width: 25%;
  height: 25%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
}
.circle--slider .animate-title {
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  font-size: 26px;
}
.circle--slider .animate-img {
  width: 25%;
  height: 25%;
  border-radius: 50%;
  overflow: hidden;
}
.circle--slider .animate-img .animate-img__in {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  right: 0;
  margin: auto;
  border-radius: 50%;
  background-repeat: no-repeat;
  z-index: 3;
  -webkit-transform: rotate3d(0, 0, 0, 0deg) scale(0.85);
  transform: rotate3d(0, 0, 0, 0deg) scale(0.85);
  transition: 0.55s ease-in-out;
  width: 180%;
  height: 180%;
  opacity: 0;
  background-size: cover;
  box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.3);
}
.circle--slider .animate-more {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s 0.4s;
  min-width: 131px;
  overflow: hidden;
  text-align: center;
  z-index: 30;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 15px;
  height: 82px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}
.circle--slider .animate.active .animate-more {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.circle--slider .animate.active .animate-img .animate-img__in {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
.circle--slider .prev,
.circle--slider .next {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  display: block;
  height: 62px;
  width: 87px;
  text-align: center;
  cursor: pointer;
}
.circle--slider .prev span,
.circle--slider .next span {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-weight: 700;
}
.circle--slider .prev {
  left: 250px;
}
.circle--slider .next {
  right: 250px;
}

.two-column-layout {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh; /* Change from height to min-height */
}

.left-column {
  flex: 1.5;
  min-width: 0;
}

.right-column {
  flex: 1;
  min-width: 0;
  align-self: center;
}

@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column;
    height: auto;
  }

  .left-column,
  .right-column {
    flex: 1;
    width: 100%;
  }
}

.content-section {
  display: none;
  animation: fadeIn 0.5s ease-in-out;
}

.default-content {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.section-slider-nav {
  position: sticky;  /* Change from fixed to sticky */
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Update welcome-section styles */
.welcome-section {
  position: relative;  /* Add this to establish positioning context */
}

.section-slider-nav ul {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

.section-slider-nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 25px;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
}

.section-slider-nav li i {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #7c4102;
}

.section-slider-nav li span {
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
}

.section-slider-nav li:hover,
.section-slider-nav li.current {
  background-color: #c88a16;
  color: white;
}

.section-slider-nav li:hover i,
.section-slider-nav li.current i {
  color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    
  .section-slider-nav {
    position: sticky;  /* Maintain sticky positioning on mobile */
  }
  .section-slider-nav ul {
    flex-wrap: wrap;
  }

  .section-slider-nav li {
    padding: 10px 15px;
    height: auto;
    flex: 1 1 auto;
    min-width: 150px;
  }
  
  .two-column-layout {
    flex-direction: column;
    min-height: auto;
  }

  .section-slider-nav li span {
    font-size: 0.8rem;
  }
}

/* Benefits Section Styles */

.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

#benefits {
  background: #f1f2f2;
}

#faqs {
  background: #dae8e4;
}

.faq-container {
  width: 800px;
  margin: 0 auto;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  padding: 2rem 0;
  max-width: 1000px;
  margin: 0 auto;
}

.benefit-card {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  text-align: center;
}

.benefit-card:hover {
  transform: translateY(-5px);
}

.benefit-card i {
  font-size: 2.5rem;
  color: #c88a16;
  margin-bottom: 1rem;
}

.benefit-card h3 {
  margin: 1rem 0;
  color: #333;
}

.benefit-card p {
  color: #666;
  line-height: 1.5;
}

/* Timeline Section Styles */
.timeline {
  white-space: nowrap;
  overflow-x: hidden;
  position: relative;
  padding: 60px 0;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
  overflow: hidden;
}

.timeline ol li {
  position: relative;
  display: inline-block;
  list-style-type: none;
  width: 230px;
  height: 5px;
  background: #7c4102;
}

.timeline ol li:last-child {
  width: 200px;
}

.timeline ol li:not(:first-child) {
  margin-left: 14px;
}

.timeline ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + -1px);
  bottom: 0;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #c88a16;
}

.timeline ol li div {
  position: absolute;
  left: calc(100% + 7px);
  width: 280px;
  padding: 15px;
  font-size: 1rem;
  white-space: normal;
  color: #333;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.timeline ol li div::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline ol li:nth-child(odd) div {
  top: -16px;
  transform: translateY(-100%);
}

.timeline ol li:nth-child(2n + 1) div::before {
  top: 100%;
  border-width: 13px 13px 0 0;
  border-color: #ccc5b6 transparent transparent transparent;
}

.timeline ol li:nth-child(even) div {
  top: calc(100% + 16px);
}

.timeline ol li:nth-child(even) div::before {
  top: -13px;
  border-width: 13px 13px 0 0;
  border-color: #ccc5b6 transparent transparent transparent;
  left: -2px;
  position: absolute;
}

.timeline time {
  display: block;
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
  color: #c88a16;
}

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .arrows button {
  height: 50px;
  width: 60px;
  border-radius: 10%;
  background: #c88a16;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
}

.timeline .arrows button:hover {
  background: #7c4102;
}

.timeline .disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto;
  }

  .timeline ol {
    padding: 0;
    transform: none !important;
  }

  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }

  .timeline ol li:first-child {
    margin-top: 25px;
  }

  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }

  .timeline ol li div {
    position: static;
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }

  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
}

/* FAQ Section Styles */
.faq-item {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faq-question {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: white;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.1rem;
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-item.active .faq-answer {
  padding: 1.5rem;
  max-height: 500px;
  text-align: left;
}

.faq-item.active .fa-chevron-down {
  transform: rotate(180deg);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .benefits-grid {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .benefit-card {
    padding: 1.5rem;
  }
}

/* Additional Timeline Styling */
.timeline time {
  color: #6f3c05;
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.timeline h3 {
  color: #333;
  margin: 8px 0;
  font-size: 1.1rem;
}

.timeline p {
  color: #9b8646;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
}
/* Highlight current phase */
.timeline ol li div.current-phase {
  border-left-color: #f45b69;
  background: #fef9fa;
}

.timeline ol li div.current-phase time {
  color: #f45b69;
}

.timeline-summary {
  max-width: 950px;
  margin: 0 auto;
  line-height: 22px;
  font-size: 16px;
  color: #2f3740;
}

.content-container h2,
.implementation-timeline h2,
.about-content h2 {
  font-size: 2rem;
  color: #7c4102;
  text-shadow: 1px 40px 60px #d2dce3;
  text-align: center;
  padding-top: 40px;
  margin-bottom: 30px;
}

.services-info h2 {
  color: #26282b;
  text-shadow: 1px 5px 140px #ddd;
}

.section-slider-nav ul {
  box-shadow: 0 40px 30px 0 #94a8d71f, 0 0 10px 0 #fff9ea40;
}

.intro-text {
  max-width: 950px;
  margin: 0 auto 40px;
  line-height: 1.6;
  font-size: 16px;
  color: #2f3740;
  text-align: center;
}

.content-section h3 {
  color: #bb8115;
}

.content-section p {
  line-height: 1.7;
}

.about-hero {
  background: linear-gradient(#0009, #08151a),
    url("https://joe.co.ke/projects/treasury-accrual-accounting.go.ke/wp-content/uploads/2025/02/about_page_image.png") center/cover;
  padding: 20px 0;
  color: white;
  text-align: center;
}

.about-hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.about-content {
  padding: 50px 0;
}

.about-section {
  margin-bottom: 60px;
}

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.info-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-header {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-header h3 {
  margin: 0;
  flex: 1;
}

.card-content {
  padding: 25px;
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.strategy-timeline {
  position: relative;
  margin: 40px 0;
}

.timeline-item {
  display: flex;
  margin-bottom: 30px;
}

.timeline-date {
  flex: 0 0 150px;
  font-weight: bold;
  color: #7c4102;
}

.implementation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

.implementation-card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.implementation-card h3 {
  color: #7c4102;
  margin-bottom: 25px;
  border-bottom: 2px solid #c88a16;
  padding-bottom: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.implementation-card ul {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
}

.implementation-card ul ul {
  width: 95%;
  margin: 10px 0 20px 20px;
}

.implementation-card ul li strong {
  color: #7c4102;
  display: block;
  margin-bottom: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .role-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    flex-direction: column;
  }

  .timeline-date {
    margin-bottom: 10px;
  }
}

/* Card Content Styling */
.card-content ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.card-content ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.card-content ul li:before {
  content: "•";
  color: #7c4102;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

.implementation-card ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.implementation-card ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  line-height: 1.5;
}

.implementation-card ul li:before {
  content: "•";
  color: #7c4102;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

/* Steering Committee Styles */
.committee-structure {
  max-width: 1000px;
  margin: 0 auto;
  padding: 30px 0;
}

.committee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.committee-card {
  background: white;
  border-radius: 10px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.committee-card h4 {
  color: #7c4102;
  margin-bottom: 15px;
  border-bottom: 2px solid #c88a16;
  padding-bottom: 10px;
}

/* Implementation Timeline Styles */
.implementation-timeline {
  margin-top: 40px;
  padding: 30px;
  background: #f9f9f9;
  border-radius: 10px;
}

.implementation-timeline h4 {
  color: #7c4102;
  margin-bottom: 25px;
  text-align: center;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.phase {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.phase h5 {
  color: #c88a16;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

.phase ul {
  list-style: none;
  padding-left: 0;
}

.phase ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.phase ul li:before {
  content: "•";
  color: #7c4102;
  font-size: 20px;
  position: absolute;
  left: 0;
  top: -2px;
}

@media (max-width: 768px) {
  .timeline-grid {
    grid-template-columns: 1fr;
  }

  .implementation-timeline {
    padding: 20px;
  }
}

.about-content {
  padding: 50px 0;
  background: #e4edf440;
}
.about-section {
  margin-bottom: 60px;
  max-width: 1000px;
  margin: 0 auto;
}

.about-section li {
  text-align: left;
}

.card-content h4 {
  text-align: left;
  color: #7c4102;
}

.card-header {
  background: #c88a16;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.committee-card ul li {
  line-height: 1.9;
}

.implementation-card ul ul {
  margin: 10px 0 20px 20px;
}

.implementation-card ul li strong {
  color: #7c4102;
  display: block;
  margin-bottom: 8px;
}

.implementation-card ul ul li {
  margin-bottom: 8px;
  font-size: 0.95em;
}

.implementation-card ul ul li:before {
  font-size: 16px;
  top: 0;
}

/* Resources Page Styles */
.resources-hero {
  background: linear-gradient(#0009, #08151a),
    url("https://joe.co.ke/projects/treasury-accrual-accounting.go.ke/wp-content/uploads/2025/02/about_page_image.png") center/cover;
  padding: 20px 0;
  color: white;
  text-align: center;
}

.resources-hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.resources-content {
  padding: 50px 0;
  background: #e4edf440;
}

.resources-section {
  margin-bottom: 60px;
  max-width: 1000px;
  margin: 0 auto;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.resource-card {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-5px);
}

.resource-card .card-header {
  background: #c88a16;
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.resource-card .card-header i {
  font-size: 24px;
}

.resource-card .card-header h3 {
  margin: 0;
  color: white;
}

.resource-card .card-content {
  padding: 25px;
}

.resource-card .card-content p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .resources-hero h1 {
    font-size: 2rem;
  }

  .resource-card {
    margin: 0 15px;
  }
}

.downloads-form-container {
  padding: 2rem 0;
}

.view-downloads-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  background-color: #f5f5f5;
  color: #333;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.view-downloads-btn:hover {
  background-color: #e0e0e0;
  transform: translateX(5px);
}

.view-downloads-btn i {
  transition: transform 0.3s ease;
}

.view-downloads-btn:hover i {
  transform: translateX(3px);
}

/* Contact Hero Section - matching about/resources style */
.contact-hero {
  background: linear-gradient(#0009, #08151a),
    url("https://joe.co.ke/projects/treasury-accrual-accounting.go.ke/wp-content/uploads/2025/02/about_page_image.png") center/cover;
  padding: 50px 0;
  color: white;
  text-align: center;
}

.contact-hero h1 {
  font-size: 3rem;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.contact-hero .hero-text {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Contact Content Styles */
.contact-content {
  padding: 60px 0;
  background-color: #f8f9fa;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

/* Contact Info Section */
.contact-info-section h2 {
  color: #333;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
}

.contact-info-section p {
  margin-bottom: 0.5rem;
  color: #555;
  line-height: 1.6;
}

/* Enquiries Section */
.enquiries-section h2 {
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.enquiry-group {
  margin-bottom: 1.5rem;
}

.enquiry-group h3 {
  color: #444;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.enquiry-group p {
  color: #555;
  margin-bottom: 0.3rem;
}

/* Form Section */
.form-section {
  grid-column: 1 / -1;
}

/* Map Section */
.map-section {
  margin-top: 40px;
}

.map-section iframe {
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .contact-hero {
    padding: 60px 0;
  }

  .contact-hero h1 {
    font-size: 2rem;
  }

  .contact-hero .hero-text {
    font-size: 1.1rem;
  }
}

/* Contact Form 7 Styling Overrides */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.wpcf7-form textarea {
  height: 150px;
}

.wpcf7-submit {
  background-color: #08151a;
  color: white;
  padding: 12px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

.wpcf7-submit:hover {
  background-color: #1a3847;
}

/* Content Container - matching other pages */
.content-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Contact Section Specific Styles */
.contact-section {
  padding: 60px 0;
}

.contact-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #7c4102;
}

.contact-section .intro-text {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: #666;
}

/* Card Content Specific to Contact */
.resource-card .card-content p {
  margin-bottom: 10px;
  color: #555;
}

.resource-card .card-content i {
  width: 20px;
  color: #7c4102;
  margin-right: 10px;
}

/* Card Header Icons for Contact */
.resource-card .card-header i {
  font-size: 2rem;
  color: #ffffff;
  margin-bottom: 15px;
}

/* Map Section */
.map-section {
  margin: 40px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    margin-bottom: 20px;
  }
}

/* Contact Section Specific Styles */
.contact-section {
  padding: 60px 0;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

/* Card Styles */
.resource-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-5px);
}

.card-header {
  padding: 20px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  color: #08151a;
  font-size: 1.2rem;
  text-align: left;
}

.card-content {
  padding: 20px;
  text-align: left;
}

.card-content p {
  margin-bottom: 10px;
  color: #555;
}

.card-content i {
  width: 20px;
  color: #ddd;
  margin-right: 10px;
}

/* Map Section */
.map-section {
  max-width: 750px;
  margin: 40px auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .resources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    margin-bottom: 20px;
  }
}

/* Training Page Specific Styles */
.training-hero {
  background: linear-gradient(#0009, #08151a),
    url("https://joe.co.ke/projects/treasury-accrual-accounting.go.ke/wp-content/uploads/2025/02/about_page_image.png") center/cover;
  padding: 20px 0;
  color: white;
  text-align: center;
}

.training-section {
  padding: 60px 0;
}

.training-section:first-of-type {
  padding-top: 80px;
}

.section-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 40px;
  color: #666;
}

/* Schedule Styles */
.schedule-item {
  border-left: 3px solid #08151a; /* Updated color */
  padding-left: 15px;
  margin-bottom: 15px;
}

.schedule-item .date {
  color: #08151a; /* Updated color */
  font-weight: 600;
}

.schedule-item .location {
  color: #666;
  font-size: 0.9rem;
}

/* Lists Styling */
.workshop-list,
.elearning-list,
.practices-list {
  list-style: none;
  padding: 0;
}

.workshop-list li,
.elearning-list li,
.practices-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

/* FAQ and Case Studies Preview */
.faq-preview p,
.case-studies-preview p {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

/* View More Button */
.view-more-btn {
  display: inline-block;
  margin-top: 15px;
  color: #08151a; /* Updated color */
  text-decoration: none;
  font-weight: 600;
}

.view-more-btn:hover {
  color: #1a3847; /* Lighter shade for hover */
}

.view-more-btn i {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.view-more-btn:hover i {
  transform: translateX(5px);
}

/* Card Hover Effects */
.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(8, 21, 26, 0.1); /* Updated shadow color */
}

/* Additional Interactive Elements */
.card-header h3 {
  color: #08151a; /* Updated color */
}

.schedule-item:hover {
  border-left-color: #1a3847; /* Lighter shade for hover */
}