/* MAIN PROPERTIES */
.basic-protective-properties {
    margin-top: 6rem;
}

.first-protective-row {
    justify-content: center;
}

.col-protective {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.basic-protective-header {
    text-align: start;
    margin-bottom: 2rem;
}

.basic-protective-header h2 {
    padding-top: 2rem;
}

.card-protective {
    position: relative;
    overflow: hidden;
    border: 2px solid #84aa32ff;
    box-sizing: border-box;
    background-color: #84aa32ff;
    color: #fff;
    transition: border-color 0.5s cubic-bezier(.4, 0, .2, 1), color 0.3s cubic-bezier(.4, 0, .2, 1);
    z-index: 1;
}

.card-title-protective {
    color: white;
}

/* Псевдоэлемент с анимацией масштабирования */
.card-protective::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #006699ff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
}

/* Активация при наведении */
.card-protective:hover::before {
    transform: scaleX(1);
}

/* Контент поверх фона */
.card-protective>* {
    position: relative;
    z-index: 1;
}

.card-protective:hover {
    border-color: #006699ff;
    color: #fff;
}

@media (max-width: 767px) {
    .basic-protective-header {
        text-align: center;
    }
}

@media (max-width: 430px) {
    .col-protective {
        width: 90%;
    }
}

@media (max-width: 320px) {
    .basic-protective-properties .container {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (max-width: 570px) and (max-height: 320px) {
    .card-protective {
        width: 53%;
    }
}