@media only screen and (max-width: 1530px) {
    .homepageTitleWrap {
        max-width: 1200px;
        height: 92%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 1250px) {
    .homepageTitleWrap {
        max-width: 1000px;
        height: 92%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 768px) {
    .navigatorCard {
        flex: 1 1 calc(50% - 20px)
    }
}

@media only screen and (max-width: 480px) {
    .navigatorCard {
        flex: 1 1 calc(50% - 20px)
    }
}

@media only screen and (max-width: 768px) {
    .navigatorCard {
        flex: 1 1 calc(50% - 20px)
    }
}

@media only screen and (max-width: 480px) {
    .selectorCard {
        flex: 1 1 calc(50% - 20px)
    }
}

@media only screen and (max-width: 1050px) {
    .homepageTitleWrap {
        max-width: 800px;
        height: 92%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 850px) {
    .homepageTitleWrap {
        max-width: 600px;
        height: 92%;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 630px) {
    .homepageTitleWrap {
        max-width: 400px;
        height: 92%;
        margin: 0 auto;
        gap: 5px
    }

    .homepageCardButtons a {
        width: max-content;
    }
}

@media only screen and (max-width: 450px) {
    .firstHeader #burgerMenuIcon {
        display: block;
    }

    .secondHeader .headerLinks a {
        display: none;
    }
}

@media (max-width: 630px) {
    .homepageCardButtons {
        display: flex;
        flex-direction: column;
        gap: 10px;
        /* Add some spacing between the buttons if needed */
    }

    .siteBtn {
        width: 100%;
        /* Make the buttons take full width */
        padding: 14px 0;
        /* Adjust padding so text remains centered */
        min-width: unset;
        /* Remove the min-width property */
    }

    .homepageCardButtons .siteBtn {
        max-width: none;
    }
}