@property --start {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.sector-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.hor-card {
    transition: transform 0.5s, box-shadow 0.5s;
    height: 100%;
    cursor: pointer;
    width: 100%;
    max-width: 700px;
    margin-bottom: 20px;
}

.sector-card::before {
    content: '';
    height: 100%;
    background-color: #69bd49;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 3px;
    background-image: conic-gradient(from var(--start), #69bd49 0deg, #d3ecb8 90deg, #69bd49 180deg, transparent 90deg, transparent 360deg);
}

.sector-card:hover::before {
    animation: spin 2s linear infinite;
}

.hor-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-10px);
}

@keyframes spin {
    from { --start: 0deg; }
    to   { --start: 360deg; }
}

.sector-card > * {
    position: relative;
    top: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    min-height: 158px;
    margin: 3px;
    background: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

p, h1, h2, h3, [data-i18n], label, div.product-desc, div.t {
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s;
    opacity: 1;
    transform: scale(1) translateY(0px);
}

.lang-change-start {
  opacity: 0.1;
  transform: scale(1.02) translateY(-15px);
}

.lang-change-end {
  opacity: 1;
  transform: scale(1) translateY(0px);
}