section {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 2rem;
}


section div {
    box-shadow: rgba(0, 0, 0, 0.4) 0.5rem 0.5rem 0.3rem;
    background-color: rgb(44, 44, 44);
    border-radius: 2rem;
    width: 80%;
}

h1 {
    text-align: center;
    font-size: 3rem;
}

section p {
    width: 85%;
    padding: 5% 7.5% 0 7.5%;
}


@media (max-width: 1279px) {

    section div {
        box-shadow: rgba(0, 0, 0, 0.4) 0.5rem 0.5rem 0.3rem;
        background-color: rgb(44, 44, 44);
        border-radius: 2rem;
        width: 94%;
    }
    
    h1 {
        text-align: center;
        font-size: 2.5rem;
        margin-top: 3rem;
    }
    
    section p {
        font-size: 1.5rem;
        width: 85%;
        padding: 5% 7.5% 0 7.5%;
    }
    
}













































/*
main {
    margin-top: 2rem;
}

body section {
    display: flex;
    justify-content: center;
  }
  
  /* Timeline Container */
  /*.timeline {
    background: transparent;
    margin: 1.5rem auto;
    padding: 1.5rem;
  }
  
  /* Card container */
  /*.card {
    position: relative;
    width: 50vw;

  }
  
  /* setting padding based on even or odd */
  /*.card:nth-child(odd) {
    padding: 1.8rem 0 1.8rem 1.8rem;
  }
  .card:nth-child(even) {
    padding: 1.8rem 1.8rem 1.8rem 0;
  }
  /* Global ::before */
  /*.card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid var(--red);
  }
  
  /* Setting the border of top, bottom, left */
  /*.card:nth-child(odd)::before {
    left: 0px;
    top: -0.3rem;
    bottom: -0.3rem;
    border-width: 0.4rem 0 0.4rem 0.4rem;
    border-radius: 2rem 0 0 2rem;
  }
  
  /* Setting the border of top, bottom, right */
 /* .card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 0.4rem 0.4rem 0.4rem 0;
    border-radius: 0 2rem 2rem 0;
  }
  
  /* Removing the border if it is the first card */
 /* .card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's odd */
 /* .card:last-child:nth-child(odd)::before {
 /*   border-bottom: 0;
    border-bottom-left-radius: 0;
  }
  
  /* Removing the border if it is the last card  and it's even */
 /* .card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
 /* }
  
  /* Information about the timeline */
 /* .info {
    display: flex;
    flex-direction: column;
    background: #333;
    color: gray;
    border-radius: 1rem;
    padding: 1rem;
  }
  
  /* Title of the card */
  /*.title {
    color: var(--red);
    position: relative;
    font-size: 1.5rem;
  }
  
  /* Timeline dot  */
 /* .title::before {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: var(--white);
    border-radius: 100%;
    border: 0.3rem solid var(--red);
  }
  
  /* text right if the card is even  */
 /* .card:nth-child(even) > .info > .title {
    text-align: right;
  }
  
  /* setting dot to the left if the card is odd */
 /* .card:nth-child(odd) > .info > .title::before {
    left: -3.4rem;
  }
  
  /* setting dot to the right if the card is odd */
  /*.card:nth-child(even) > .info > .title::before {
    right: -3.4rem;
  }

.card:nth-child(even) > .info > .text-and-img {
    flex-direction: row-reverse;
}

.card:nth-child(even) > .info > .text-and-img p {
    padding-left: 2rem;
}



.text-and-img {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}



.tl-image {
    width: 30%;
    height: auto;
}


@media (max-width: 1279px) {
    .text-and-img {
        display: flex;
        flex-direction: column;
    }

    .text-and-img p {
        width: 100%;
    }

    .tl-image {
        width: 90%;
        height: auto;
    }

    .card {
        width: 80vw;
      }

    
}*/