*{
    margin: 0;
    padding: 0;
    font-family: 'Saira', sans-serif;
    box-sizing: border-box;
}
body{
    background: linear-gradient(
        to bottom,
        #d2cac5 0%,         /* Red starts at the very top */
        /* #d2cac5 2.5%,        */
        #fff6ec 10%,      /* Blue is reached at 1000px, creating a fade between 500px and 1000px */
        #fff6ec 90%,         /* Blue remains solid from 1000px to the bottom */
        /* #d2cac5 97.5%,  */
        #d2cac5 100%
    );
    background-repeat: no-repeat;
    background-size: auto;
}

.site {
    min-height: 100dvh;
    display: grid;
    margin-inline: auto;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0,1fr);
}

main {
  flex-grow: 1; /* This is the key: main content grows to fill available space */
}

.header {
    margin: 0;
    padding: 0;
    display: grid;
    gap:1.5rem;
    grid-template-columns: 40% 60%;
}

h1{
    font-weight: normal;
    padding-left: 3%;
    /* left: 50%; */
    font-size: 24px;
    /* background-color: #d2cac5; */
}

.profile {
    text-align: center;
}

.profile img{
    /* position: relative; */
    /* top: 50%;
    left: 30%; */
    height: 300px;
    border-radius: 50%
    /* width: 300px; */
}

.icon {
    text-align: center;
}

.icon img{
    height: 30px;
    width: 30px;
}

.hover:hover {
    filter: brightness(0) saturate(100%) invert(72%) sepia(16%) saturate(899%) hue-rotate(145deg) brightness(90%) contrast(84%);
}

h3{
    /* text-align: center; */
    font-size: 24px;
    /* background-color: #d2cac5; */
}

h4{
    display: flex;
    font-weight: normal;
    text-align: left;
    align-items: center;
    width: 75%;
    height: 100%;
    top: 50%;
}

.timeline{
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
}
.container{
    padding: 10px 50px;
    position: relative;
    width: 50%;
    /* background: rgba(0, 0, 0, 0.3); */
    animation: movedown .5s linear forwards;
    opacity: 0;
}
@keyframes movedown {
    0%{
        opacity: 0;
        transform: translateY(-30px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

.container:nth-child(1){
    animation-delay: 0s;
}
.container:nth-child(2){
    animation-delay: .25s;
}
.container:nth-child(3){
    animation-delay: .5s;
}
.container:nth-child(4){
    animation-delay: .75s;
}
.container:nth-child(5){
    animation-delay: 1s;
}
.container:nth-child(6){
    animation-delay: 1.25s;
}
.container:nth-child(7){
    animation-delay: 1.5s;
}
.container:nth-child(8){
    animation-delay: 1.75s;
}
.container:nth-child(9){
    animation-delay: 2s;
}
.container:nth-child(10){
    animation-delay: 2.25s;
}
.container:nth-child(11){
    animation-delay: 2.5s;
}
.container:nth-child(12){
    animation-delay: 2.75s;
}
.container:nth-child(13){
    animation-delay: 3s;
}
.container:nth-child(14){
    animation-delay: 3.25s;
}

.text-box{
    padding: 20px 40px;
    background: #fff;
    position: relative;
    border-radius: 6px;
    font-size: 15px;
}

.left-container{
    left: 0;
}

.right-container{
    left: 50%;
}

.idea img{
    position: relative;
    top: 17%;
    height: 25px;
    width: 25px;
}

.mountain img{
    position: relative;
    top: 12%;
    height: 30px;
    width: 30px;
}

.book img{
    position: relative;
    top: 21%;
    height: 23px;
    width: 23px;
}



.circle{
    position: absolute;
    top: 32px;
    right: -20px;
    display: block;
    width: 40px;
    height: 40px;
    background: #ff8737;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
}
.right-container .circle{
    left: -20.5px;
}




.timeline::after{
    content: '';
    position: absolute;
    width: 6px;
    height: 100%;
    /* background: #ff7e26; */
    background-image: linear-gradient(
        to bottom,
        #ff8737FF 0%, /* Start with full opacity black */
        #ff8737FF 90%,
        #ff873700 100%/* End with full transparency black */
    );
    top: .5%;
    left: 50%;
    margin-left: -3px;
    z-index: -1;
    animation: moveline 3.25s linear forwards;
}
@keyframes moveline{
    0%{
        height: 0;
    }
    1000%{
        height: 100%;
    }
}

.text-box h2{
    font-weight: 600;
}
.text-box small{
    display: inline-block;
    margin-bottom: 15px;

}
.left-container-arrow{
    height: 0;
    width: 0;
    position: absolute;
    top: 28px;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff;
    right: -15px;
}
.right-container-arrow{
    height: 0;
    width: 0;
    position: absolute;
    top: 28px;
    z-index: 1;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
    left: -15px;
}

@media screen and (max-width: 600px){

    .timeline{
        margin: 50px auto;
    }
    .timeline::after{
        left: 31px;
    }
    .container{
        width: 100%;
        padding-left: 80px;
        padding-right: 25px;
    }
    .text-box{
        font-size: 13px;
    }
    .text-box small{
        margin-bottom: 10px;
    }
    .right-container{
        left: 0;
    }
    .left-container img, .right-container img{
        /* left: 10px; */
    }
    .left-container-arrow, .right-container-arrow{
        border-right: 15px solid #fff;
        border-left: 0;
        left: -15px;
    }
}

.arrow-up-rounded {
  position: relative;
  width: 25px; /* Adjust as needed */
  height: 12px; /* Adjust as needed */
  top: 0;
  /* left: 50%; */
  margin: 0 auto;
  background-color: transparent; /* The main element can be transparent */
}

.arrow-up-rounded::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: inherit;
  background-color: #ff8737; /* Color of your triangle */
  clip-path: polygon(
    0% 100%, /* Bottom-left corner */
    50% 0%, /* Top point */
    100% 100% /* Bottom-right corner */
  );
  border-radius: 10px;
}

hr {
    border: none; /* Remove default border */
    height: 2px; /* Set the height (thickness) of the line */
    background-color: #b2f2ec; /* Set the color of the line */
    margin: 20px auto; /* Add some spacing above and below */
    width: 50%;
}

.faded-hr {
      border: none; /* Remove default border */
      height: 2px; /* Set the height of the line */
      background-image: linear-gradient(to right,
                                        rgba(0, 0, 0, 0), /* Transparent at the start */
                                        rgba(0, 0, 0, 0.75), /* Fades in to a solid color */
                                        rgba(0, 0, 0, 0)); /* Transparent at the end */
      width: 60%; /* Adjust width as needed */
      margin: 20px auto; /* Center the line and add vertical spacing */
    }
.lower-hr {
      border: none; /* Remove default border */
      height: 2px; /* Set the height of the line */
      background-image: linear-gradient(to right,
                                        rgba(0, 0, 0, 0), /* Transparent at the start */
                                        rgba(0, 0, 0, 0.75), /* Fades in to a solid color */
                                        rgba(0, 0, 0, 0)); /* Transparent at the end */
      width: 60%; /* Adjust width as needed */
      margin: 20px auto; /* Center the line and add vertical spacing */
      bottom: 75px;
      left: 0;
      right: 0;
      position: fixed;
    }
p{
    font-size: 15px;
    font: Sans Serif;
}

footer{
    text-align: center;
    font-size: 15px;
    color: #a7adba; */
    background-color: #d2cac5;
    /* bottom: 0px;
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    background-color: black;
    color: white;
    text-align: center; */
}

.page_two_footer {
    /* position: fixed;
    bottom: 5px;
    left: 0;
    right: 0; */
    bottom: 0px;
    position: absolute;
    height: 50px;
    left: 0px;
    right: 0px;
    margin-bottom: 0px;
    background-color: black;
    color: white;
    text-align: center;
}

table {
  width: 50%;
  margin: 0 auto;

  border-collapse: collapse; /* Collapses borders for a cleaner look */
}
th, td {
  padding: 12px 15px; /* Adds spacing within cells */
  text-align: center; /* Aligns text to the left */
  border-bottom: 1px solid #ddd; /* Adds a subtle bottom border to cells */
}

a.title:link {
  color: black;
}

a.title:visited {
  color: black;
}

a.title:hover {
  color: black;
}

a.title:active {
  color: black;
}