.dating-advice-section[data-v-af1032e7] {
    padding: 4rem 2rem
}

.container[data-v-af1032e7] {
    max-width: 1200px;
    margin: 0 auto
}

.header-content[data-v-af1032e7] {
    text-align: center;
    margin-bottom: 4rem
}

.advice-grid[data-v-af1032e7] {
    display: grid;
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto auto auto;
    gap: 2rem;
    grid-template-areas:"large large" "medium1 medium2" "bottom1 bottom2"
}

.large-card[data-v-af1032e7] {
    grid-area: large
}

.medium-card[data-v-af1032e7]:nth-of-type(2) {
    grid-area: medium1
}

.medium-card[data-v-af1032e7]:nth-of-type(3) {
    grid-area: medium2
}

.bottom-card[data-v-af1032e7]:nth-of-type(4) {
    grid-area: bottom1
}

.bottom-card[data-v-af1032e7]:nth-of-type(5) {
    grid-area: bottom2
}

.advice-card[data-v-af1032e7] {
    position: relative;
    border-radius: 1rem;
    box-shadow: #32325d40 0 10px 10px -10px, #0000004d 0 10px 10px -10px, #0a254059 0 -2px 4px inset;
    padding: 2.5rem;
    color: #666;
    overflow: hidden;
    min-height: 200px
}

.card-background[data-v-af1032e7] {
    position: absolute;
    inset: 0;
    opacity: .1
}

.geometric-shapes[data-v-af1032e7] {
    position: relative;
    width: 100%;
    height: 100%
}

.shape[data-v-af1032e7] {
    position: absolute;
    background: #ffffff1a
}

.shape-1[data-v-af1032e7] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: -50px;
    right: -50px
}

.shape-2[data-v-af1032e7] {
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    bottom: -30px;
    left: -30px
}

.shape-3[data-v-af1032e7] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 50%;
    left: 20px
}

.shape-4[data-v-af1032e7] {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    top: -40px;
    left: -40px
}

.shape-5[data-v-af1032e7] {
    width: 60px;
    height: 60px;
    transform: rotate(30deg);
    bottom: 20px;
    right: 20px
}

.shape-6[data-v-af1032e7] {
    width: 90px;
    height: 90px;
    transform: rotate(60deg);
    top: -20px;
    right: -20px
}

.shape-7[data-v-af1032e7] {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    bottom: -30px;
    left: -30px
}

.shape-8[data-v-af1032e7] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 20px;
    right: 20px
}

.shape-9[data-v-af1032e7] {
    width: 100px;
    height: 100px;
    transform: rotate(25deg);
    bottom: -25px;
    left: -25px
}

.shape-10[data-v-af1032e7] {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    top: -50px;
    left: -50px
}

.shape-11[data-v-af1032e7] {
    width: 70px;
    height: 70px;
    transform: rotate(45deg);
    bottom: 30px;
    right: 30px
}

.card-content[data-v-af1032e7] {
    position: relative;
    z-index: 2
}

.card-title[data-v-af1032e7] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    line-height: 1.3
}

.card-text[data-v-af1032e7] {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    opacity: .95
}

.card-text[data-v-af1032e7]:last-child {
    margin-bottom: 0
}

@media (max-width: 768px) {
    .dating-advice-section[data-v-af1032e7] {
        padding: 3rem 1rem
    }

    .main-title[data-v-af1032e7] {
        font-size: 2rem
    }

    .intro-text[data-v-af1032e7] {
        font-size: 1rem
    }

    .advice-grid[data-v-af1032e7] {
        grid-template-columns:1fr;
        grid-template-areas:"large" "medium1" "medium2" "bottom1" "bottom2";
        gap: 1.5rem
    }

    .advice-card[data-v-af1032e7] {
        padding: 2rem;
        min-height: 150px
    }

    .card-title[data-v-af1032e7] {
        font-size: 1.3rem
    }

    .card-text[data-v-af1032e7] {
        font-size: .95rem
    }
}

@media (max-width: 480px) {
    .dating-advice-section[data-v-af1032e7] {
        padding: 2rem 1rem
    }

    .main-title[data-v-af1032e7] {
        font-size: 1.8rem
    }

    .advice-card[data-v-af1032e7] {
        padding: 1.5rem
    }

    .card-title[data-v-af1032e7] {
        font-size: 1.2rem;
        margin-bottom: 1rem
    }

    .card-text[data-v-af1032e7] {
        font-size: .9rem
    }
}

.page[data-v-f7eb6c0b] {
    min-height: 100vh;
    display: flex;
    flex-direction: column
}