/* Fundo da Seção com Degradê Animado */
.about-section {
    padding: 100px 0;
    position: relative;
    background: linear-gradient(-45deg, #ffffff, #f0f4ff, #e6eeff, #ffffff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Efeito de Borda Colorida nos Cards ao passar o mouse */
.about-card {
    padding: 25px;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px); /* Efeito de vidro */
    border: 2px solid transparent;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
    z-index: 1;
}

.about-card:hover {
    transform: translateY(-10px);
    border-image: linear-gradient(to right, #1e4bd1, #00d4ff);
    border-image-slice: 1;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(30, 75, 209, 0.15);
}

/* Estilização dos Ícones para brilhar no hover */
.about-card i {
    transition: all 0.3s ease;
    display: inline-block;
}

.about-card:hover i {
    transform: scale(1.2);
    filter: drop-shadow(0 0 8px rgba(30, 75, 209, 0.5));
}

/* O Badge de experiência também ganha o gradiente */
.experience-badge {
    background: linear-gradient(135deg, #0a1a44 0%, #1e4bd1 100%);
    box-shadow: 0 15px 35px rgba(30, 75, 209, 0.4);
}

/* Container Principal */
.photo-container-circular {
    width: 380px; /* Ajuste o tamanho conforme necessário */
    height: 380px;
    position: relative;
    z-index: 2;
}

/* Moldura Externa (com degradê ou cor sólida) */
.photo-border-outer {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 12px; /* Espessura da moldura externa */
    background: linear-gradient(135deg, var(--dark-blue) 0%, var(--accent-blue) 100%);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Moldura Interna (Branca para separar a foto da moldura colorida) */
.photo-border-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff; /* Cor da moldura interna */
    padding: 8px; /* Espessura do respiro branco */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A Foto em si */
.main-photo-circle {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* Se a foto tiver fundo transparente, o fundo branco da moldura interna aparecerá */
    background-color: #ffffff; 
}

/* Ajuste do Badge para não sobrepor o rosto */
.circular-badge {
    position: absolute;
    bottom: 10px;
    right: 20px;
    z-index: 5;
    transform: rotate(-5deg);
}

/* Responsividade para telas menores */
@media (max-width: 576px) {
    .photo-container-circular {
        width: 280px;
        height: 280px;
    }
}