:root{
    --bg:#ffffff;
    --card:#ffffff;
    --ink:#0f172a; /* slate-900 */
    --muted:#717171; /* slate-600 */
    --brand:rgb(8, 202, 232); /* violet-ish */
    --accent:#f1f0f0; /* soft violet bg */
    --ring: rgba(162, 162, 162, 0.25);
    --shadow:0 10px 25px rgba(2,6,23,.08);
    --radius:18px;
    --footer-bg:#2d3435;       /* primary background (Trainual-esque purple) */
    --footer-ink:#f5f7ff;      /* main text */
    --footer-muted:#cccccc;    /* secondary text */
    --footer-accent:rgb(8, 202, 232);   /* CTA accent (newsletter button outline) */
    --footer-link:#ffffff;     /* link text */
    --footer-link-hover:rgb(8, 202, 232);
    --footer-border:rgba(255,255,255,.15);
    --footer-radius:16px;
    --footer-font:"Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;    
}
*{box-sizing:border-box}
html,body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; color:var(--ink); background:var(--bg)}
a{color:var(--brand); text-decoration:none}
.container{max-width:1200px; margin:0 auto; padding:32px 20px}
.hero{
    display:grid; gap:10px; text-align:center; padding:36px 0 24px;
}
.eyebrow{display:inline-flex; gap:10px; align-items:center; color:var(--brand); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:.85rem; background:var(--accent); padding:8px 12px; border-radius:999px}
h1{font-size: clamp(28px, 4vw, 44px); margin:8px 0 6px}
.sub{color:var(--muted); font-size: clamp(16px, 1.7vw, 18px)}

/* Cards */
.partner_page .grid, .services_page .grid {display:grid; gap:22px; grid-template-columns:repeat(12, 1fr); align-items:start}
.partner_page .card, .services_page .card {grid-column: span 12; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; border:1px solid #eef2ff}
@media (min-width:900px){ .partner_page .card{grid-column:span 6} }

.partner_page .card-head, .services_page .card-head {display:flex; align-items:center; gap:14px; margin-bottom:6px} */
.badge{width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:var(--accent);}
.title{font-weight:800; font-size:1.35rem; letter-spacing:.2px}
.copy{color:var(--muted); line-height:1.6; margin:6px 0 16px}
.lean_btn{display:inline-flex; align-items:center; gap:8px; background:var(--card); color:var(--brand); border:1.5px solid var(--brand); padding:10px 14px; border-radius:12px; font-weight:700}
.lean_btn:hover{box-shadow:0 0 0 6px var(--ring)}
.rule{height:1px; background:#eceefe; margin:22px 0}

.partner_page .list h4, .services_page .list h4 {margin:0 0 10px}
.partner_page .inc-list, .services_page .inc-list {display:grid; gap:12px}
.partner_page .inc-item, .services_page .inc-item {display:grid; grid-template-columns:24px 1fr; gap:10px; align-items:start}
.partner_page .inc-item p, .services_page .inc-item p {margin:0; color:var(--muted)}

/* Tiny icon styling to feel pencil-drawn */
.partner_page .icon, .services_page .icon {width:24px; height:24px; stroke:var(--brand); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; fill:none}
.partner_page .icon.check, .services_page .icon.check{stroke:var(--brand)}

body {
    padding-bottom: 0;
}
.bg-dark {
    background-color: rgb(255, 255, 255) !important;
}
.bg_highlight {
    background-color: rgb(8, 202, 232);
    color: #ffffff;
}
.bg_medium {
    background-color: rgb(126, 126, 126);
    color: #ffffff;
}
.bg_light {
    background-color: rgb(248, 249, 250);
    color: #000000;
}
.bg_darker {
    background-color: rgb(56, 56, 56);
    color: #ffffff;
}
.bg_darkest {
    background-color: rgb(0, 0, 0);
    color: #ffffff;
}
.main_section {
    width: 100%;
    padding: 60px 200px;
}
.partner_section {
    width: 100%;
    padding: 0 200px;
}
.card.container {
 padding: 0;
}
#mainNav .nav-link {
    color: #666666;
}
#mainHeader {
    padding-top: 56px;
    margin: 0;
    color: #000000;
    min-height: 600px;
    background-color: rgb(220, 246, 250) !important;
    /* background: linear-gradient(to bottom, rgb(220, 246, 250, 1), rgb(220, 246, 250, 0)); */
}
#mainHeader .subtitle {
    font-size: 1.25em;
}
.sub_header {
    padding-top: 56px;
    margin: 0 0 40px 0;
    color: #000000;
    min-height: 500px;
    /* background-color: rgb(220, 246, 250) !important; */
    background: linear-gradient(to bottom, rgb(243, 242, 242) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0) 100%);
    padding-bottom: 40px;
}
.row.product_list {
    margin: 0 !important;
    flex-wrap:nowrap;
}
.blue_fade {
    background: linear-gradient(to bottom, rgb(220, 246, 250, 1), rgb(245, 245, 247, .5));
    margin: 10px;
    padding: 20px;
}
.section {
  scroll-margin-top: 100px;  /* adjust based on navbar height */
}

#video {
    height: 300px;
}

#pricingPanel li {
    font-weight: bold;
}
#pricingPage .unavailable {
    color: #999999;
    text-decoration: line-through;
    font-weight: normal;
}
.text-body-secondary {
    color: #999999 !important;
}
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgb(8, 202, 232);
    --bs-btn-border-color: rgb(8, 202, 232);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(8, 202, 232);
    --bs-btn-hover-border-color: rgb(8, 202, 232);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(8, 202, 232);
    --bs-btn-active-border-color: rgb(8, 202, 232);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: rgb(8, 202, 232);
    --bs-btn-disabled-border-color: rgb(8, 202, 232);
}

.btn-outline-primary {
    --bs-btn-color: #08cae8;
    --bs-btn-border-color: rgb(8, 202, 232);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(8, 202, 232);
    --bs-btn-hover-border-color: rgb(8, 202, 232);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(8, 202, 232);
    --bs-btn-active-border-color: rgb(8, 202, 232);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgb(8, 202, 232);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgb(8, 202, 232);
    --bs-gradient: none;
}

.btn-outline-secondary {
    --bs-btn-color: rgb(255, 255, 255);
    --bs-btn-border-color: rgb(255, 255, 255);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgb(255, 255, 255, .25);
    --bs-btn-hover-border-color: rgb(255, 255, 255, .5);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgb(255, 255, 255);
    --bs-btn-active-border-color: rgb(8, 202, 232);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: rgb(255, 255, 255);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgb(255, 255, 255);
    --bs-gradient: none;
}

.border-primary {
    --bs-border-opacity: 1;
    border-color: rgb(8, 202, 232) !important;
}

.text-bg-primary {
    color: #fff !important;
    background-color: rgb(8, 202, 232) !important;
}

a {
    color: rgb(8, 202, 232);
    text-decoration: none;
}
.btn-outline-light {
    border: 2px solid #ffffff;
}
.btn-outline-light:hover {
    border: 2px solid #ffffff;
    color: rgb(8, 202, 232);
}

.btn-light {
    color: rgb(8, 202, 232);
}

.btn-light:hover {
    border: 1px solid #ffffff;
    color: #ffffff;
    background-color: transparent;
}

.pricing_button {
    margin: 80px 0;
}

.info {
    font-size: .75em;
    margin-right: -10px;
    line-height: 200%;
}

#annualTextContainer {
    display: inline-block;
    width: 350px;
    padding-left: 20px;
}

.services-heading {
    font-size: 50px;
    letter-spacing: -.05rem;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);    
}

.page_container {
    min-height: 500px
}

.page_header {
    /* background-color: rgb(220, 246, 250); */
    background: linear-gradient(to bottom, rgb(220, 246, 250, 1), rgb(220, 246, 250, 0));
    padding: 80px 10px;
}
.page_header h2 {
    font-size: 50px;
    letter-spacing: -.05rem;
}
.navbar-brand {
    margin-left: 10px;    
    margin-right: 40px;
}

/* #footer {
    height: 300px;
    padding: 30px 20px;
    background: #2d3435;
    font-size: 14px;
    line-height: 30px;
    color: grey;
} */
#partnership {
  background-repeat: no-repeat; /* Prevents repetition */
  background-position: right center; /* Positions in the bottom right corner */
  height: 400px;
}
#services {
  background-repeat: no-repeat; /* Prevents repetition */
  background-position: right center; /* Positions in the bottom right corner */
}

#homePanel {
  background-repeat: no-repeat; /* Prevents repetition */
  background-position: right center; /* Positions in the bottom right corner */
}

.square-box {
  position: relative;
  width: 100%;
  padding-top: 100%; /* Maintains square shape */
  background-color: #ffffff;
  border: 1px solid #ccc;
  overflow: hidden;
}

.square-box-content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 1rem;
  box-sizing: border-box;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.front {
  background-color: #ffffff;
  z-index: 1;
  opacity: 1;
  visibility: visible;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back {
  background-color: #d3d3d3;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
}

/* Hover effect */
.square-box:hover .front {
  opacity: 0;
  visibility: hidden;
}

.square-box:hover .back {
  opacity: 1;
  visibility: visible;
}

.product_icon {
    text-align: center;
    margin-bottom: 20px;
}

.product_icon img {
    max-height: 75px;
}

#productGrid .square-box-content {
    padding: 20px 8px;
}

#productGrid ul {
    font-size: .95em;
    margin: 25px 15px;
    padding-left: 15px;
}

#productGrid ul li {
    padding-left: 0;
}
#productGrid .details {
   font-size: .75em; 
   text-align: center;
}

.text_green {
    color: #05ca72;
}

.text_pink {
    color: #ff71cd;
}

.text_maroon {
    color: #98013d;
}

.text_deepgreen {
    color: #006279;
}

.text_gold {
    color: #fdab3d;
}

.text_blue {
    color: #0073ea;
}

.text_salmon {
    color: #ff7575;
}

.text_mutedpurple {
    color: #96aeff;
}

.text_yellow {
    color: #ffcc00;
}

.text_purple {
    color: #6161ff;
}

.text_aqua {
    color: #00d2d2;
}
#productPage .featurette-heading {
    margin-top: 60px;
}

#connectPanel a {
    margin-left: 4px;
    margin-right: 10px;
}
.center_div {
  margin: 0 auto;
  width: 50%; /* or any fixed width */
}
.leadership_box {
    background-color: rgb(220, 246, 250, .5);
}
.team-photo {
    width: 100%;
    aspect-ratio: 1 / 1;          /* perfect square */
    object-fit: cover;             /* crop to fill */
    border-radius: .5rem;          /* rounded corners; use 50% for a circle */
}

 .bdc-footer{background:var(--footer-bg); color:var(--footer-ink); font-family:var(--footer-font)}
  .bdc-foot-wrap{max-width:1200px; margin:0 auto; padding:48px 20px}
  .bdc-grid{display:grid; gap:28px; grid-template-columns:repeat(12,1fr)}
  .bdc-col{grid-column:span 12}
  @media (min-width:900px){
    .bdc-col--brand{grid-column:span 3}
    .bdc-col--product{grid-column:span 3}
    .bdc-col--use{grid-column:span 3}
    .bdc-col--resources{grid-column:span 3}
    .bdc-row-2{grid-column:span 12; display:grid; gap:28px; grid-template-columns:repeat(12,1fr)}
    .bdc-col--newsletter{grid-column:span 3}
    .bdc-col--customers{grid-column:span 3}
    .bdc-col--follow{grid-column:span 3}
  }
  .bdc-brand{font-size:1.5em; font-weight:800; letter-spacing:.3px}
  .bdc-legal{margin-top:12px; font-size:14px; color:var(--footer-muted)}
  .bdc-legal a{color:var(--footer-link); text-decoration:none; border-bottom:1px dashed transparent}
  .bdc-legal a:hover{border-bottom-color:var(--footer-link)}

  .bdc-h{font-weight:800; font-size:18px; margin:0 0 14px}
  .bdc-list{list-style:none; padding:0; margin:0; display:grid; gap:10px}
  .bdc-a{color:var(--footer-link); text-decoration:none}
  .bdc-a:hover{color:var(--footer-link-hover)}
  .bdc-small{color:var(--footer-muted); font-size:14px}

  /* Newsletter */
  .bdc-news{background:rgba(255,255,255,.06); border:1px solid var(--footer-border); border-radius:var(--footer-radius); padding:18px}
  .bdc-news h4{margin:0 0 8px; font-size:18px}
  .bdc-news p{margin:0 0 14px; color:var(--footer-muted)}
  .bdc-btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; color:#101225; background:#fff; font-weight:700; text-decoration:none; border:2px solid var(--footer-accent); box-shadow:0 6px 20px rgba(0,0,0,.07)}
  .bdc-btn:hover{transform:translateY(-1px)}

  /* Socials */
  .bdc-social{display:flex; gap:12px; margin-top:10px}
  .bdc-ico{width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.1); display:grid; place-items:center; border:1px solid var(--footer-border)}
  .bdc-ico svg{width:18px; height:18px; fill:#fff}
  .bdc-ico:hover{background:rgba(255,255,255,.18)}

  /* Bottom bar */
  .bdc-bottom{border-top:1px solid var(--footer-border); margin-top:28px; padding-top:18px; display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center}
  .bdc-copy{font-size:14px; color:var(--footer-muted)}
  .bdc-legal-links{display:flex; gap:14px; flex-wrap:wrap}
  .bdc-legal-links a{color:var(--footer-link); text-decoration:none}
  .bdc-legal-links a:hover{text-decoration:underline}

#termsPage ol > li, #privacyPage ol > li {
    margin-bottom: 20px;
}
@media screen and (max-width: 576px) {
    .main_section {
        width: 100%;
        padding: 20px 20px;
    }
    .product_icon img {
        max-height: 50px;
    }   
    .carousel-caption h5 {
        font-size: .85em !important;
    }
    .carousel-caption img {
        max-width: 200px;
    }    
    .carousel-item {
        height: 25rem;
    }
    #productPage .featurette-heading {
        margin-top:10px;
    }
    #productPage .featurette-divider {
        margin: 2rem 0;
    }
    #productPage .row.mb-5 {
       margin-bottom: 0rem !important;
    }
    .background_image {
        background-image: none !important;
    }   
    #partnership {
        height: auto;
    }
    .bdc-col--newsletter{grid-column:span 12 !important}
    .bdc-col--customers{grid-column:span 12}
    .bdc-col--follow{grid-column:span 12}
    .bdc-grid {
        gap: 18px;
    }    
    #mainHeader {
        padding-top: 2px;
    }
    .demo_button_home {
        text-align: center;
    }
}