.homepage {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;  /* Stack children vertically */
  align-items: center;     /* Center horizontally */
  background-attachment: fixed;
  background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%);
  margin: 0;
  min-height: 100vh;
}


html, body {
  margin: 0;
  padding: 0;
  background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%); 
  min-height: 100vh;
}




/* Grid layout */
.grid {
  /*border: 2px solid rgb(61, 61, 61);*/
  width: 1900px; /* smaller overall width */
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: 80px; /* smaller row height */
  row-gap: 10px;
  column-gap: 10px;
background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%); 
padding-left: 150px;

  word-wrap: break-word;
  overflow-wrap: break-word;
}

p {
  overflow-wrap: break-word; /* Or use overflow-wrap: break-word; */
  white-space: normal;
}
 
#leftquote {

  font-size: 30px;
}
 

/* Shared box style */
.box {
  color: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 10px;
  word-wrap: break-word;       /* legacy */
  overflow-wrap: break-word;   /* modern */

 
}

/* Top heading box */
.a {
    grid-column-start: 1;
    grid-column-end: span 6;
    grid-row-start: 1;
    grid-row-end: 3;
    position: relative;
}

.a #heading {
  font-size: 70px;
  color: rgb(236, 236, 236);
  text-align: left;
}

.a #school {
  font-size: 35px;
  color: rgb(185, 183, 183);
  text-align: left;
}

.a #awards {
  color: rgb(173, 171, 171);
  text-align: left;
  font-size: 25px;
}

.a #situation {
  font-size: 70px;
  color: rgb(255, 255, 255);
  text-align: left;
  position: absolute;
  bottom: 30px;

  right: 10px; /* Adjust as needed */
}

/* School info box */
.b {
    grid-column-start: 1;
    grid-column-end: span 2;
    grid-row-start: 3;
    grid-row-end: span 1;
    border-radius: 10px;


}

#subheading {
  font-size: 45px;
  color: rgba(218, 165, 32, 0.973);
  text-align: left;
}



#title {
  font-size: 40px;
  color: rgba(224, 224, 224, 0.973);
  text-align: left;
}


/* My grades */

.i ul, .d ul, .e ul, .L5info ul, .Prizesinfo ul {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: lighter;
  font-family: 'Times New Roman', Times, serif;
  list-style-type: none;
  padding-left: 0; /* optional: removes default indentation */
  text-align: center;
  color: black;
 

}

.c:hover, .f:hover, .g:hover, .L5:hover,.Prizes:hover {
  transform: scale(1.01);
  opacity: 1;
  border-color: rgba(218, 165, 32, 0.973);

}

.c, .f, .g, .L5, .Prizes {

    border-style: solid;
    border-width: 2px;
    border-radius: 20px;
    opacity: 0.9;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.c #title, .f #title, .g #title, .Prizes #title {
  font-size: 40px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding-top: 55px;
}

.L5 #title {
  font-size: 40px;
  color: rgb(255, 255, 255);
  text-align: center;

}

.i, .e, .d, .L5info, .Prizesinfo {

    border-color: #ffffff;
    border-style: solid;
    border-width: 3px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    background-color: #e6e3e3;
    
   
    
}

/* National 5*/

.c {
    grid-column-start: 1;
    grid-column-end: span 1;
    grid-row-start: 4;
    grid-row-end: span 4;
  


}

.d {
    grid-column-start: 1;
    grid-column-end: span 1;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}

/* Higher*/

.f {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 4;
    grid-row-end: span 4;
    color: white;
 
}

.e {
    grid-column-start: 2;
    grid-column-end: span 1;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
      display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}

/* Advanced Higher*/

.g {
    grid-column-start: 3;
    grid-column-end: span 1;
    grid-row-start: 4;
    grid-row-end: span 4;
    color: white;

}

.i {
    grid-column-start: 3;
    grid-column-end: span 1;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}

/* Level 5*/

.L5 {
    grid-column-start: 4;
    grid-column-end: span 1;
    grid-row-start: 4;
    grid-row-end: span 4;
    color: white;

}

.L5info {
    grid-column-start: 4;
    grid-column-end: span 1;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}


/* Level 6*/

.L6 {
    grid-column-start: 5;
    grid-column-end: span 1;
    grid-row-start: 4;
    grid-row-end: span 4;
    color: white;

}

.L6info {
    grid-column-start: 5;
    grid-column-end: span 1;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}

/* Prizes*/

.Prizes {
    grid-column-start: 5;
    grid-column-end: span 2;
    grid-row-start: 4;
    grid-row-end: span 4;
    color: white;
      border-color: rgba(218, 165, 32, 0.973);
      border-width: 4px;

}

.Prizesinfo {
    grid-column-start: 5;
    grid-column-end: span 2;
    grid-row-start: 6;
    grid-row-end: span 2;
    color: white;
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;    /* Centers vertically */
     
}

/* Line */


#line {
  border: none;
  height: 3px; /* Thickness */
  background-color: white; /* Color of the line */
  margin: 20px 0; /* Optional spacing */
  border-radius: 3px; /* Optional: rounded ends */

}



/* Recognition */

.h {
    grid-column-start: 5;
    grid-column-end: span 2;
    grid-row-start: 3;
    grid-row-end: 3;
    border-radius: 10px;

}

.h #subheading {

  text-align: right;
}

.prizegiving {
  grid-column-start: 7;
  grid-column-end: span 2;
  grid-row-start: 1;
  grid-row-end: span 1;
  border-radius: 10px;
  
}

.prizegiving img {
 

  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
  height: 840px;
  opacity: 1;
  object-fit: cover;
  opacity: 0.95;
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.4); /* elegant shadow on left */
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-left: 30px;
}

.prizegiving img:hover {
  transform: scale(1.01);
  opacity: 1;

}


/* Recognition info*/

.recognition1 {
  grid-column-start: 1;
  grid-column-end: span 2;
  grid-row-start: 8;
  grid-row-end: span 2;

  
}

.recognition2 {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 8;
  grid-row-end: span 2;

  
}

.recognition3 {
  grid-column-start: 5;
  grid-column-end: span 2;
  grid-row-start: 8;
  grid-row-end: span 2;

  
}

.recognition1, .recognition2, .recognition3 {

  border-radius: 40px;
  object-position: center;
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;    /* Centers vertically */
  transition: transform 0.3s ease;
  background: radial-gradient(ellipse at 50% 40%, #7a1f3d 60%, #4b1022 100%);

}

.recognition1 ul, .recognition2 ul, .recognition3 ul {
  padding: 0;
  margin: 0;
  font-size: 20px;
  font-weight: lighter;
  font-family: 'Times New Roman', Times, serif;
  list-style-type: none;
  padding-left: 0; 
  text-align: center;

  
}

.recognition1:hover, .recognition2:hover, .recognition3:hover {
  transform: scale(1.01);

  border-color: rgba(218, 165, 32, 0.973);
}


/* Courses boxes*/

.backgroundcolor{
    grid-column-start: 1;
  grid-column-end: span 12;
  grid-row-start: 11;
  grid-row-end: span 13;
    background:
    linear-gradient(to top, rgba(122, 31, 61, 0) 94%, #7a1f3d 100%),
    rgb(31, 30, 30);
   margin-left: -150px;
}

.courses {
  grid-column-start: 3;
  grid-column-end: span 2;
  grid-row-start: 12;
  grid-row-end: span 2;
  border-radius: 40px;
  padding-left: 100px;
}

.maincourse {
  grid-column-start: 2;
  grid-column-end: span 2;
  grid-row-start: 13;
  grid-row-end: span 5;
  background-color: rgba(255, 255, 255, 0.1);

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  background-color: rgba(255, 255, 255, 0.1);
  left: 100px;
}

.maincourseInfo {
  grid-column-start: 4;
  grid-column-end: span 2;
  grid-row-start: 13;
  grid-row-end: span 5;
 

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  left: 100px;
  
}

.course1 {
  grid-column-start: 2;
  grid-column-end: span 1;
  grid-row-start: 18;
  grid-row-end: span 4;
  background-color: rgba(255, 255, 255, 0.1);

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  background-color: rgba(255, 255, 255, 0.1);
  left: 100px;
}

.course2 {
  grid-column-start: 3;
  grid-column-end: span 1;
  grid-row-start: 18;
  grid-row-end: span 4;
  background-color: rgba(255, 255, 255, 0.1);

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  background-color: rgba(255, 255, 255, 0.1);
  left: 100px;
}

.course3 {
  grid-column-start: 4;
  grid-column-end: span 1;
  grid-row-start: 18;
  grid-row-end: span 4;
  background-color: rgba(255, 255, 255, 0.1);

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  background-color: rgba(255, 255, 255, 0.1);
  left: 100px;
}

.course4 {
  grid-column-start: 5;
  grid-column-end: span 1;
  grid-row-start: 18;
  grid-row-end: span 4;
  background-color: rgba(255, 255, 255, 0.1);

  position: relative; /* needed for absolute positioning inside */
  display: flex;
  flex-direction: column;

  padding-bottom: 40px; /* space for bottom-info */
  background-color: rgba(255, 255, 255, 0.1);
  left: 100px;
}

/* Individual Courses Info*/


.course1 ul, .course2 ul, .course3 ul, .course4 ul, .maincourse ul {
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: lighter;
  font-family: 'Times New Roman', Times, serif;
  list-style-type: none;
  padding-left: 0; 
  text-align: center;
  padding-top: 20px;
  justify-content: center;
  
}

.course2 #course, .course3 #course, .course4 #course {
  padding-top: 30px;
  padding-bottom: 10px;
}

.maincourse #coursetitle {
  background-color: rgba(179, 58, 58, 0.623);
  padding: 0;
}

.maincourse ul {
  text-align: left;
  font-family:Georgia, 'Times New Roman', Times, serif;
  padding-left: 5px;;
  
}

.maincourse li {
  padding-bottom: 25px;
  font-size: 15px;
  color: rgb(255, 255, 255);
}

.maincourseInfo p {
  padding-left: 0; 
  text-align: center;
  justify-content: center;
  font-family: Bradley Hand, cursive;
  color: white;
  font-size: 15px;
}


/* All Courses Info*/

.bottom-info {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  color: white;
}

#courseprogress,
#coursetime {
  margin: 0;
 
}



#coursetitle {
  font-size: 20px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding-top: 5px;
  background-color:rgb(180, 220, 255);
 
}



#course {   font-size: 20px;
  color: rgb(255, 255, 255);
  text-align: center;
  padding-top: 20px;
  border-radius: 10px;}

#coursetime {
  font-size: 15px;
  color: rgb(255, 255, 255);
  text-align: right;
  bottom: 0;
  font-weight: bold;

}

#courseprogress {
  font-weight: bold;

}