body {
  margin: 0;
  padding: 1rem;
}

.pagehead{
  display: block;
  text-align: center;
  border: 1px solid #87ceeb;;
  background-color: #87ceeb;
  padding: 0.2rem 0.2rem 0.2rem 0.2rem;
  float:center;
  margin: 0.5rem;
  font-size: 32px;
}



.case1{
  background-color: lightyellow;
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin: 0.5rem;
  display: flex;
  align-items: center; /* Vertically align text */
  gap: 5rem; /* Optional spacing between h1 and p */
}

.case2{
  background-color: lightyellow;
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin: 0.5rem;
}

.case3{
  background-color: lightyellow;
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin: 0.5rem;
}

.case4{
  background-color: lightyellow;
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin: 0.5rem;
}

.case5{
  background-color: lightyellow;
  padding: 0.5rem 2rem 0.5rem 2rem;
  margin: 0.5rem;
}

.case2 {
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr; /* 3 columns now */
  gap: 1rem;
}


.c2column {
  /*padding: 1rem;*/
  border-radius: 8px;
  background-color: lightyellow;
}

@media (max-width: 1024px) {
  .case2 {
    grid-template-columns: 1fr;
  }
}
.c2column img{
  height: 26vh;
  width: auto;
}
.case3 {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr 1fr;
  gap: 1rem;
}

.c3column {
  border-radius: 8px;
  background-color: lightyellow;
}

@media (max-width: 1024px) {
  .case3 {
    grid-template-columns: 1fr;
  }
}
.c3column img{
  height: 26vh;
  width: auto;
}

.case4 {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 1.2fr 0.8fr;
  gap: 1rem;
}

.c4column {
  border-radius: 8px;
  background-color: lightyellow;
}

#c4li, #c4ld{
  padding-top: 2.2rem;
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start; /* Align boxes to top */
  flex-wrap: wrap; /* Optional: allow wrapping on smaller screens */
}

.box1{
  padding: 10px;
  width: 15%; /* Adjust as needed */
  box-sizing: border-box;
}
.box2 {
 
  padding: 10px;
  width: 45%; /* Adjust as needed */
  box-sizing: border-box;
}
.box3{

  padding: 10px;
  width: 30%; /* Adjust as needed */
  box-sizing: border-box;

}
.subbtn {
  margin-top: 10px;
}


@media (max-width: 1024px) {
  .case4 {
    grid-template-columns: 1fr;
  }
}

.c4column img{
  height: 26vh;
  width: auto;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.column {
  padding: 1rem;
  border-radius: 8px;
  background-color: rgb(232,246,243);
}

@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr;
  }
}


