@import './footer.css';
@import './style.css';

form {
    background-color: rgba(92, 131, 165, 0.357);
    padding: 15px;
    border-radius: 15px;
}

.webinar-button {
    cursor: pointer;
    margin: 15px;
    background-color: #eee;
    padding:12px; 
    border-radius: 10px; 
    text-align: center;
    transition: all 0.3s;
    font-size: large;
    font-weight: bold;
}

.element-card {
    border-radius: 20px;
    cursor: pointer;
}

.element-card:hover {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
    transition: all 0.3s;
}

.webinar-button:hover {
    background-color: #f213a048;
    box-shadow: #eee;
}

@media screen and (max-width: 992px) { 
    .webinar-button > * { 
        font-size: calc(2.3em + 1vw) !important;
    }
    .webinar-button {
        margin-top: 60px;
    }
    h5 {
        text-align: center !important   ;
        font-size: calc(2.3em + 1vw) !important;
    }
    p, h3, h4 {
        text-align: center !important   ;
        font-size: calc(2em + 1vw) !important;
    }
    h4 {
        font-size: calc(2.5em + 1vw) !important;
    }
    .date-time {
        font-size: calc(1.9em + 1vw) !important;
    }
    .element-card{
        margin-top: 50px;
    }
}