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

.foreign-desc-cont{
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: var(--mb);
}
.foreign-desc{
    max-width: 1280px;
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
}

.foreign-learn-banner{
    border-radius: 16px;
    margin-bottom: var(--mb);
    padding: 32px 64px;
    background-image: url('/wp-content/themes/neve/assets/img/foreign/Banner.jpg');
    background-position: center right;
    background-repeat: no-repeat;
    background-size: cover;
}
.foreign-learn-cont{
    display: flex;
    flex-direction: column;
    max-width: 688px;
    gap: 40px;
}
.foreign-banner-tag{
    width: fit-content;
    padding: 4px 12px;
    border-radius: 100px;
    background-color: var(--secondary-3);
    color: var(--primary-brand-2);
    font-family: var(--desktop-body2-font);
    font-size:  var(--desktop-body2-size);
    font-weight: var(--desktop-body2-weight);
}
.foreign-banner-title{
    font-family: var(--desktop-h3-font);
    font-size:  var(--desktop-h3-size);
    font-weight: var(--desktop-h3-weight);
}
.foreign-banner-desc{
    font-family: var(--desktop-body-font);
    font-size:  var(--desktop-body-size);
    font-weight: var(--desktop-body-weight);
}

@media screen and (max-width: 1440px) {
    .foreign-banner-desc{
        max-width: 550px;
    }
    .foreign-learn-banner{
        background-position: 60% center;
    }
}
@media screen and (max-width: 1024px) {
    .foreign-learn-banner{
        height: 800px;
        background-image: url('/wp-content/themes/neve/assets/img/foreign/mobile.jpg');
        background-position: center 80%;
    }
}
@media screen and (max-width: 768px) {
    .foreign-learn-banner{
        padding: 20px;
    }
}