/* =========================================
   CI.hr Global Styles
   ========================================= */

/* 1) Design tokens */
:root{ 
  --ci-dark:#1f2430;     
  --ci-muted:#6c757d;
  --ci-light:#f8f9fa;
  --ci-soft:#f3f6fb;
}

.container {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Base */
html, body { height: 100%; }
body { font-family: 'Poppins', sans-serif; color: #212529; }

/* 2) Layout helpers */
.container-narrow { max-width: 960px; }
.container-narrow-lg { max-width: 1140px; }

/* Spacing helpers */
.section   { padding: 72px 0; }
.section-sm{ padding: 56px 0; }
.section-lg{ padding: 96px 0; }

/* Visual helpers */
.shadow-soft { box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.rounded-xl { border-radius: 1rem; }
.divider-line { height: 3px; background: var(--ci-primary); width: 100%; margin: 1.5rem 0; }

/* 3) Navbar */
.navbar .nav-link { font-weight: 500; font-size: large; }

/* =========================================
   HERO (Home + Generic)
   ========================================= */

/* Generic hero */
.hero { background: var(--ci-light); }
.hero .hero-text { max-width: 800px; margin: 0 auto; text-align: center; }
.hero h1 { font-weight: 700; }
.hero h2 { font-weight: 600; font-size: 1.25rem; color: var(--ci-muted); }
.hero h3 { font-weight: 500; font-size: 1.05rem; color: var(--ci-muted); }

/* Home hero base */
.hero--home { background: #fff; padding: 80px 0; text-align: left; }
.hero--home .col-lg-6 { text-align: left; }
@media (max-width: 991.98px){ .hero--home { padding: 56px 0; } }

/* Home hero headings */
.hero--home h1 { font-size: 50px; font-weight: 400; color: #5E3AC9; }
.hero--home h2 { font-size: 30px; font-weight: 400; color: #230132; }
@media (max-width: 991.98px){
  .hero--home h1 { font-size: 38px; }
  .hero--home h2 { font-size: 24px; }
}
@media (max-width: 575.98px){
  .hero--home h1 { font-size: 30px; }
  .hero--home h2 { font-size: 20px; }
}

/* Home hero image  */
.hero--home .hero-img-big {
  width: 110%; max-width: none; position: relative; right: -10px;
}
@media (max-width: 1199.98px){
  .hero--home .hero-img-big { width: 100%; right: 0; }
}

/* Home hero button */
.hero--home .btn-primary {
  background-color: #5E3AC9; color: #fff;
  border: 2px solid #5E3AC9; border-radius: 999px;
  padding: 0.75rem 2rem; font-size: 22px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px; transition: all .3s ease;
}
.hero--home .btn-primary:hover { background:#fff; color:#5E3AC9; border-color:#5E3AC9; }

/* Home hero side-bleed image */
.hero--bleed { position: relative; overflow: hidden; }
.hero--bleed::after{
  content:""; position:absolute; top:0; bottom:0; right:50px; left:60%;
  background-image: var(--hero-img); background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Stacked mobile fallback image container */
@media (max-width: 991.98px){
  .hero--bleed::after{ display:none; }
  .hero-media { height: 320px; overflow: hidden; }
  .hero-img-cover { width:100%; height:100%; object-fit:cover; object-position:center 50%; display:block; }
}
@media (max-width: 575.98px){ .hero-media { height: 240px; } }

/* Universal BG hero (other pages) — swap image via --hero-bg */
.hero--bg {
  padding: 96px 0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero--bg .hero-text h1 { color:#5E3AC9; font-weight:700; }
.hero--bg .hero-text h2 { color:#230132; font-weight:700; }
.hero--bg .hero-text h3 { color:#230132; font-weight:400; }
@media (max-width: 991.98px){ .hero--bg { padding: 72px 0; } }
@media (max-width: 575.98px){ .hero--bg { padding: 56px 0; } }

/* =========================================
   HOME – Feature tiles (icons grid)
   ========================================= */
.section.features { background-color: #5E3AC9; color: #fff; padding: 72px 0; }
.section.features h2 { color:#FFAC33; font-weight:700; }
.section.features p { color:#fff; font-weight:700; font-size:22px; }
.feature-card img { max-width:120px; height:auto; margin-bottom:1rem; }
.feature-card h6 { margin-top:.75rem; font-weight:600; }

/* =========================================
   HOME – Pricing
   ========================================= */
.pricing { background:#fff; }
.pricing-card {
  display:flex; flex-direction:column; border-radius:35px; padding:24px;
  width:100%; min-height:100%; text-align:center;
}
.pricing-card--purple { background:#5E3AC9; color:#fff; }
.pricing-card--dark   { background:#230132; color:#fff; }
.pricing-title { font-weight:700; color:#28E7C5; font-size:30px; }
.pricing-divider { border:none; border-top:2px solid #28E7C5; margin:1rem 0; width:100%; opacity:100%; }
.pricing-list { list-style:none; padding-left:1.2rem; }
.pricing-list li { margin-bottom:.75rem; color:#fff; }
.pricing-card .mt-auto { margin-top:auto !important; }
@media (max-width: 991.98px){ .pricing-card { padding:20px; } }

/* CTA gradient button (shared) */
.btn-cta-gradient{
  background: linear-gradient(90deg, #FFAC33 0%, #FB6234 100%);
  border-radius: 999px; border: 2px solid #FB6234; color:#fff;
  font-size:16px; font-weight:500; text-transform:uppercase; letter-spacing:1px;
  padding: .6rem 1.4rem; transition: all .25s ease;
  overflow: hidden;
}
.btn-cta-gradient:hover{ background:#fff; color:#FB6234; border-color:#FB6234; }

/* =========================================
   HOME – Modules teaser
   ========================================= */
.modules--bg{
  background-image: url("/public/images/orange_bg_side.jpg");
  background-size: cover; background-repeat:no-repeat; background-position:right;
}
.modules-title{ font-weight:700; color:#5E3AC9; }
.modules-copy, .modules-list{ color:#230132; }
.modules-list{ list-style:disc; padding-left:1.25rem; }
.modules-list li::marker{ color:#5E3AC9; font-size:1.5em; }
.modules-list li{ margin-bottom:.4rem; }

/* =========================================
   PARTNERS (image + accordion)
   ========================================= */
.partners { background:#fff; }
.partners-section { padding-top:2rem !important; padding-bottom:2rem !important; }
.partners h2 { color:#230132; }

/* Image column that stretches to match accordion */
.partners-media { border-radius:1rem; overflow:hidden; display:flex; }
.partners-media img { width:100%; height:100%; object-fit:cover; object-position:center 50%; }

/* Legacy partners inline image (kept for safety) */
.partners-img { width:110%; max-width:none; display:block; border:0; border-radius:0; }
@media (max-width: 1199.98px){ .partners-img { width:100%; max-width:100%; } }

/* Accordion: clean look with bottom divider */
.partners .accordion-item{
  border:none; background:transparent; box-shadow:none; margin-bottom:1rem;
  border-bottom: 2px solid #C6C6C6;
}
.partners .accordion-button{
  font-weight:700; background:transparent; color:#230132;
  box-shadow:none; border:none; border-radius:0; padding-left:0; padding-right:0;
}
.partners .accordion-button:focus{ box-shadow:none; }
.partners .accordion-button:not(.collapsed){ background:transparent; color:#230132; }
.partners .accordion-body{ background:transparent; color:#230132; padding-left:0; padding-right:0; }

/* Plus (+) when closed, × when open (Font Awesome) */
.partners .accordion-button::after{
  background-image:none !important; font-family:"Font Awesome 6 Free"; font-weight:900;
  content:"\f067"; color:#5E3AC9; margin-left:auto;
}
.partners .accordion-button:not(.collapsed)::after{ content:"\f00d"; color:#28E7C5; }

/* =========================================
   TESTIMONIALS (carousel)
   ========================================= */
.testimonials { background:#5E3AC9; }
.testimonials h3 { color:#fff; font-weight:700; }
.testimonials p { color:#fff; text-transform:uppercase; font-weight:400; letter-spacing:1px; }
.testimonials .testimonial-img-limit{ max-width:400px; width:100%; height:auto; }

.testimonials .carousel-inner { padding-left: 3rem; padding-right: 3rem; }

/* Teal arrows (SVG data) */
.testimonials .carousel-control-prev-icon,
.testimonials .carousel-control-next-icon{
  width:2.25rem; height:2.25rem; background-size:100% 100%; background-image:none;
}
.testimonials .carousel-control-prev-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328E7C5' viewBox='0 0 16 16'%3E%3Cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}
.testimonials .carousel-control-next-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2328E7C5' viewBox='0 0 16 16'%3E%3Cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 0 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
/* Position arrows */
.testimonials .carousel-control-prev{ left:0rem; width:3rem; opacity:1; }
.testimonials .carousel-control-next{ right:0rem; width:3rem; opacity:1; }

/* =========================================
   LOGOS STRIP
   ========================================= */
.logos { background:#fff; }
.logos h2 { color:#230132; }
.logo-box{ display:flex; align-items:center; justify-content:center; height:90px; }
.logo-box img{
  max-height:64px; max-width:100%; width:auto; height:auto;
  object-fit:contain; opacity:.95; transition: opacity .2s, transform .2s;
}
.logo-box img:hover{ opacity:1; transform: translateY(-2px); }
@media (max-width: 575.98px){
  .logo-box{ height:72px; }
  .logo-box img{ max-height:48px; }
}
/* Purple CTA */
.btn-cta-purple{
  background-color:#5E3AC9; color:#fff; border:2px solid #5E3AC9;
  border-radius:999px; padding:.6rem 1.4rem; font-size:16px; font-weight:500;
  text-transform:uppercase; letter-spacing:1px; transition: all .25s ease;
}
.btn-cta-purple:hover{ background:#fff; color:#5E3AC9; border-color:#5E3AC9; }
h2.fw-bold.mb-4.logos{ color:#5E3AC9; }

/* =========================================
   CTA 
   ========================================= */
.section.cta { padding: 0; }
.cta img { width:100%; height:auto; border-radius:1rem; }
.cta .cta-text { max-width:500px; margin:0 auto; text-align:center; }
.cta .cta-text h2 { color:#5E3AC9; }

.cta-media{ height:430px; overflow:hidden; border-radius:1rem; }
.bg-cover{
  background-image: url("/public/images/request_demo.jpg");
  background-size:cover; background-repeat:no-repeat; background-position:center 50%;
}
@media (max-width: 991.98px){ .cta-media{ height:300px; } }
@media (max-width: 575.98px){ .cta-media{ height:220px; } }

/* =========================================
   PREMIUM – Alternating feature sections
   ========================================= */

/* Box/content width inside each feature row */
.feature-section .row{
  max-width:1200px; margin:0 auto; padding:0 2rem;
}

/* Feature images */
.feature-section img,
.feature-img{
  max-width:400px; width:100%; height:auto;
  object-fit:initial; border-radius:0; display:block;
}

/* Variant A: Image LEFT (purple bg) */
.feature-section.feature--purple{
  background-color:#5E3AC9; color:#fff;
}
.feature-section.feature--purple h3{ color:#FFAC33; font-weight:700; }
.feature-section.feature--purple p,
.feature-section.feature--purple li{ color:#fff; }
.feature-section.feature--purple ul{ list-style:disc; padding-left:1.25rem; }
.feature-section.feature--purple ul li::marker{ color:#FFAC33; }

/* Variant B: Image RIGHT (white/grey bg) */
.feature-section.feature--white{
  background-color:#F8F8F8; color:#230132;
}
.feature-section.feature--white h3{ color:#5E3AC9; font-weight:700; }
.feature-section.feature--white p,
.feature-section.feature--white li{ color:#230132; }
.feature-section.feature--white ul{ list-style:disc; padding-left:1.25rem; }
.feature-section.feature--white ul li::marker{ color:#5E3AC9; }

/* Optional background image helper for feature sections */
.feature-bg{
  background-image: var(--feature-bg);
  background-repeat:no-repeat; background-size:cover; background-position:center;
}

/* Keep stacked alignment tidy on small screens */
@media (max-width: 991.98px){
  .feature-section .row > [class*="col-"]{ text-align:left; }
}

/* =========================================
   MODULES – List block
   ========================================= */
.modules-list .module-icon img{
  width:auto !important; height:auto !important; max-height:60px !important;
  max-width:100%; object-fit:contain !important; border-radius:0; display:block; flex:0 0 auto;
}
.modules-list .module-icon .mod-icon{ max-width:160px; }

/* =========================================
   FORMS / CONTACT PAGE
   ========================================= */
.form-card{
  background:#fff; border-radius:1rem; padding:1.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.35); /* stronger shadow */
}
.form-card .form-label{ font-weight:600; }
.form-check-label{ font-weight:500; }

/* Demo page left column text */
.demo-wrap .container{ max-width:960px; }
.demo-wrap .blurb h2, .demo-wrap .blurb h4{ margin-bottom:1rem; }

/* Blurb text styling */
.blurb-title{ color:#FFAC33; font-weight:700; }
.blurb-divider{ height:3px; background:#5E3AC9; width:300px; margin:1.25rem 0; }
.blurb-subtitle{ color:#242424; font-weight:700; line-height:1.5; }

/* Agenda tweaks */
.agenda .mb-4 strong{ color:#242424; font-weight:700; }

/* =========================================
   FAQ (capsule style)
   ========================================= */
.faq-section{ background:#F8F8F8; }
.faq-section h2{ color:#5E3AC9; text-align:center; }

.faq-section .accordion-item{
  border: 1px solid #707070; border-radius:40px; margin-bottom:20px;
  background:#fff; overflow:hidden;
}

/* Centered question + arrow fixed on the right */
.faq-section .accordion-button{
  background:#fff; color:#230132; font-weight:600; box-shadow:none;
  position:relative; width:100%; justify-content:center; text-align:center;
  border-radius:40px; padding-right:3rem;
}
.faq-section .accordion-button:not(.collapsed){
  border-bottom:1px solid #707070; border-radius:12px 12px 0 0;
}
.faq-section .accordion-button::after{
  position:absolute; right:1rem; margin-left:0 !important;
}
.faq-section .accordion-header{ text-align:center; }
.faq-section .accordion-body{
  background:#fff; color:#230132; border-radius:0 0 12px 12px;
}

/* =========================================
   FOOTER
   ========================================= */
footer{
  background:#230132; padding:24px 0; text-align:center;
}
footer a { color:#ccc; text-decoration:none; margin:0 10px; }
footer .footer-line-1 { color:#FAFAFA; font-weight:500; }
footer .footer-line-2 { color:#28E7C5; font-weight:500; }

/* =========================================
   Responsive global tweaks
   ========================================= */
@media (max-width: 991.98px){
  .section { padding: 56px 0; }
}