.profile {
    position: relative;
    height: 75vw;
    width: 75vw;
    border-radius: 5vw;
    margin-top: 5vw !important;
    max-height: 40rem;
    max-width: 40rem;
}
.profile .profile-img {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 5vw;
}
.profile .dots-1 {
    position: absolute;
    width: 3vw;
    right: 1.5vw;
    top: 4vw;
}
.profile .dots-1 svg {
    fill: #fff;
}
.profile .dots-2 {
    position: absolute;
    width: 3vw;
    right: -4vw;
    top: 6.05vw;
}
.profile .dots-2 svg {
    fill: url(#dots-grad);
}
.profile .dots-3 {
    position: absolute;
    width: 3vw;
    left: 1.5vw;
    bottom: 6.05vw;
}
.profile .dots-3 svg {
    fill: #fff;
}
.profile .dots-4 {
    position: absolute;
    width: 3vw;
    left: -4vw;
    bottom: 4vw;
}
.profile .dots-4 svg {
    fill: url(#dots-grad);
}
@media (min-width:576px) {
    .profile { height: 60vw; width: 60vw; }
    .profile .dots-1 { width: 3vw; right: 1.5vw; }
    .profile .dots-2 { width: 3vw; right: -4vw; }
    .profile .dots-3 { width: 3vw; left: 1.5vw; }
    .profile .dots-4 { width: 3vw; left: -4vw; }
}
@media (min-width:768px) {
    .profile { height: 50vw; width: 50vw; }
    .profile .dots-1 { width: 3vw; right: 1.5vw; }
    .profile .dots-2 { width: 3vw; right: -4vw; }
    .profile .dots-3 { width: 3vw; left: 1.5vw; }
    .profile .dots-4 { width: 3vw; left: -4vw; }
}
@media (min-width:992px) {
    .profile { height: 40vw; width: 40vw; margin-top: 5vw; }
    .profile .dots-1 { width: 1.5vw; right: .75vw; }
    .profile .dots-2 { width: 1.5vw; right: -2vw; }
    .profile .dots-3 { width: 1.5vw; left: .75vw; }
    .profile .dots-4 { width: 1.5vw; left: -2vw; }
}
@media (min-width:1200px) {
    .profile { height: 30vw; width: 583px; margin-top: 5vw; }
    .profile .dots-1 { width: 1.5vw; right: .75vw; }
    .profile .dots-2 { width: 1.5vw; right: -2vw; }
    .profile .dots-3 { width: 1.5vw; left: .75vw; }
    .profile .dots-4 { width: 1.5vw; left: -2vw; }
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: optional;
    src: url(/fonts/cyrillic-ext.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: optional;
    src: url(/fonts/vietnamese.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: optional;
    src: url(/fonts/latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: optional;
    src: url(/fonts/latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.text-green {
    color: #0e874a !important;
}
.project-slide video {
    aspect-ratio: 16/9;
    object-fit: cover;
}
.info-box {
    transition: background 0.4s ease;
    justify-content: center;
}
.info-box:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%) !important;
    color: #fff !important;
}
.info-box:hover * {
    color: #fff !important;
}
.d-flex.bg-light.h-100 {
    transition: background 0.4s ease;
}
.d-flex.bg-light.h-100:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%) !important;
    color: #fff !important;
}
.d-flex.bg-light.h-100:hover * {
    color: #fff !important;
}
.hover-gradient {
    transition: background 0.4s ease;
    border-radius: 1rem;
}
.hover-gradient:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%) !important;
}
.hover-gradient:hover .text-gradient {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: #fff !important;
    color: #fff !important;
}
.hover-gradient:hover .text-muted {
    color: rgba(255,255,255,.85) !important;
}
.hover-gradient:hover .col-lg-7,
.hover-gradient:hover .col-lg-7 * {
    color: #fff !important;
}
.hover-gradient:has(.info-box:hover) {
    background: transparent !important;
}
.hover-gradient:has(.info-box:hover) .col-lg-7,
.hover-gradient:has(.info-box:hover) .col-lg-7 * {
    color: inherit !important;
}
a.btn.btn-primary[href="#curriculum"] {
    background: #1e30f3;
    transition: background 0.4s ease;
}
a.btn.btn-primary[href="#curriculum"]:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%);
}
ul.text-muted {
    list-style: none;
    padding-left: 0;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    .profile { width: 29vw !important; height: 29vw !important; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .profile { width: 422.675px !important; height: 422.675px !important; }
}
@media (min-width: 1400px) {
    .profile { width: 555px !important; }
}
@media (min-width: 992px) and (max-width: 1399.98px) {
    header .row.align-items-center { align-items: flex-end !important; }
    .col-lg-7 > .d-flex.justify-content-center { justify-content: flex-end !important; }
}
.navbar-toggler {
    border: 1px solid transparent !important;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #1e30f3, #17c785) border-box !important;
}
.navbar-toggler .navbar-toggler-icon {
    background: linear-gradient(135deg, #1e30f3, #17c785) no-repeat 0 23% / 100% 2px,
                linear-gradient(135deg, #1e30f3, #17c785) no-repeat 0 50% / 100% 2px,
                linear-gradient(135deg, #1e30f3, #17c785) no-repeat 0 77% / 100% 2px !important;
    background-color: transparent !important;
}
.navbar-nav {
    align-items: center;
}
.navbar-nav .nav-link {
    font-size: 1rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:active,
.navbar-nav .nav-link:focus {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #1e30f3;
    color: #1e30f3;
}
.navbar-brand:hover .fw-bolder,
.navbar-brand:active .fw-bolder,
.navbar-brand:focus .fw-bolder {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #1e30f3;
    color: #1e30f3;
}
.navbar-nav .nav-item {
    border-bottom: 1px solid #e9ecef;
    padding: .35rem 0;
    width: 20%;
}
.navbar-nav .nav-item:last-child {
    border-bottom: 0;
}
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
    .navbar-nav {
        align-items: flex-end;
    }
}
@media (min-width: 992px) {
    .navbar-nav {
        margin-left: auto;
    }
    .navbar-nav .nav-item {
        border-bottom: 0;
        border-left: 1px solid #e9ecef;
        padding: 0 .9rem;
        width: auto;
    }
.navbar-nav .nav-item:first-child {
    border-left: 0;
    padding-left: 0;
}
}

/* Dark Mode Toggle Button */
button.dark-mode-toggle,
.dark-mode-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 0 auto 2rem;
    padding: .9rem 2.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e30f3;
    background: #fff;
    border: 2px solid #1e30f3;
    border-radius: 50px;
    cursor: pointer;
    transition: all .35s ease;
    user-select: none;
    -webkit-user-select: none;
    max-width: 360px;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(30,48,243,.15);
}
.dark-mode-toggle:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(30,48,243,.3);
}
.dark-mode-toggle:active {
    transform: translateY(0);
}
.dark-mode-toggle .toggle-icon {
    display: flex;
    align-items: center;
    transition: transform .4s ease;
}
.dark-mode-toggle:hover .toggle-icon {
    transform: rotate(30deg);
}
.dark-mode-toggle .toggle-icon svg {
    width: 1.5rem;
    height: 1.5rem;
}
.dark-mode-toggle .toggle-label-sun,
.dark-mode-toggle .toggle-label-moon {
    transition: opacity .3s ease;
}
body.dark-mode .dark-mode-toggle {
    background: #161b22;
    border-color: #17c785;
    color: #17c785;
    box-shadow: 0 4px 16px rgba(23,199,133,.15);
}
body.dark-mode .dark-mode-toggle:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 28px rgba(23,199,133,.3);
}

/* Dark Mode */
body.dark-mode {
    background-color: #0f1117;
    color: #c9d1d9;
}
body.dark-mode .navbar {
    background-color: #161b22 !important;
}
body.dark-mode .navbar .nav-link {
    color: #c9d1d9 !important;
}
body.dark-mode .navbar .nav-link:hover,
body.dark-mode .navbar .nav-link:active,
body.dark-mode .navbar .nav-link:focus {
    color: #17c785 !important;
}
body.dark-mode .navbar-brand .fw-bolder {
    -webkit-text-fill-color: unset !important;
    background: none !important;
    color: #17c785 !important;
}
body.dark-mode header {
    background-color: #0f1117;
}
body.dark-mode .badge {
    background: linear-gradient(135deg, rgba(30,48,243,.3) 0%, rgba(23,199,133,.3) 100%) !important;
}
body.dark-mode .text-muted {
    color: #8b949e !important;
}
body.dark-mode .bg-light {
    background-color: #161b22 !important;
}
body.dark-mode .card {
    background-color: #161b22 !important;
    color: #c9d1d9;
}
body.dark-mode .card-body p {
    color: #c9d1d9 !important;
}
body.dark-mode .info-box {
    background-color: #0f1117 !important;
    color: #c9d1d9;
}
body.dark-mode .bg-white {
    background-color: #161b22 !important;
}
body.dark-mode .form-control {
    background-color: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}
body.dark-mode .form-control:focus {
    background-color: #0d1117;
    color: #c9d1d9;
    border-color: #17c785;
    box-shadow: 0 0 0 .25rem rgba(23,199,133,.25);
}
body.dark-mode .form-floating > label {
    color: #8b949e;
}
body.dark-mode footer {
    background-color: #161b22 !important;
    color: #8b949e;
}
body.dark-mode footer a {
    color: #17c785;
}
body.dark-mode .btn-outline-dark {
    color: #c9d1d9;
    border-color: #30363d;
}
body.dark-mode .btn-outline-dark:hover {
    background-color: #17c785;
    border-color: #17c785;
    color: #fff;
}
body.dark-mode .rounded-4 {
    border-color: #30363d !important;
}
body.dark-mode .d-flex.bg-light.h-100 {
    background-color: #0d1117 !important;
}
body.dark-mode .d-flex.bg-light.h-100:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%) !important;
}
body.dark-mode .info-box:hover {
    background: linear-gradient(135deg, #1e30f3 0%, #17c785 100%) !important;
}
body.dark-mode .navbar-toggler {
    background: linear-gradient(#161b22, #161b22) padding-box,
                linear-gradient(135deg, #1e30f3, #17c785) border-box !important;
}
body.dark-mode .profile .dots-1 svg,
body.dark-mode .profile .dots-3 svg {
    fill: #161b22;
}
body.dark-mode ::selection {
    background-color: #17c785;
    color: #fff;
}
body.dark-mode ::-moz-selection {
    background-color: #17c785;
    color: #fff;
}