@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2') format('woff2');
}


.fas,
.far,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    

    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    

    transition: all 0.2s ease;
}


.fas:hover,
.far:hover,
.fab:hover,
.fa-solid:hover,
.fa-regular:hover,
.fa-brands:hover {
    transform: scale(1.1);
    opacity: 0.8;
}


.fa-chevron-right {

    margin-left: 0.5em;
    color: #666;
}

.fa-volume-up {

    margin-right: 0.5em;
    color: #007cba;
}

.fa-star {

    color: #ffd700;
    margin-right: 0.5em;
}

.fa-envelope {

    color: #007cba;
    margin-right: 0.5em;
}


.fa-facebook-f,
.fa-twitter,
.fa-youtube,
.fa-instagram,
.fa-tiktok,
.fa-line,
.fa-telegram-plane {

    margin-right: 0.5em;
    transition: all 0.3s ease;
}

.fa-facebook-f:hover { color: #1877f2; }
.fa-twitter:hover { color: #1da1f2; }
.fa-youtube:hover { color: #ff0000; }
.fa-instagram:hover { color: #e4405f; }
.fa-tiktok:hover { color: #000000; }
.fa-line:hover { color: #00b900; }
.fa-telegram-plane:hover { color: #0088cc; }


@media (max-width: 768px) {
    .fas,
    .far,
    .fab,
    .fa-solid,
    .fa-regular,
    .fa-brands {
        font-size: 0.9em;
    }
    
    .fa-chevron-right {
        margin-left: 0.3em;
    }
    
    .fa-volume-up,
    .fa-star,
    .fa-envelope {
        margin-right: 0.3em;
    }
}


@media (prefers-color-scheme: dark) {
    .fa-chevron-right {
        color: #ccc;
    }
    
    .fa-volume-up {
        color: #4a9eff;
    }
    
    .fa-star {
        color: #ffed4e;
    }
}


.fas.loading,
.far.loading,
.fab.loading {
    opacity: 0.5;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}


.fa-chevron-right,
.fa-volume-up,
.fa-star,
.fa-envelope {
    font-display: block;
}


.fa-facebook-f,
.fa-twitter,
.fa-youtube,
.fa-instagram,
.fa-tiktok,
.fa-line,
.fa-telegram-plane {
    font-display: swap;
}