@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif; /* Use Roboto font */
}

body {
    background-color: #38a1ff;
}

.card {
    background-color: #38a1ff;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center; 
}

.grid {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    align-items: center;
    height: auto; /* Allow height to adjust based on content */
    justify-items: center; /* Center items */
    padding: 20px; /* Add padding for spacing */
}

.error {
    z-index: 1;
    position: relative;
    text-align: center; /* Center text for better appearance */
}

.error span {
    font-size: 6vw; /* Responsive font size */
    color: #150035;
    font-weight: 900;
    white-space: pre-line;
    line-height: 1;
    letter-spacing: 3px;
    text-shadow: 1px 7px 1px #fff;
}

.error p {
    color: #fff;
    white-space: pre-line;
    padding-top: 25px;
    font-size: 2.5vw; /* Responsive font size */
    line-height: 1.3;
}

.img {
    width: 100%; /* Full width on all screens */
    max-width: 800px; /* Limit maximum width for larger screens */
}

.img img {
    width: 100%;
}

button {
    width: 100px; /* Fixed width */
    padding: 8px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 25px;
    border: none;
    background-color: #000335;
    color: #fefdfa;
    position: relative;
}

button::after {
    content: '';
    width: 96px;
    height: 35px;
    border: 3px solid #fff;
    position: absolute;
    top: 7px;
    left: 5px;
    z-index: -1;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr; /* Single column for tablets */
        height: auto; /* Allow height to adjust based on content */
    }

    .error span {
        font-size: 10vw; /* Larger text on smaller screens */
    }

    .error p {
        font-size: 4vw; /* Larger text on smaller screens */
    }

    button {
        width: 90%; /* Full width button on smaller screens */
        font-size: 16px; /* Adjust button font size */
    }
}

@media (max-width: 480px) {
    .error span {
        font-size: 12vw; /* Adjust font size for mobile */
    }

    .error p {
        font-size: 5vw; /* Adjust font size for mobile */
    }

    button {
        font-size: 14px; /* Smaller button font size */
    }
}
/* Existing CSS remains the same above this line */

.coming-soon {
    color: #000; /* Change only the 'Connect with Us Soon!' text to black */
}

/* Additional style for the image on smaller screens */
@media (max-width: 480px) {
    .img img {
        width: 120%; /* Make the image larger on small screens */
        transform: translateX(-10%); /* Center it if it's larger */
        height: auto; /* Maintain aspect ratio */
    }

    button {
        font-size: 14px; /* Smaller button font size */
    }
}
button {
    
 
    
    cursor: pointer; /* Change cursor to pointer on hover */
}
button:hover {
    background-color: #f3f1ec; /* Optional: Change background color on hover */
    color: #051df7cd; /* Optional: Change text color on hover */
}