/* CSS Document */

:root {
    --primary: #003da5;
    --secondary: #525368;
    --light: #ccd8ed;
    --dark: #00205b;
	--bg-success: #ccd8ed;
}

/* Base state */
.btn.btn-primary {  
	background-color: #d9d9d9;  
	border-color: #d9d9d9;  
	color: #000; /* ensure readable text on a light background */}

/* Hover / focus / active states */
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary:active:focus {  
	background-color: #cfcfcf;  
	border-color: #cfcfcf;  
	color: #000;
}

/* Disabled state (optional but nice for consistency) */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {  
	background-color: #d9d9d9;  
	border-color: #d9d9d9;  
	color: #000;  
	opacity: 1; /* optional: keep color solid instead of faded */
}

.navbar .container-fluid {   
	background-color: #003da5;}

.navbar {  
	--bs-navbar-color: #000000;           /* default link color */  
	--bs-navbar-hover-color: #4d4d4d;     /* hover/focus */  
	--bs-navbar-active-color: #003da5;    /* active/current */}

.bg-primary { 
	background-color: #003da5 !important;  /* changed template color from green to blue */}

.bg-dark { 
	background-color: #00205b !important;  /* changed template color from green to blue */}

.bg-light { 
	background-color: #ccd8ed !important;  /* changed template color from green to blue */}

.bg-success {
	background color: #003da5 !important;
}

.display-5 {    
	color: #003da5; /* primary color */}

.mb-0 {    
	color: #003da5; /* primary color */}

.mb-3 {    
	color: #003da5; /* primary color */
	font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  font-size: 1.5rem; 
	/* 18px base — adjust as needed */
}

.fs-5 {    
	color: #6da4d8; /* pale blue */}

h3,
.h3,
h4,
.h4,
.fw-medium {
    font-weight: 600 !important;
	font-size: 2rem
}

.mb-4 {  
	font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  font-size: 1.5rem;   /* 18px base — adjust as needed */
}

.text-primary{
	color:#00205b !important
}

.sidebar-text {    
	font-family: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;  font-size: 1.125rem;  	/* 16px base — adjust as needed */
}

.name-text {    
	color: #003da5; /* primary color */
	font-size: 1.25rem;
}


/*** About Section with Photo ***/
.tall-img {  
	height: 420px;      /* increase/decrease image height as needed */  
	overflow: hidden;  
	border-radius: 0.5rem;  /* preserves rounded corners */
}

.tall-img img {  
	width: 100%;  
	height: 100%;  
	object-fit: cover;   /* fills height and crops gracefully */  
	display: block;
}


/*** Facts & Quote ***/
.facts,
.quote {
    background: rgba(204, 216, 237, 0.5);
}


/*** Services ***/
.service-item:hover .service-text {
    background: rgba(204, 216, 237, 0.5);
}

.service-item:hover .service-text p {
	color: #FFFFFF;
	font-weight: bold;
}

/*** Projects  ***/

/* The portfolio item frame for the images in section "What Prepares Students" */
.portfolio-inner img.img-fluid {    
	     /* position: relative;  Needed for the absolute overlay to anchor */    
	width: 100% !important;             /* Fills its column */    
	height: 100% !important;             /* Fills its column */    
	object-fit: cover;  
	object-position: center;  
	display: block;
}

.portfolio-inner {  
	position: relative;     /* keep for overlays */  
	width: 100%;  height: 550px;          /* control visual size here */  
	overflow: hidden;  
	border-radius: 10px;
}
.portfolio-inner img {  
	width: 100%;  
	height: 100%;  
	object-fit: cover;       /* fill while preserving proportions */  
	display: block;
}

/* Two-part overlay: split into halves and slide in */
.portfolio-inner::before,
.portfolio-inner::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;                               /* split in half */
  background: rgba(204, 216, 237, 0.5);     /* your tint */
  z-index: 1;                               /* above image, below text */
  opacity: 0;                               /* fade in as they slide */
  transform: translateX(0);                 /* will be overridden per side */
  transition: transform 0.45s ease, opacity 0.45s ease;
  pointer-events: none;
}

/* left half starts off-canvas to the left */
.portfolio-inner::before {
  left: 0;
  transform: translateX(-100%);
}

/* right half starts off-canvas to the right */
.portfolio-inner::after {
  right: 0;
  transform: translateX(100%);
}

/* on hover (or focus), both halves slide in and fade in */
.portfolio-inner:hover::before,
.portfolio-inner:focus-within::before,
.portfolio-inner:hover::after,
.portfolio-inner:focus-within::after {
  transform: translateX(0);
  opacity: 1;
}