:root {
    --primary: #00bcd4;
    --light: #F3F6F9;
    --dark: #191C24;
    --black: #000;
    --teal: #00BCD4;
    --teal-dark: #0097A7;
    --teal-deep: #006064;
    --teal-light: #E0F7FA;
    --teal-soft: #80DEEA;
    --teal-dark: #00838F;
    --teal-mid: #00ACC1;
    --purple-dark: #5C3D91;
    --purple-mid: #7B52C7;
    --purple-light: #EDE7F6;
    --gray-bg: #F5F5F5;
    --gray-border: #E0E0E0;
    --gray-text: #757575;
    --text-primary: #212121;
    --text-secondary: #424242;
    --white: #ffffff;
    --amber: #F57C00;
    --amber-light: #FFF8E1;
    --coral: #D84315;
    --coral-light: #FBE9E7;
    --blue-dark: #1565C0;
    --blue-light: #E3F2FD;

    --card-box-bg: #fff9e6;         /* Soft light-yellow background color */
    --card-icon-bg: #f2720c;        /* High-contrast orange icon background */
    --card-icon-color: #ffffff;     /* Pure white for the graphic icon element */
    --card-title-color: #1a1a1a;    /* Off-black color for readable text header */
    --card-text-color: #e67e22;     /* Medium-contrast orange for paragraph body */

}

html, body {
    font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

.teal{
    color: var(--primary)!important;
}

.teal-deep{
    color: var(--teal-deep)!important;
}

.teal-dark{
    color: var(--teal-dark)!important;
}

.white{
    color:white;
}

.purple{
    color: var(--purple-dark)!important;
}

.amber{
    color: var(--amber)!important;
}

.black{
    color: var(--black)!important;
}

.blue-dark{
    color: var(--blue-dark)!important;
}

.bcg-white{
    background-color:white!important;
}

.text-primary{
    color: #00bcd4!important;
}

.grid-container {
  display: grid;
  place-items: center;    /* Centers content both horizontally and vertically */
  padding: 5%;        /* Creates the vertical canvas */
}

.nav-img{
    width: 100%;
    height: 100%;
    border-top: 3px solid var(--primary);
    /* border-bottom: 3px solid var(--primary); */
}

.nav-top{
    color: white;
    background-color: var(--teal-deep);
    display: grid;
    place-items: center; /* Centers both directions at once */
}

/* CSS */
.square-icon {
  background-color: var(--teal-brand); /* Your background color */
  color: #ffffff;             /* The icon color itself */
  
  /* Layout to make it a perfect square */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Core dimensions */
  width: 45px;
  height: 45px;
  
  /* Match the font size to the box proportions */
  font-size: 24px; 

  border-radius: 12px;
}

.top-nav-title{
    /* background: var(--primary); */
    background: #00BFBF;
    color: white;
    font-size:0.8em;
    /* padding: 5px 10px; */
}

.nav-orgs-title{
    /* background: var(--primary); */
    /* background: #00BFBF; */
    /* color: white; */
    /* font-size:0.8em; */
    /* padding: 5px 10px; */
}

.default-bcg{
    background-image: url('/images/ncceap-landing-page-image-1.jpg');
    background-color: rgba(2, 65, 49, 0.5); 
    background-blend-mode: multiply; 
    background-repeat: no-repeat; 
    background-position: bottom; 
    background-size: cover; 
    min-height: 100vh;
    /* min-height: 100%!important; */
}


.home{
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
  
    /* background-image: url('/images/ncceap_document_bcg.jpg'); */
    /* background-image: url('/images/document_images/28.jpg'); */
    background-image: url('/images/ncceap-landing-page-image-1.jpg');
    background-color: rgba(2, 65, 49, 0.5); 
    background-blend-mode: multiply; 
    background-repeat: no-repeat; 
    background-position: bottom; 
    background-size: cover; 
    min-height: 100vh;
    /* min-height: 100%!important; */

    /* Flexbox settings */
    display: flex;
    flex-direction: column;     /* Stacks your items in a column */
    justify-content: flex-start; /* Forces all elements to the top instead of spreading out */
    align-items: stretch;        /* Keeps elements normal width */
}

.home-top-quote{
    position: relative;
    z-index: 1;
    text-align: center;
    color: #ffffff;
    font-size: clamp(15px, 1.6vw, 20px);
    font-style: italic;
    font-weight: 700;
    line-height: 1.7;
    max-width: 780px;
    padding: 14px 28px 14px;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 188, 212, 0.35);
    border-left: 4px solid #00E5FF;
    border-right: 4px solid #00E5FF;
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.18), rgba(0, 96, 100, 0.22));
    border-radius: 4px;
    backdrop-filter: blur(3px);
}

.home-mission-statement{
    width: 80%;
    margin:auto;
}

.home-mission-statement-div{
  display: grid;
  place-items: center; /* Centers both horizontally and vertically */
}

.nav-logo{
    max-height: 100px;
}

.nav-logo-small{
    max-height: 50px;
}

.nav-logo-xs{
    max-height: 20px;
}

.title-bar-logo{
    max-height: 70px;
}

.side-bar-logo{
    max-height: 50px;
}

.title-bar-text{
    font-size:1.2em;
}

.title-bar-text-2{
    font-size:1em;
}

.nav-bottom-title{
    border-bottom: 3px solid var(--primary);
}

.nav-font{
    font-size: 0.8em;;
}

.nav-item{
    /* padding-top:0!important; */
    /* padding-bottom:0!important; */
}

.dropdown-menu{
    overflow: auto;
    
    /* Adds spacing between stacked links */
    margin-bottom: 8px; 
    
    /* Removes default link underline */
    text-decoration: none; 
    color: black;
}

.dropdown-menu a{
    font-size: 0.7em;
    color: var(--teal-deep);
}

.dropdown-menu ul{
    padding-left: 60px;
    /* list-style-type: none; */
}

.dropdown-menu li::marker {
    color: var(--teal-deep);
}

.btn-main-next{
    background-color: transparent;
    color:white;
    border:2px solid white;
    width:100px;
}

.btn-main-next:hover {
    /* background-color: var(--primary); */
    /* color: var(--primary);     */
    color: white;    
    border-color: var(--primary);    
}

.btn-teal {
    background-color: var(--teal-dark);
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-teal:hover {
    color:white;
    background-color: var(--teal-deep);
}

/* Title Card */
.custom-chapter-box {
  background-color: var(--card-box-bg);
  border: 1px solid rgba(242, 114, 12, 0.1); /* Subtle boundary definition border */
}

.custom-chapter-box .icon-container {
  width: 56px;
  height: 56px;
  background-color: var(--card-icon-bg);
  font-size: 1.5rem;
  color: var(--card-icon-color);
}

.custom-chapter-box .chapter-title {
  color: var(--card-title-color);
  font-size: 1.25rem;
}

.custom-chapter-box .title-description {
  color: var(--card-text-color);
  font-size: 0.95rem;
  line-height: 1.5;
}

.title-card-orange{
  background-color: #fff9e6;
  color:#e67e22;
  /* color:white; */
}

.title-card-amber{
  background-color: var(--amber-light);
  color:var(--amber);
  /* color:white; */
}

.title-card-teal{
  background-color: var(--teal-light);
  color:var(--teal);
  /* color:white; */
}

.title-card-teal .icon-container {
  background-color: var(--teal);
  color: #FFF;
}

.title-card-blue .chapter-description{
  /* background-color: #E3F2FD; */
  color:#e67e22;
}


.title-card-blue{
  background-color: #E3F2FD;
  color:#1565C0;
}

.title-card-blue .chapter-description{
  color:#1565C0;
}

.title-card-blue .icon-container {
  background-color: #1565C0;
  color: #FFF;
}

.title-card-purple{
  background-color: #EDE7F6;
  color:#5346b1;
}

.title-card-purple .chapter-description{
  color:#5346b1;
}

.title-card-purple .icon-container {
  background-color: #5346b1;
  color: #FFF;
}

.badge-purple{
  background-color: #EDE7F6;
  color: #5346b1;
}

.card-custom{
    border:none;
    border-radius: 20px;
    min-height: 220px;
}

.card-teal{
  background-color: var(--teal-light);
  color: var(--teal-deep);

}

.card-blue{
  background-color: var(--blue-light);
  color: var(--blue-dark);

}

.card-amber{
  background-color: var(--amber-light);
  color: var(--amber);

}