.contact {
    display: flex;
    flex-direction: column;
    gap: 70px;
}

.contact-title {
    color: white;
    display: flex;
    font-size: 80px; /* Large title for desktop */
    font-family: roboto;
    font-weight: 700;
    padding: 0 0 0 200px; /* Left padding */
}

.contact-bottom {
    display: flex;
    gap: 50px;
    flex-direction: column;
    align-items: center;
}

.contact-info {
    color: white;
    display: flex;
    width: 1211px; /* Set a max-width for larger screens */
    justify-content: space-between;
}

.contact-info-social {
    color: white;
    display: flex;
    width: 1211px; /* Set a max-width for larger screens */
    justify-content: space-between;
}

.contact-info h2,
.contact-info-social h2 {
    font-size: 25px;
    font-family: roboto;
    font-weight: 350;
}

.contact-social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.contact-social a {
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.contact-social i {
    font-size: 4px;
}

.copyrights {
    color: #797e80;
    font-size: 18px;
    font-family: roboto;
    font-weight: 500;
    width: 1211px; /* Set a max-width for larger screens */
}

.contact-info-last {
    color: white;
    display: flex;
    width: 1211px; /* Set a max-width for larger screens */
    justify-content: space-between;
    padding-top: 50px;
}

.arrow-to-top {
    cursor: pointer;
}

.arrow-to-top:hover {
    transform: scale(1.2);
}

footer {
    padding: 100px 30px 0px 30px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .contact-title {
        display: flex;
        justify-content: center;
        font-size: 40px; /* Smaller title for mobile */
        padding: 0 20px; /* Reduce left padding */
    }

    .contact-bottom {
        padding: 0 20px; /* Add padding for mobile */
    }

    .arrow-horizontal{
        width: 100%;
    }

    .contact-info,
    .contact-info-social,
    .contact-info-last {
        width: 100%; /* Full width on mobile */
        display: flex;
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
    }
    .contact-info-last {
        gap: 30px;
    }
    .contact-info h2,
    .contact-info-social h2 {
        font-size: 20px; /* Smaller font size for mobile */
        text-align: center; /* Center align text */
    }

    .copyrights {
        text-align: center; /* Center align copyrights */
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-title {
        font-size: 40px; /* Further smaller title for extra-small screens */
    }

    .contact-info h2,
    .contact-info-social h2 {
        font-size: 18px; /* Further reduce font size */
    }

    .copyrights {
        font-size: 16px; /* Smaller font size for copyrights */
    }
}