/* ------------------------------
   consulting.css
   Consulting Tab Styles
------------------------------ */
/* Hero Section */
   

/* ------------------------------
   One Suite Style
------------------------------ */
	.os-features {
	  padding: 20px 24px;
	  background: #f4f6f9;
	}

	.os-features h2 {
	  text-align: center;
	  color: var(--primary);
	  font-size: 2.5rem;
	  margin-bottom: 20px;
	}

	/* Each feature row */
	.os-feature-section {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: center;
	  margin-bottom: 30px;
	}

	/* Alternate row for image on right */
	.os-feature-section.reverse {
	  flex-direction: row-reverse;
	}

	/* Image container */
	.os-feature-image {
	  flex: 1;
	  min-width: 280px;
	}

	.os-feature-image img {
	  width: 100%;
	  border-radius: 12px;
	  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
	}

	/* Text container */
	.os-feature-text {
	  flex: 1;
	  min-width: 280px;
	  padding: 20px;
	}

	.os-feature-text h3 {
	  color: var(--primary);
	  margin-bottom: 15px;
	}

/* ------------------------------
   One Connect Style
------------------------------ */
	.oc-section { 
		max-width:1100px; 
		margin:60px auto; 
		padding:0 24px; 
	}

    .oc-section h2 { 
		border-left:5px solid var(--primary); 
		padding-left:10px; 
		font-size:24px; 
		margin-bottom:1rem; }

    /* ====== Image Fade Slider (Workday Style, No Workday Names) ====== */
    .oc-image-slider {
      position: relative;
      width: 100%;
      height: 400px;
      overflow: hidden;
      border-radius: var(--radius);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .oc-image-slide {
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
    }

    .oc-image-slide.active {
      opacity: 1;
      z-index: 2;
    }

    .oc-image-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .oc-image-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(15,23,42,0.7) 20%, rgba(15,23,42,0.2) 80%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      color: #fff;
      padding: 40px 60px;
    }

    .oc-image-overlay h3 {
      font-size: 28px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .oc-image-overlay p {
      font-size: 18px;
      max-width: 600px;
      line-height: 1.5;
      color: #e2e8f0;
    }

    .oc-image-dots {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 10px;
    }

    .oc-image-dots .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.5);
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .oc-image-dots .dot.active {
      background: var(--primary);
      transform: scale(1.3);
    }

/* ------------------------------
   One Dash Style
------------------------------ */
.onedash-hero{
      padding:40px 0 30px;
      background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
      min-height:100vh;
}

.dash-container{
      max-width:1100px;
      margin:0 auto;
      padding:0 20px;
      display:grid;
      grid-template-columns:1fr;
      gap:40px;
}

/* TOP HEADING FULL WIDTH */
.dash-header h1{
      font-size:2.0rem;
      font-weight:700;
      color:#1e293b;
      margin-bottom:18px;
      text-align:center;
}

.dash-header .gradient-title{
      background:linear-gradient(90deg,var(--primary) 5%,#e2e8f0 140%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
}

.dash-header p{
      font-size:1.1rem;
      color:#475569;
      line-height:1.0;
      max-width:1100px;
}

/* BOTTOM GRID: TABS LEFT – RIGHT PANEL */
.dash-bottom{
      display:grid;
      grid-template-columns:1fr 2fr;
      gap:30px;
      align-items:flex-start;
}

/* TABS */
.dash-tab-nav{
      display:flex;
      flex-direction:column;
      gap:12px;
}

.dash-tab-btn{
      background:white;
      border:none;
      text-align:left;
      padding:12px 20px;
      font-size:0.95rem;
      font-weight:600;
      color:#475569;
      border-left:4px solid transparent;
      border-radius:8px;
      cursor:pointer;
      transition:all .3s;
      box-shadow:0 4px 15px rgba(0,0,0,.06);
      width:100%;
}

.dash-tab-btn.active{
      color:#1e293b;
      background:#fff;
      border-left-color:#3b82f6;
      box-shadow:0 8px 25px rgba(59,130,246,.15);
}

.dash-tab-btn .dash-tag{
      display:block;
      font-size:.88rem;
      color:#64748b;
      margin-top:5px;
      font-weight:normal;
}

/* RIGHT PANEL BOX WITH CONTENT ABOVE IMAGE */
.dash-right-box{
      border-radius:18px;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:15px;
}

/* CONTENT ABOVE IMAGE */
.dash-content{
      display:none;
      font-size:0.95rem;
      color:#334155;
      line-height:1.55;
      opacity:0;
      transition: opacity 0.6s ease-in-out;
}

.dash-content.active{
      display:block;
      opacity:1;
}

.dash-image-preview{
      border-radius:16px;
      overflow:hidden;    
      height:370px;
      position:relative;
}

.dash-preview-img{
      width:100%;
      height:100%;
      object-fit:contain;
      position:absolute;
      top:0;
      left:0;
      opacity:0;
      transition: opacity 0.6s ease-in-out;
}

.dash-preview-img.active{
      opacity:1;
      position:relative;
}

/* ======================= MOBILE FIX ======================== */
@media (max-width:992px){
      .dash-header{
        text-align:center;
      }
      .dash-header p{
        margin:0 auto;
      }
      .dash-bottom{
        grid-template-columns:1fr;
        gap:20px;
      }
      .dash-tab-btn{
        width:100%;
        border:2px solid #e2e8f0;
        border-left:none !important;
        border-radius:14px;
      }
      .dash-tab-btn.active{
        background:#eff6ff;
        border-color:#3b82f6;
      }
      .dash-image-preview{
        height:320px;
        max-width:90%;
        margin:0 auto;
      }
}

@media (max-width:640px){
      .dash-header h1{
        font-size:2.2rem;
      }
      .dash-tab-btn{
        font-size:0.95rem;
        padding:16px 20px;
      }
      .dash-image-preview{
        height:220px;
      }
      .onedash-hero{
        padding:40px 0 20px;
      }
}
/* ------------------------------
   One View Style
------------------------------ */
	/* SECTION TITLE */
    .ov-section {
	max-width: 1100px;
	margin: 0 auto;
      
    }
	.ov-section h2 {
		font-size: 2rem;
      text-align: center;
      margin: 20px 0 20px;
      font-weight: 800;
      background: linear-gradient(10deg,  var(--primary), #003d82);
      -webkit-background-clip: text;
      color: transparent;
    }
	.ov-section ul {
      padding-left: 28px;
    }
	/* ZIG-ZAG ROW */
    .ov-zigzag-row {
	max-width: 1100px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 100px;
      align-items: center;
      margin-bottom: 30px;
    }
    .ov-zigzag-row:nth-child(even) {
      direction: rtl;
    }
    .ov-zigzag-row:nth-child(even) .content {
      direction: ltr;
    }
.ov-content {
      padding: 20px 0;
    }
    .ov-content h3 {
      font-size: 1.5rem;
      font-weight: 800;
      margin: 0 0 24px;
      color: var(--primary);
    }
    .ov-content p, .ov-content ul {
      font-size: 1.15rem;
      color: #64748b;
      margin: 0 0 20px;
    }
    .ov-content ul {
      padding-left: 28px;
    }
	.ov-bullet-list {
	  list-style: disc;
	  margin-left: 20px; /* add some indentation */
	}
	.ov-bullet-list li {
	  list-style-position: outside;
	}

    /* IMAGE — STRAIGHT EDGES + TRANSPARENT BG */
    .ov-image-side {
      opacity: 0;
      transform: translateY(70px);
      transition: all 1.2s ease-out;
    }
    .ov-image-side.visible {
      opacity: 1;
      transform: none;
    }
    .ov-image-side img {
      width: 100%;
      height: auto;
      max-width: 100%;
      max-height: 540px;
      object-fit: contain;           /* Full image, no crop */
      display: block;
      margin: 0 auto;
      border-radius: 0;             /* STRAIGHT CORNERS */
      box-shadow: 0 20px 50px rgba(0,86,179,0.12);
      background: transparent;      /* Transparent background */
      transition: transform 0.8s ease, box-shadow 0.8s ease;
    }
    .ov-image-side:hover img {
      transform: translateY(-12px);
      box-shadow: 0 32px 70px rgba(0,86,179,0.22);
    }

    /* TEXT BLOCK */
    .ov-text-block {
      background: white;
      padding: 68px;
	  gap: 10px;
      border-radius: 36px;
      box-shadow: 0 20px 50px rgba(0,86,179,0.12);
      margin-bottom: 30px;
      font-size: 1.12rem;
      line-height: 2;
      border-left: 6px solid var(--primary);
    }
	.ov-text-block p {
	  margin-bottom: 15px;
    }

    /* RESPONSIVE */
    @media (max-width: 992px) {
      .ov-zigzag-row {
        grid-template-columns: 1fr;
        gap: 80px;
      }
      .ov-zigzag-row:nth-child(even) {
        direction: ltr;
      }
      .ov-image-side img {
        max-height: 460px;
      }
    }

    @media (max-width: 768px) {
      .ov-section { font-size: 1.5rem; }
      .ov-content h3 { font-size: 1.2rem; }
      .ov-text-block { padding: 38px; border-radius: 28px; }
      .ov-image-side img { max-height: 380px; }
      .ov-section { padding: 70px 15px; }
    }


/* ------------------------------
   Payroll Passport Style
------------------------------ */

    /* ===== VERTICAL CARDS WITH HEADING ABOVE IMAGE ===== */
    .pp-wide-cards {
      max-width: 1000px;
      margin: 20px auto;
      padding: 0 20px;
    }

    .pp-wide-heading {
      text-align: center;
      font-size: 2.0rem;
      font-weight: 700;
      color: var(--primary, #0b63d7);
      margin-bottom: 10px;
    }

    .pp-wide-cards > p {
      text-align: center;
      font-size: 1rem;
      line-height: 1.8;
      color: #444;
      margin-bottom: 10px;
    }

    .pp-wide-grid {
      display: flex;
      flex-direction: column; /* stack vertically on all sizes */
      gap: 20px;
    }

    .pp-wide-card {
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 35px rgba(0,0,0,0.12);
      transition: all 0.35s ease;
      cursor: pointer;
      background: #fff;
      position: relative;
      display: flex;
      flex-direction: column;
    }

    /* Heading & content above image */
    .pp-card-header {
      padding: 20px 25px;
      background: #f7f7f7;
    }

    .pp-card-header h3 {
      margin: 0 0 8px;
      font-size: 1.5rem;
      color: var(--primary, #0b63d7);
    }

    .pp-card-header p {
      margin: 0;
      font-size: 0.98rem;
      color: #555;
      line-height: 1.5;
    }

    .pp-wide-card img {
      width: 100%;
      height: auto;
      max-height: 380px;   /* desktop default */
      object-fit: cover;   /* cover so it fills the card width nicely */
      display: block;
      transition: transform 0.45s ease, filter 0.3s ease;
      filter: brightness(0.95);
      background: #000;
    }

    .pp-wide-card:hover img {
      transform: scale(1.03);
      filter: brightness(0.82);
    }

    /* Overlay content on image (optional) */
    .pp-wide-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 18px 20px;
      background: rgba(0,0,0,0.55);
      color: #fff;
      transition: all 0.35s ease;
      opacity: 0;
      transform: translateY(18px);
    }

    .pp-wide-card:hover .pp-wide-content { opacity: 1; transform: translateY(0); }

    .pp-wide-content i { font-size: 1.6rem; color: var(--accent, #ffd166); margin-bottom: 8px; display: inline-block; }

    .pp-wide-content h3 { font-size: 1.2rem; margin: 6px 0; }
    .pp-wide-content p { font-size: 0.95rem; line-height: 1.4; color: #eef4fb; margin: 0; }


    /* Mobile-first adjustments */
    @media (max-width: 1024px) {
      .pp-wide-cards { margin: 60px auto; }
      .pp-wide-heading { font-size: 2.25rem; }
      .pp-wide-cards > p { margin-bottom: 40px; }
      .pp-wide-grid { gap: 40px; }
    }

    @media (max-width: 768px) {
      .pp-wide-cards { margin: 28px 12px; }
      .pp-wide-heading { font-size: 1.7rem; margin-bottom: 12px; }
      .pp-wide-cards > p { font-size: 1rem; margin-bottom: 20px; }
      .pp-wide-grid { gap: 24px; }

      .pp-card-header { padding: 14px 16px; }
      .pp-card-header h3 { font-size: 1.25rem; }
      .pp-card-header p { font-size: 0.95rem; }

      .pp-wide-card img { max-height: 220px; object-fit: cover; }

      /* Show overlay content by default on smaller screens for better discoverability */
      .pp-wide-content { opacity: 1; transform: translateY(0); position: relative; background: transparent; color: #222; padding: 12px 16px; }
      .pp-wide-content h3, .wide-content p { color: inherit; }
      .pp-wide-content i { display: none; }

      /* make the entire card tappable and remove hover effects */
      .pp-wide-card:hover img { transform: none; filter: brightness(0.98); }
    }

    /* very small phones */
    @media (max-width: 420px) {
      .pp-wide-heading { font-size: 1.4rem; }
      .pp-card-header h3 { font-size: 1.1rem; }
      .pp-card-header p { font-size: 0.92rem; }
      .pp-wide-card img { max-height: 180px; }
    }