/* =========================
   GLYCEMIC INDEX SECTION
========================= */


.title_box_concept {
  background-color: #f6eaec;
  padding: 25px 30px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border-radius: 10px;
	
  position: relative;
  top: -60px;   /* THIS creates the overlap */	
  transform: translateX(-300px);
  opacity: 0;
	
  transition: 
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.2s ease;	
  transition-delay: 0.2s;	
	
  z-index: 2;    /* ensures it sits above image */	
}

/* when visible */
.title_box_concept.visible {
  transform: translateX(-200px);  /* final overlap position */
  opacity: 1;
}	

/* TITLE */
.title_concept {
  font-size: 22px;
  
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: #bd4ad5;
}

.gi_row {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 60px auto;
  display: flex;
  gap: 40px;
  align-items: center;
  border: 0px solid red;
}

.gi_col {
  flex: 1;
}

.gi_col.image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.12),
    0 0 0 6px rgba(255,255,255,0.6);
}

.gi_col.text {
  font-size: 15px;
  line-height: 1.8;
  color: #2b2d36;
}

/* spacing between paragraphs */
.gi_col.text p {
  margin-bottom: 20px;
}




.resume_box {
  border: 0px solid #d77bdc; /* pink border */
  background-color: #bd4ad5; /* very light pink/grey */
  padding: 25px 30px;
  max-width: 800px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  border-radius: 10px;
}

/* Title */
.resume_title {
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 15px;
  color: white;
}

/* Paragraph */
.resume_box p {
  margin-bottom: 15px;
  line-height: 1.6;
  font-size: 16px;	
  color: white;
}

/* List */
.resume_list {
  list-style: none;
  padding-left: 0;
  font-size: 14px;		
}

/* Custom arrow bullets */
.resume_list li {
  display: flex;              /* aligns arrow + text nicely */
  align-items: flex-start;
  gap: 10px;                  /* space between arrow and text */
  margin-bottom: 12px;
  line-height: 1.6;
  text-align: left;           /* 🔥 forces left alignment */
}

.resume_list li strong {
  font-weight: 600;
}

/* Arrow icon */
.resume_list li::before {
  content: "➔";
  flex-shrink: 0;             /* prevents shifting */
  color: #000;
  font-weight: bold;
  margin-top: 2px;            /* aligns visually with text */
}

.container_grey {
  min-height: 0vh;
	
}