@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease-out both;
}

.hero-section {
    background-image: url("/static/img/homepage-hero-2.jpg"); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.topbar-item {
    position: relative;
    cursor: pointer;
    transition: color 0.3s ease-in-out;
}

.topbar-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background-color: black; /* Цвет линии */
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s ease-in-out;
}

.topbar-item:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}


.icon-purpose{
    background-image: url("/static/core/svg/purpose.svg");
    background-size: cover;
}

.icon-robotics-basics{
    background-image: url("/static/core/svg/robotics_basics.svg");
    /* background-size: cover; */
}

.icon-coding-development{
    background-image: url("/static/core/svg/coding_development.svg");
    
}

.icon-engineer-skills{
    background-image: url("/static/core/svg/engineer-skills.svg");
    background-size: cover;
}

.icon-projects{
    background-size: cover;
    background-image: url("/static/core/svg/projects.svg");
}

.icon-teamwork{
    background-image: url("/static/core/svg/teamwork.svg");
    /* background-size: cover; */
}

.icon-competetions{
    background-image: url("/static/core/svg/competetions.svg");
    background-size: cover;
}

.icon-stem{
    background-image: url("/static/core/svg/stem.svg");

    background-size: cover;

}

.gallery-title{
    font-size: 24px;
    font-family: 'Roboto';
}

.gallery-card{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.personal-cabinet-material-title{
    font-weight: 500;
    font-size: 36px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
}

.leave-personal-cabinet-button{
    text-decoration-line: underline;
    --tw-text-opacity: 1;
    color: rgb(71 85 105 / var(--tw-text-opacity, 1)) /* #475569 */;
}