@import url('../vars.css');

.virus-top-banner{
    box-shadow: var(--drop-shadow-200);
    padding: 35px 45px 45px;
    height: 226px;
    background-image: url('/wp-content/themes/neve/assets/img/virus/banner-img.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
    display: flex;
    gap: 70px;
    align-items: flex-end;
}
.virus-result{
    margin-bottom: var(--mb);
}
.virus-top-banner-cont{
    width: 750px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.virus-top-banner-cont:nth-child(2){
    width: 534px;
}
.virus-top-banner-title{
    font-family: var(--desktop-h4-font);
    font-size:  var(--desktop-h4-size);
    font-weight: var(--desktop-h4-weight);
    color: #fff;
}
.virus-top-banner-check{
    display: flex;
}
.virus-top-banner-input{
    height: 38px;
    border-radius: 8px;
    padding: 8px;
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--text);
    border: 1px solid var(--secondary-2);
    width: 515px;
}
.virus-top-banner-input::placeholder{
    color: #D0D5DD;
}
.virus-top-banner-button{
    border-radius: 8px;
    padding: 8px 40px;
    color: #fff;
    background: var(--primary-brand-2);
    font-family: var(--desktop-button-font);
    font-size:  var(--desktop-button-size);
    font-weight: var(--desktop-button-weight);
}
.virus-top-banner-desc{
    color: #fff;
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
}

.virus-cards{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: var(--mb);
}
.virus-card{
    width: 32%;
    box-shadow: var(--drop-shadow-200);
    border-radius: 16px;
    height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.virus-card-head{
    display: flex;
    gap: 20px;
    padding: 20px;
}
.virus-card-num{
    font-family: var(--desktop-h5-font);
    font-size:  var(--desktop-h5-size);
    font-weight: var(--desktop-h5-weight);
    color: var(--primary-brand-2);
    flex: 0 0 36px;
}
.virus-card-title{
    font-family: var(--desktop-body2-font);
    font-size:  var(--desktop-body2-size);
    font-weight: var(--desktop-body2-weight);
    color: var(--text);
}
.virus-card-img{}

.virus-infograf{
    display: flex;
    gap: 20px;
    margin-bottom: var(--mb);
}
.virus-infograf-img{
    width: 50%;
}

.virus-safe{
    display: flex;
    flex-wrap: wrap;
    padding: 40px 20px;
    background: var(--secondary-1);
    border-radius: 16px;
    gap: 32px;
    margin-bottom: var(--mb);
}
.virus-safe-card{
    width: 23%;
    background: #fff;
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    gap: 20px;
}
.virus-safe-card-num{
    font-family: var(--desktop-h5-font);
    font-size:  var(--desktop-h5-size);
    font-weight: var(--desktop-h5-weight);
    color: var(--primary-brand-1);
    flex: 0 0 36px;
}
.virus-safe-card-desc{
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: var(--text);
}

.virus-bot-banner{
    margin-bottom: var(--mb);
    display: flex;
    padding: 53px 72px;
    justify-content: space-between;
    height: 275px;
    background-image: url('/wp-content/themes/neve/assets/img/virus/botton-banner.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 16px;
}
.virus-bot-banner-cont{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.virus-bot-banner-desc{
    width: 70%;
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
    color: #fff;
}
.virus-bot-banner-title{
    font-family: var(--desktop-h4-font);
    font-size:  var(--desktop-h4-size);
    font-weight: var(--desktop-h4-weight);
    color: #fff;
    width: 70%;
}

@media screen and (max-width: 1620px) {
    .virus-top-banner-input{
        width: 70%;
    }
    .virus-top-banner-button{
        width: 30%;
        padding: 8px 0;
        display: flex;
        justify-content: center;
    }
    .virus-cards{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
    }
    .virus-card{
        width: 100%;
        height: auto;
    }
}
@media screen and (max-width: 1400px) {
    .virus-bot-banner{
        padding: 32px;
    }
    .virus-safe{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .virus-safe-card{
        width: 100%;
    }
}
@media screen and (max-width: 1280px) {
    .virus-top-banner{
        gap: 48px;
        padding: 20px;
    }
    .virus-cards{
        grid-template-columns: 1fr 1fr;
    }
    .virus-bot-banner{
        height: auto;
    }
}
@media screen and (max-width: 1080px) {
    .virus-top-banner{
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }
    .virus-top-banner-cont{
        width: 100%;
    }
    .virus-top-banner-desc{
        width: 100%;
    }
    .virus-top-banner-cont:nth-child(2) {
        width: 100%;
    }
    .virus-safe{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 768px) {
    .virus-top-banner{
        height: 510px;
        gap: 115px;
        background-image: url('/wp-content/themes/neve/assets/img/virus/top-banner-mobile.png');
        justify-content: space-around;
    }
    .virus-bot-banner{
        background-image: url('/wp-content/themes/neve/assets/img/virus/bottom-mobile.png');
        flex-direction: column;
        gap: 20px;
        padding: 50px 12px;
    }
    .virus-bot-banner-cont{
        width: 100%;
    }
    .virus-bot-banner-desc{
        width: 100%;
    }
    .virus-bot-banner-title{
        width: 100%;
    }
    .virus-top-banner-check{
        flex-direction: column;
        gap: 12px;
    }
    .virus-top-banner-input{
        width: 100%;
    }
    .virus-top-banner-button{
        width: 100%;
    }
    .virus-cards{
        display: flex;
        flex-direction: column;
    }
    .virus-card-num{
        flex: 0 0 24px;
    }
    .virus-card-head{
        gap: 8px;
    }
    .virus-infograf{
        flex-direction: column;
    }
    .virus-infograf-img{
        width: 100%;
    }
    .virus-safe{
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 20px 12px;
    }
    .virus-safe-card{
        gap: 8px;
    }
    .virus-safe-card-num{
        flex: 0 0 20px;
    }
}