/**
 * Декоративные SVG-орнаменты. Линии, круги, стрелки из оригинала,
 * размещённые вдоль секций через псевдо-элементы.
 * Отключить в конкретной секции: добавить класс .no-ornament.
 */

.ruru-hero::before,
.ruru-about::before,
.ruru-about::after,
.ruru-steps::before,
.ruru-steps::after,
.ruru-reviews::before,
.ruru-cta::after,
.ruru-form::before,
.ruru-popular::before,
.ruru-team::before,
.ruru-benefits::before,
.ruru-sgrid::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    opacity: 0.75;
    z-index: 1;
}
.ruru-about    { position: relative; overflow: hidden; }
.ruru-steps    { position: relative; overflow: hidden; }
.ruru-reviews  { position: relative; overflow: hidden; }
.ruru-cta      { position: relative; overflow: hidden; }
.ruru-form     { position: relative; overflow: hidden; }
.ruru-popular  { position: relative; overflow: hidden; }
.ruru-team     { position: relative; overflow: hidden; }
.ruru-benefits { position: relative; overflow: hidden; }
.ruru-sgrid    { position: relative; overflow: hidden; }

.ruru-hero::before {
    background-image: url('../ornaments/group-14.svg');
    width: 160px; height: 160px;
    top: 8%; right: 4%;
    z-index: 3;
    opacity: 0.8;
}
.ruru-about::before {
    background-image: url('../ornaments/group-146.svg');
    width: 140px; height: 140px;
    top: 20px; left: -30px;
    opacity: 0.55;
}
.ruru-about::after {
    background-image: url('../ornaments/group-153.svg');
    width: 110px; height: 110px;
    bottom: 30px; right: -30px;
    opacity: 0.5;
}
.ruru-steps::before {
    background-image: url('../ornaments/arrow-2.svg');
    width: 80px; height: 40px;
    top: 60px; right: 8%;
    opacity: 0.5;
}
.ruru-steps::after {
    background-image: url('../ornaments/group-47.svg');
    width: 120px; height: 120px;
    bottom: -20px; left: -20px;
    opacity: 0.45;
}
.ruru-reviews::before {
    background-image: url('../ornaments/rectangle.svg');
    width: 200px; height: 120px;
    top: 40px; left: -40px;
    opacity: 0.35;
}
.ruru-cta::after {
    background-image: url('../ornaments/arrow-circle-right.svg');
    width: 56px; height: 56px;
    top: 30px; right: 30px;
    opacity: 0.6;
}
.ruru-form::before {
    background-image: url('../ornaments/group-36.svg');
    width: 160px; height: 160px;
    top: -20px; right: -30px;
    opacity: 0.4;
}
.ruru-popular::before {
    background-image: url('../ornaments/group-14.svg');
    width: 90px; height: 90px;
    top: 40px; right: 4%;
    opacity: 0.5;
}
.ruru-team::before {
    background-image: url('../ornaments/group-153.svg');
    width: 110px; height: 110px;
    bottom: 40px; left: -30px;
    opacity: 0.45;
}
.ruru-benefits::before {
    background-image: url('../ornaments/group-47.svg');
    width: 100px; height: 100px;
    top: 30px; left: 4%;
    opacity: 0.45;
}
.ruru-sgrid::before {
    background-image: url('../ornaments/group-146.svg');
    width: 120px; height: 120px;
    top: 24px; right: -20px;
    opacity: 0.4;
}

.no-ornament::before, .no-ornament::after { display: none !important; }

@media (max-width: 768px) {
    .ruru-hero::before { width: 100px; height: 100px; top: 16px; right: 16px; }
    .ruru-about::before,
    .ruru-about::after,
    .ruru-steps::after,
    .ruru-reviews::before,
    .ruru-form::before,
    .ruru-team::before,
    .ruru-benefits::before,
    .ruru-sgrid::before,
    .ruru-popular::before { display: none; }
}