*{box-sizing:border-box;}

h1{
    font-size:70px;
    margin:0px;
    font-weight:100;
}

h2 {
    font-size:30px;
    font-weight:200;
    
    margin:15px;
}

h3 {
    font-weight:800;
    font-size:25px;
    margin:5px;
    margin-top:20px;
}

p {
    font-size:18px;
    font-weight:250;
    margin-top:5px;
    margin-bottom:30px;
}

li{
    list-style: none;
}

main{
    text-align:center;
}
.container {
    display: flex;
    width: 100%;  
    overflow: hidden; 
    text-align:center;
    justify-content:center;
}

.column{
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin:20px;
    padding:20px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius:10px;
    max-width:800px;

}

#headsec{
    margin-top:55px;
    height:300px;
}

.leftcol {
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-left:65px;
    
}
.leftcol p {
    max-width:400px;
}

.rightcol {
    flex: 2; 
    display: flex;
    flex-direction: column;
    justify-content:center;
    position: relative;
    height:500px;
    
}

.rightcol img {
    width:100%;
    height:100%;
    object-fit: cover;
    object-position:center 80%;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, white, transparent);
    pointer-events: none; 
}

.video-container {
    aspect-ratio: 16 / 9;
    max-height:400px;
    width:auto;
    max-width:100%;
    background-color: black; /* Adds black margins */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius:5px;
    margin:20px;
  }
  
  .video-container video {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Ensures the full video is visible without cropping */
  }
  
  @media only screen and (max-width: 1024px) {
    .container{
        flex-direction:column;
    }

    .leftcol{
        padding:20px;
        margin:10px;  
      }

      .gradient-overlay{
        background: linear-gradient(to bottom, white, transparent);
        width:100%;
        height:50%;
    }

    .rightcol{
        height:90%;
      }

      #headsec{
        height:auto;
      }

  }