/* Reset & Global */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  body {
    font-family: 'Baloo 2', cursive, sans-serif;
    margin: 20px;
    background-color: #fffafc; 
    color: #333;
  }
  
  h1 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    font-weight: 700;
  }
  
  /* Section Styles */
  section {
    border: 3px solid black; 
    padding: 60px 20px 20px; 
    position: relative;
    margin: 10px;
    border-radius: 12px; 
    line-height: 1.5;
  }
  
  .col-1 {
    background-color: #ffe4ec; 
  }
  
  .col-2 {
    background-color: #ffe5e0;
  }
  
  .col-3 {
    background-color: #fffdd0;
  }
  
  .section-title {
    border: 2px solid black;
    padding: 8px 15px;
    position: absolute;
    top: 0;
    right: 0;
    font-weight: 600;
    font-size: 1.3em;
    border-radius: 0 0 0 10px; 
  }
  

  .col-1 .section-title {
    background-color: #ffb6c1; 
  }
  
  .col-2 .section-title {
    background-color: #ff6961; 
    color: #fff;
  }
  
  .col-3 .section-title {
    background-color: #fdfd96; 
    color: #000;
  }
  

  .row {
    width: 100%;
    overflow: hidden;
  }
  
  .col {
    float: left;
  }
  
  @media (min-width: 992px) {
    .col {
      width: 31%;
    }
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .col-1, .col-2 {
      width: 47%;
    }
    .col-3 {
      width: 96%;
    }
  }

  @media (max-width: 767px) {
    .col {
      width: 96%;
    }
  }