@media screen  and (max-width: 930px) {
   .content-wrapper {
      padding-left: 0 !important;
      justify-content: center !important;
      margin-bottom: 6rem;
   }
   .background-image-container {
      display: none !important;
   }
   .bell-h {
      margin-left: 0 !important;
      text-align: center !important;
   }
   .steps-container {
      flex-direction: column !important;
   }
   .phases-box {
      display: none !important;
   }
   .target-group-box {
      width: 85% !important;
   }
   .t-group-h {
      text-align: center !important;
   }
}

.container-flex-column {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   min-width: 1440px;
}

.content-container {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
}

.content-wrapper {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
   gap: 8px;
   align-items: flex-start;
   justify-content: space-between;
   padding-left: 42%;
}

.majestic-heading {
   flex: 0 0 auto;
   padding: 0;
   padding-top: 38px;
   margin: 0;
   font: 700 48px "Playfair Display", serif;
   color: #205A98;
}

.background-image-container {
   box-sizing: border-box;
   display: block;
   width: 272px;
   max-width: initial;
   height: 181px;
}

.content-container1 {
  display: flex;
  margin-top: -35px;
  margin-bottom: 5rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.literacy-program-description {
   box-sizing: border-box;
   max-width: 1165px;
   padding: 0;
   margin: 0;
   font: 400 23px "Maven Pro", sans-serif;
   color: #121212;
   text-align: left;
   width: 80%;
}

.program-phases-container2 {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
   margin-top: 93px;
}

.program-phases-container1 {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

.program-phases-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
}

.program-phase-title {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   font: 700 48px "Playfair Display", serif;
   color: #205A98;
   z-index: 10;
}

.phase-journey-container {
   box-sizing: border-box;
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
   align-items: stretch;
   justify-content: flex-start;
   max-width: initial;
   height: 445px;
   padding: 118px 170px 192px;
   margin-top: -51px;
   background: url("../assets/color-blocks.png")
   50% / cover no-repeat;
}

.phase-container {
   display: none;
   box-sizing: border-box;
   flex: 0 0 auto;
   width: 224px;
}

.educational-program-flow-container {
   display: none;
}

.phase-heading-bold {
   padding: 0;
   margin: 0;
   font: 700 21px Hind, sans-serif;
   color: white;
}

.workshop-title-styles {
   box-sizing: border-box;
   max-width: 107px;
   padding: 0;
   margin: 0;
   margin-top: 31.5px;
   font: 700 14px Hind, sans-serif;
   color: white;
   text-align: left;
}

.workshop-card {
   box-sizing: border-box;
   flex: 0 0 auto;
   width: 242px;
   padding-right: 15px;
   padding-bottom: 22px;
   padding-left: 15px;
}

.mentorship-box {
   box-sizing: border-box;
   flex: 0 0 auto;
   width: 241px;
   padding-right: 15px;
   padding-bottom: 5.5px;
   padding-left: 15px;
}

.instructional-mentorship-development-style {
   box-sizing: border-box;
   max-width: 152px;
   padding: 0;
   margin: 0;
   margin-top: 31.5px;
   font: 700 13px Hind, sans-serif;
   color: white;
   text-align: left;
}

.phase-box {
   box-sizing: border-box;
   flex: 0 0 auto;
   width: 122px;
   padding-right: 15px;
   padding-bottom: 22px;
   padding-left: 15px;
}

.summer-learning-session-pods-style {
   box-sizing: border-box;
   width: 100%;
   padding: 0;
   margin: 0;
   margin-top: 31.5px;
   font: 700 14px Hind, sans-serif;
   color: white;
   text-align: left;
}

.phase-description-container {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   padding-right: 2.5px;
   padding-left: 2.5px;
   margin-top: -56px;
}

.panel-interview-card-content {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding-bottom: 4.75px;
}

.majestic-heading2 {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   font: 700 137px "Playfair Display", serif;
   color: #0156d3;
}

.majestic-heading3 {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   margin-top: -34px;
   font: 700 78px "Playfair Display", serif;
   color: #0156d3;
}

.panel-interview-section {
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
   flex-direction: column;
   align-items: stretch;
   align-self: flex-end;
   justify-content: flex-end;
   max-width: 689px;
   padding-top: 115px;
   margin-left: 19px;
}

.heading-primary {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   font: 700 25px Hind, sans-serif;
   color: #121212;
}

.interview-text {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   margin-top: 44px;
   font: 400 20.5px "Maven Pro", sans-serif;
   color: #121212;
   text-align: left;
}

.program-details-container {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
   align-items: flex-start;
   justify-content: flex-start;
   margin-top: 0.6000000000000001px;
}

.summer-learning-section-container {
   display: flex;
   flex: 1 0 auto;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
}

.summer-learning-session-description {
   box-sizing: border-box;
   display: block;
   flex: 0 0 auto;
   align-self: center;
   width: 1056px;
   max-width: initial;
   height: 2066px;
   margin-left: 43px;
}

.learning-session-details {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
   gap: 8px;
   align-items: flex-start;
   justify-content: space-between;
   margin-top: 17.5px;
}

.summer-learning-image {
   box-sizing: border-box;
   display: block;
   width: 154px;
   max-width: initial;
   height: 552px;
}

.summer-learning-session-container {
   box-sizing: border-box;
   flex: 0 0 auto;
   max-width: 1063px;
   padding-bottom: 94px;
}

.summer-learning-session-title {
   padding: 0;
   padding-right: 48px;
   padding-left: 539px;
   margin: 0;
   font: 700 25px Hind, sans-serif;
   color: #121212;
}

.content-wrapper1 {
   padding-right: 137px;
   padding-left: 137px;
   margin-top: 46px;
}

.island-summer-session-description {
   box-sizing: border-box;
   max-width: 691px;
   padding: 0;
   margin: 0;
   font: 400 20.5px "Maven Pro", sans-serif;
   color: #121212;
   text-align: left;
}

.target-group-info {
   box-sizing: border-box;
   width: 100%;
   margin-top: 176px;
}

.target-group-heading {
   padding: 0;
   margin: 0;
   font: 700 48px "Playfair Display", serif;
   color: #0156d3;
}

.target-group-description {
   box-sizing: border-box;
   width: 100%;
   padding: 0;
   margin: 0;
   margin-top: 42px;
   font: 400 16px "Maven Pro", sans-serif;
   color: #121212;
   text-align: left;
}

.vertical-phase-container {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: stretch;
   align-self: center;
   justify-content: center;
   margin-left: -217px;
}

.majestic-heading5 {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   font: 700 125px "Playfair Display", serif;
   color: #0156d3;
}

.majestic-heading1 {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   margin-top: -31.5px;
   font: 700 71px "Playfair Display", serif;
   color: #0156d3;
}

.vertical-centered-text-container {
   display: flex;
   flex: 0 0 auto;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   margin-top: 1561px;
}

.phase-title-heading {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   margin-left: 4.75px;
   font: 700 140px "Playfair Display", serif;
   color: #0156d3;
}

.majestic-heading4 {
   flex: 0 0 auto;
   padding: 0;
   margin: 0;
   margin-top: -35px;
   font: 700 80px "Playfair Display", serif;
   color: #0156d3;
}

.phases-box {
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
} 

.first-phase {
   display: flex;
   height: 130px;
   width: 100%;
   justify-content: center;
}

.second-phase {
   display: flex;
   justify-content: center;
   flex-direction: row-reverse;
   height: 150px;
   align-items: baseline;
   width: 100%;
}

.phase-number {
   color: var(--Primary-Color, #205A98);
   text-align: center;
   font-family: "Playfair Display";
   font-size: 72.32px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

.phase-p {
  color: #0156D3;
  text-align: center;
  font-family: "Playfair Display";
  font-size: 77.763px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.phase-para {
   color: #121212;
   font-family: "Maven Pro";
   font-size: 22.419px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
}

.phase-big-p {
   color: #121212;
font-family: Hind;
font-size: 25px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-bottom: 2.5rem !important;
}
.phases {
   padding-right: 5%;
}

.phases2 { 
   padding-left: 5%;
}
.p-box-0 {
   width: 40%;
   margin-right: 15rem;
}
.p-box {
   width: 40%;
   position: relative;
   top: -165%;
   margin-left: 15rem;
}
.p-box-2 {
   width: 40%;
   position: relative;
   top: -375%;
   margin-right: 15rem;
}
.p-box-4 {
   width: 40%;
   margin-left: 15rem;
   position: relative;
   top: -40%;
}
.phases3 {
   padding-right: 5%;
}
.black-p {
   font-weight: 800;
   color: black;
   font-size: 1.4rem;
}
.fourth-phase {
   display: flex;
   justify-content: center;
   flex-direction: row-reverse;
   align-items: baseline;
   width: 100%;
   height: 240px;
}
.target-group-box1 {
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: column;
   align-items: center;
   margin-bottom: 4rem;
}
.target-group-box {
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
   /* align-items: center; */
   width: 60%;
   }

.t-group-h {
   color: var(--Primary-Color, #205A98);
   text-align: start;
   font-family: "Playfair Display";
   font-size: 45px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}





.program-steps-wrapper {
   text-align: center;
   margin-bottom: 20px;
 }
 
 .program-steps-title {
   color: var(--Primary-Color, #205A98);
   text-align: center;
   
   /* Heading 01 */
   font-family: Hind;
   font-size: 48px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
 }
 
 .steps-container {
   display: flex;
   justify-content: space-around;
   gap: 20px;
   width: 80%;
   margin-bottom: 5rem;
 }
 
 .step-box {
   background-color: #335f90; /* Dark blue */
   color: white;
   padding: 20px;
   border-radius: 8px;
   flex: 1;
   text-align: center;
 }
 
 .step-box:nth-child(2) {
   background-color: #507db3; /* Lighter blue */
 }
 
 .step-box:nth-child(3) {
   background-color: #6993c6; /* Even lighter blue */
 }
 
 .step-box:nth-child(4) {
   background-color: #91afd9; /* Lightest blue */
 }
 
 .step-title {
   color: var(--Text-White, #FFF);
font-family: Hind;
font-size: 43.668px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }
 
 .step-description {
   color: var(--Text-White, #FFF);
font-family: Hind;
font-size: 21.834px;
font-style: normal;
font-weight: 700;
line-height: normal;
 }
 
 .bell-h {
   color: var(--Primary-Color, #205A98);

/* Heading 2 */
   /* font-family: Hind; */
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
   text-align: left;
   margin-left: -31rem;
 }








 .desktop-program-flow {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  margin-top: 60px;
  margin-bottom: 5rem;
}

.desktop-phase-container {
  width: 85%;
  padding: 0 32px;
  box-sizing: border-box;
}

.desktop-phase-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

.desktop-phase-title {
  font: 700 55px Verdana;
  color: #205a98;
  margin: 0;
  min-width: 120px;
}

.desktop-phase-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.desktop-subheading {
  font: 700 30px Verdana;
  color: #121212;
  margin: 0;
}

.desktop-paragraph {
  font: 400 25px "Open Sans", sans-serif;
  color: #121212;
  margin: 12px 0 0;
  text-align: left;
}

.desktop-bold-paragraph {
  font: 700 25px "Open Sans", sans-serif;
  color: #121212;
}

.desktop-italic-text {
  font: 700 25px "Maven Pro", sans-serif;
  color: #121212;
}

.desktop-phase-text {
  font: 400 25px "Maven Pro", sans-serif;
  color: #121212;
  margin-top: 16px;
  text-align: left;
}

.desktop-bullet-list {
  padding-left: 1.25em;
  margin-top: 8px;
  list-style: disc;
}

.desktop-divider {
  border-top: 10px solid #205a98;
  margin-top: 32px;
  border-radius: 10px;
}

.desktop-phase-row-start {
   display: flex;
    align-items: center;
    gap: 24px;
}


@media screen and (max-width: 930px) {
   .desktop-program-flow {
      display: flex;
      flex: 0 0 auto;
      flex-direction: column;
      gap: 16.5px;
      align-items: center;
      justify-content: flex-start;
      margin-top: 44px;
   }

   .desktop-phase-container {
      box-sizing: border-box;
      flex: 0 0 auto;
      width: 100%;
      padding-right: 39px;
      padding-left: 39px;
   }

   .desktop-phase-row, .desktop-phase-row-start {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
   }

   .desktop-phase-title {
      flex: 0 0 auto;
      padding: 0;
      margin: 0;
      font: 700 22.5px Verdana;
      color: #205a98;
   }

   .desktop-phase-content {
      flex: 0 1 auto;
      margin-left: 17px;
   }

   .desktop-subheading {
      padding: 0;
      margin: 0;
      font: 700 11px Verdana;
      color: #121212;
   }

   .desktop-paragraph {
      box-sizing: border-box;
      width: 100%;
      padding: 0;
      margin: 0;
      margin-top: 16px;
      font: 400 11px "Open Sans", sans-serif;
      color: #121212;
      text-align: left;
   }

   .desktop-divider {
      box-sizing: border-box;
      width: 100%;
      margin-top: 23.5px;
      border-top: 3.25px solid #205a98;
   }

   .desktop-bold-paragraph {
      font: 700 11px "Open Sans", sans-serif;
      text-align: left;
   }

   .desktop-bullet-list {
      padding-left: 1.5em;
      margin: 0;
      list-style: disc;
   }

   .desktop-bullet-list li {
      font: 400 11px "Open Sans", sans-serif;
      text-align: left;
   }
}