@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    --first-color: #4D49BF;
    --second-color: #05DBF2;
    --body-color: #DFE9F2;
    --title-color: #1C1C22;
    --text-color: #58576B;

    --body-font: 'Montserrat', sans-serif;
    --normal-font-size: 0.938rem;
    --h3-font-size: 1.125rem;
    --small-font-size: 0.75rem;


}

@media screen and (min-width: 968px) {
    :root {
        --normal-font-size: 1rem;
        --h3-font-size: 1.25rem;
        --small-font-size: 0.813rem;
    }
}

*, ::before, ::after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: var(--body-font);
background-color: var(--body-color); opacity: 1; transition: opacity 1 ease-in; }
body.fade-out{
    opacity: 0;
}
h3 { margin: 0; }
a { text-decoration: none; }
img { max-width: 100%; }
.bd-container { max-width: 968px; width: calc(100% - 3rem); margin-left: 1.5rem; margin-right: 1.5rem; }
.card { position: relative; overflow: hidden; padding: 3rem 0; background-color: var(--body-color); }
.card-container { display: grid; gap: 1.5rem; }
.card-glass { 
    position: relative; 
    text-align: center;
    padding: 2.5rem;
    overflow: hidden; 
    background: linear-gradient(130deg, rgba(251, 251, 254, 0.6), rgba(251, 251, 254, 0.2)); 
    box-shadow: inset 2px 2px 1px rgba(251, 251, 254, 0.3), inset -2px -2px 1px rgba(251, 251, 254, 0.2); 
    border-radius: 1.5rem;
    backdrop-filter: blur(10px);
}
.card-img { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #F4F4FB; margin-bottom: 1rem; }
.card-data { margin-bottom: 1.5rem; }
.card-title { font-size: var(--h3-font-size); color: var(--title-color); font-weight: 600; margin-bottom: 0.25rem; }
.card-profession { font-size: var(--small-font-size); color: var(--text-color); font-weight: 500; }
.card-button { 
    display: inline-block;
    background: linear-gradient(130deg, rgba(251, 251, 254, 0.9), rgba(251, 251, 254, 0.2));
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    color: var(--title-color);
    font-weight: 500;
    transition: 0.4s;
}
    .card-button:hover { background: linear-gradient(130deg, rgba(251, 251, 254, 1), rgba(251, 251, 254, 0.4)); }
.card-social { position: absolute; top: 50%; transform: translateY(-50%); }
.card-link { display: block; font-size: 1.35rem; color: var(--title-color); margin: 1rem 0; transform: translateX(-8rem); }
    .card-link:nth-child(1) { transition: 0.2s; }
    .card-link:nth-child(2) { transition: 0.5s; }
    .card-link:nth-child(3) { transition: 0.8s; }
    .card-glass:hover .card-link { transform: translateX(-1.5rem); }
.card-circle { position: absolute; width: 250px; height: 250px; background: linear-gradient(130deg, rgba(77, 73, 191, 0.8), rgba(255, 255, 255, 0.2)); border-radius: 50%; }
.card-circle1 { top: 20%; left: -20%; }
.card-circle2 { bottom: -5%; right: -25%; background: linear-gradient(130deg, rgba(5, 219, 242, 0.8), rgba(255, 255, 255, 0.2)); }
.icon-label {
    font-size: xx-small;
}
/*Media Queries*/

@media screen and (min-width: 568px) {
    .card-container { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 768px) {
    .bd-container { margin-left: auto; margin-right: auto; }
    .card { padding: 0; }
    .card-container { height: 100vh; grid-template-columns: repeat(3, 1fr); align-content: center; }
    .card-circle1 { left: 5%; top: 12%; }
    .card-circle2 { right: 8%; bottom: 15%; } 
}