@media (max-width: 299px) {
    .landing-container {
        width: 100%;
    }
    .background-picture {
        background-size: 600px 1450px;
        padding: unset;
        width: 100%;
    }
    #overlay {
        z-index: 99;

    }
    .overlay {
        height: 100%;
        background-color: rgba(10, 20, 45, 0.75);
    }
    .hero-section {
        height: 100%;
        width: 100%;
        margin: 0;
    }
    .navbar-menu {
        display: none !important;
    }
    .logo-container {
        height: 3rem;
        width: 10rem;
        margin-top: 2rem;
    }
    .hero-section {
        height: 120vh;
        margin-top: 1rem;
    }

    .hero-container h1 {
        font-size: 1.5rem;
    }
    #headline {
        margin: 0;
        padding: 0 0 0 5px;
    }
    div.section1 {
        border: 1px solid rgba(21, 48, 255, 0.335);
        border-radius: 15px;
        background-color: rgba(20, 34, 138, 0.7);
        padding: 5px 10px 5px 10px;
    }
    .subtitle {
        width: 100%;
    }
    .button-group {
        width: 90%;
        height: fit-content;
        padding: 0;
        margin: 0 auto;
    }
    .button-group button:nth-child(1) {
        margin: unset;
        width: 90%;
        padding: 10px 20px 10px 20px;
    }
    .button-group button:nth-child(2) {
        padding: 10px 20px 10px 20px;
    }
    .stats {
        margin: unset;
    }
    .stat {
        width: 45%;
        margin: unset;
    }
    .stat h5 {
        font-size: 1.15rem;
    }
    .stat p {
        font-size: 1rem;
    }
    .cards {
        flex-direction: column;
    }
    .why-header h3 {
        font-size: 1.5rem;
    }
    .why-header p {
        width: 90%;
        margin: 0 auto;
    }
    .why-cards {
        width: 90%;
    }
    .icon-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .step-cards-container {
        flex-direction: column;
        margin: 1rem auto 1rem auto;
    }
    .how-it-works-header h5 {

        font-size: 2rem;
    }
    .step-card {
        width: 90%;
        height: 50vh;
        margin: 0 auto;
        padding: 0;
    }
    span.step-bar {
        display: none;
    }
    .side-by-side-card {
        height: fit-content;
        flex-direction: column;
        width: 90%;
        margin: 2rem auto;
        font-weight: 300;
    }
    .left-card {
        width: 100%;
        height: 43%;
        border-radius: 15px 15px 0 0;
        padding: 20px 40px 10px 0;
        margin: 0 auto;
        padding: 0;
    }
    .left-card h5 {
        font-size: 1.2rem;
        font-weight: 200;
    }
    .left-card p {
        color: rgba(217, 217, 217, 0.9);
        font-weight: 100;
    }
    .left-card ul {
        padding: 0;
    }
    .right-card {
        overflow: unset;
        width: 100%;
        height: 30%;
    }
    .right-card img {
        border-radius: 0 0 15px 15px;
    }
    .benefits-header {
        margin: 1rem auto 2rem auto;
    }
    .benefits-header h1 {
        font-size: 1.5rem;
    }
    .benefit-cards {
        flex-direction: column;
    }
    .benefit-card {
        width: 90%;
    }
    .pricing-container {
        height: fit-content;
        padding-bottom: 10px;
        margin: 2rem auto;
    }
    .pricing-header {
        margin: 0 auto;
        height: fit-content;
        padding: 1rem 0;
    }
    .pricing-header h1 {
        font-size: 1.5rem;
    }
    .pricing-cards {
        flex-direction: column;

    }
    .pricing-card {
        width: 100%;
    }
    .pricing-guarantee {
        width: 75%;
        font-size: 14px;
    }
    #enterprise {
        max-height: unset;
    }
    .email-cta h3 {
        font-size: 1.5rem;
        width: fit-content;
    }
    .email-section {
        height: 80vh;
    }
    .email-container {
        flex-direction: column;
        margin: 1rem auto;
    }
    .email-checks {
        display: flex;
        justify-content: center;
        gap: 10px 20px;
        font-size: 14px;
    }
    .email-container input {
        width: 95%;
        margin-top: 1rem;
    }
    .email-submit-btn {
        width: 80%;
        padding: 5px 10px 5px 10px;
        margin: 1rem auto;
    }
    .permission-text {
        font-size: 8px;
        margin: -40px auto 1rem auto;
        width: 50%;
    }
    .footer {
        flex-direction: column;
        text-align: start;
    }
    .footer-logo {
        margin: 0 0 1rem 0;
        padding: 0 0 0 0;
    }
    .footer-links {
        margin: 1rem 0;
        padding: 0 0 0 0;
        display: unset;
        text-align: start;
    }
    .footer-links ul {
        margin: 0;
        text-align: start;
    }
    .footer-contact {
        margin: 1rem 0;
        padding: 0 0 0 0;
        display: unset;
    }
    .footer-contact h5 {
        margin: 0;
    }
    .footer-contact ul {
        margin: 0;
    }
}