.container {
    max-width: 1400px !important;
    padding: 0 40px;
}

.hero-content {
    /* flex: 0 0 40%; */
}
.hero .container{
    gap: 3rem;
}

.hero-image {
    flex: 0 0 55%;
    display: flex;
    justify-content: flex-end; /* Keeps the image aligned properly */
}
h1{
    font-size: 2.8rem;;
}

.screenshot {
    max-width: 100%; /* Allows image to fill its 60% parent container */
}
.pricing-plan {
    max-width: 400px;
}