.herosection {
    background-image: url('../images/contact.jpg');
}

.first-section {
    display: flex;
    align-items: center;
    margin-top: 10%;
}

.first-section-image {
    width: 50%;
    display: flex;
    justify-content: center;
}

.first-section-test {
    width: 50%;
}

.first-section-test h5 {
    margin: 0;
}

.first-section-test h1 {
    margin-bottom: 0;
    margin-top: 20px;
}

.first-section-test p {
    width: 90%;
    margin-bottom: 0;
    line-height: 2.5;
}

.threebox-container {
    display: flex;
}

.threebox h1 {
    text-align: center;
    margin-top: 10%;
}

.second-section {
    display: flex;
    width: 33.33%;
    justify-content: center;
    flex-direction: row;
    gap: 110px;
    margin: 15px;
    perspective: 1000px;
}

.gradient-card-inner {
    background: none;
    background-image: url(../images/contact\ location.jpg);
    background-size: cover;
    background-position: center;
    width: 97%;
    height: 97%;
}

.second {
    background-image: url(../images/contact\ phone\ number.jpg);
}

.third {
    background-image: url(../images/contact\ email.jpg);
}

.boxsection1 {
    width: 80%;
    height: 320px;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.second-section:hover .boxsection1 {
    transform: rotateY(180deg);
}

.gradient-card-inner,
.back {
    position: absolute;
    backface-visibility: hidden;
}

.back {
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 96%;
    height: 97%;
    border-radius: 40px;
    transform: rotateY(180deg);
}

.third-section {
    margin-top: 15%;
}

.form-box {
    background: var(--gradientstrokeforbox);
    box-shadow: var(--shadowforbox);
    border-radius: 46px;
    margin: 5%;
    padding: 5px;
}

.comment-form {
    background-color: var(--colorblack);
    color: var(--colorwhite);
    padding: 70px 20px;
    border-radius: 46px;
}

.comment-form h1 {
    margin-top: 0;
    margin-bottom: 20px;
    padding-left: 100px;
}

.name {
    display: flex;
    margin: 0 70px;
}

.name input {
    width: 95%;
    height: 40px;
    padding: 10px 20px;
    margin: 2%;
    background-color: #4C4C4C;
    border-radius: 40px;
    border: 0;
    font-size: 24px;
    font-family: "Audiowide", sans-serif;
}

.third-text label {
    color: var(--colorwhite);
    font-size: 24px;
}

.third-text {
    display: flex;
    margin: 0 70px;
}

.third-text textarea {
    width: 100%;
    height: 200px;
    background-color: #4C4C4C;
    padding: 20px;
    margin: 20px;
    border-radius: 40px;
    border: 0;
    font-size: 24px;
    font-family: "Audiowide", sans-serif;
}

.button {
    margin-top: 20px;
    margin-left: 100px;
    cursor: pointer;
}

.modal p {
    color: var(--colorblack);
    text-align: center;
}

.fouth-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url(../images/supportpageh-herosection.jpg);
    background-size: cover;
    background-position: center;
    margin-top: 15%;
    min-height: 703px;
    color: var(--colorwhite);
}

.fouth-section h1 {
    margin: 0;
}

.fouth-section p {
    width: 40%;
    text-align: center;
    line-height: 2.5;
}

.second-button {
    display: block;
    margin-top: 40px;
    padding: 5px;
    border-radius: 46px;
    background: linear-gradient(120deg,
            #0024ff,
            #ff0000,
            #ff4b00,
            #0024ff);
}

.second-button a {
    display: block;
    width: 263px;
    padding: 30px 20px;
    border-radius: 46px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 0.15em;
    color: var(--colorwhite);
    box-sizing: border-box;
    background: linear-gradient(to top, #CD0000 0%, #000000 100%);
    text-decoration: none;
}

.second-button:hover a {
    border-color: #ff0000;
    animation: red-glow-breath 1.5s infinite ease-in-out;
}

@media screen and (max-width:1200px) {
    .back h5 {
        font-size: 16px;
    }

}

@media screen and (max-width:1080px) {
    .first-section {
        flex-direction: column;
    }

    .first-section-image {
        order: 2;
        margin-top: 5%;
    }

    .first-section-test {
        order: 1;
        display: flex;
        align-items: center;
        flex-direction: column;
        width: 100%;
    }

    .boxsection1 {
        height: 270px;
    }

    .name input {
        font-size: 15px;
    }

    .fouth-section p {
        width: 50%;
    }

    .second-button a {
        padding: 20px 10px;
        font-size: 13px;
    }
}

@media screen and (max-width:838px) {
    .back h5 {
        font-size: 12px;
    }

}

@media screen and (max-width:720px) {
    .boxsection1 {
        height: 200px;
        border-radius: 20px;
    }

    .gradient-card-inner {
        width: 94%;
        height: 96%;
        border-radius: 20px;
    }

    .back {
        width: 95%;
        height: 96%;
        border-radius: 20px;
    }

    .comment-form h1 {
        padding-left: 55px;
    }

    .name input {
        padding: 5px 15px;
    }

    .third-text textarea {
        height: 150px;
        margin: 10px;
        font-size: 15px;
        border-radius: 30px;
        padding: 15px;
    }

    .name {
        margin: 0 40px;
    }

    .second-button a {
        padding: 20px 10px;
        width: 180px;
        font-size: 10px;
    }

    .third-text {
        margin: 0 40px;
    }

    .fouth-section {
        min-height: 500px;
    }

    .comment-form {
        padding: 70px 10px;
    }

    .button {
        margin-left: 50px;
    }

    .second-button {
        margin-top: 20px;
    }

}

@media screen and (max-width:660px) {
    .boxsection1 {
        height: 150px;
    }

    .comment-form h1 {
        padding-left: 35px;
    }

    .name {
        margin: 0 20px;
    }

    .third-text {
        margin: 0 20px;
    }

    .button {
        margin-left: 30px;
    }

}

@media screen and (max-width:640px) {
    .back h5 {
        font-size: 8px;
    }

    .back {
        width: 93%;
        height: 94%;
    }

}


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

    .name input {
        font-size: 10px;
    }

    .third-text textarea {
        font-size: 10px;
    }
}

@media screen and (max-width:500px) {
    .boxsection1 {
        height: 130px;
    }

    .gradient-card-inner {
        width: 92%;
        height: 93%;
    }

    .fouth-section p {
        width: 80%;
    }
}

@media screen and (max-width:425px) {
    .boxsection1 {
        border-radius: 20px;
        height: 280px;
    }

    .gradient-card-inner {
        width: 90%;
        height: 93%;
        border-radius: 15px;
    }

    .back {
        width: 96%;
        height: 96%;
    }

    .comment-form h1 {
        font-size: 20px;
        padding-left: 10px;
    }

    .back h5 {
        font-size: 16px;
    }

    .name {
        margin: 0;
    }

    .third-text {
        margin: 0;
    }

    .name input {
        padding: 3px 18px;
    }

    .third-text textarea {
        height: 100px;
        margin: 10px;
    }

    .comment-form {
        padding: 40px 10px;
    }

    .button {
        margin-left: 10px;
    }

    .second-button {
        margin-top: 20px;
    }

    .fouth-section {
        min-height: 300px;
    }

    .threebox-container {
        flex-direction: column;
    }

    .second-section {
        width: 93%;
    }

    .gradient-card-inner {
        width: 96%;
        height: 96%;
    }
}