.about {
    max-width: 95vw;
    width: 100%;
    z-index: 2;
    color: white;
    padding: 20px; /* Add some padding for smaller screens */
    margin: 0 auto; /* Center the container */
    margin-top:-35px;
}

.about-box {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: left;
}

.about-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.about-heading {
    font-size: 2.5rem; /* Adjusted for smaller screens */
    color: #ffffff;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(20px);
}

.about-text {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0;
    transform: translateY(20px);
}

.arrow-container {
    position: absolute;
    top: 20px;
    right: 20px;
    transition: transform 0.3s;
}

.arrow {
    font-size: 1.5rem;
    color: #ffffff;
    transform: translateY(0);
}

.about-box:hover .arrow-container {
    transform: translateY(-5px) rotate(15deg);
}

/* Responsive styles */
@media (max-width: 768px) {
    .about-box {
        padding: 30px; /* Reduce padding on smaller screens */
    }

    .about-heading {
        font-size: 2rem; /* Reduce font size for smaller screens */
    }

    .about-text {
        font-size: 0.9rem; /* Adjust text size */
    }

    .arrow {
        font-size: 1.2rem; /* Adjust arrow size */
    }
}

@media (max-width: 480px) {
    .about-box {
        padding: 20px; /* Further reduce padding on extra-small screens */
    }

    .about-heading {
        font-size: 1.5rem; /* Further reduce font size */
    }

    .about-text {
        font-size: 0.85rem; /* Adjust text size */
    }

    .arrow {
        font-size: 1rem; /* Adjust arrow size */
    }
}
@media (max-width: 629px) {
    .about{
        margin-top: 141px;
    }
 
}
@media (max-width: 566px) {
    .about-text {
        font-size: 14px;
    }
    .about-heading {
        font-size: 1rem;
    }
    .arrow {
        font-size: 14px;
    }
 
}
@media (max-width: 486px) {
    .about-text {
        font-size: 2.2vw;
        font-weight: 400;
    }
 
}
@media (max-width: 631px) {
    .about-text {
        font-size: 3vw;
        font-weight: 400;
    }
    .about{
        margin-top: 67px;
    }
}
@media (max-width: 376px) {
    .about-text {
        font-size: 9px;
        font-weight: 400;
    }
    .about{
        margin-top: 25px;
    }
  
 }