@media(prefers-color-scheme:light){
    :root{
        --scheme-bac0:#f9fafb;
        --scheme-bac1:#ffffff;
        --scheme-fon0:#000000;
        --scheme-fon1:#3b3838;
        --scheme-fon2:#544e4e;
        --scheme-fon3:#a79e9e;
    }
}
@media(prefers-color-scheme:dark){
    :root{
        --scheme-bac0:#141515;
        --scheme-bac1:#000000;
        --scheme-fon0:#ffffff;
        --scheme-fon1:#b1acac;
        --scheme-fon2:#ada3a3;
        --scheme-fon3:#ddd5d5;
    }
}
.scheme-bac0{background-color:var(--scheme-bac0)}
.scheme-bac1{background-color:var(--scheme-bac1)}

.sheme-vision-back{background:linear-gradient(150deg, var(--scheme-bac0) 20%, var(--scheme-bac1) 80%)}

.scheme-fon0{color:var(--scheme-fon0)}
.scheme-fon1{color:var(--scheme-fon1)}
.scheme-fon2{color:var(--scheme-fon2)}
.scheme-fon3{color:var(--scheme-fon3)}

.hero-gradient {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.smooth-scroll {
    scroll-behavior: smooth;
}
.logo-gradient {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}
.bg-construction {
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f4f4f4" width="1200" height="600"/><g fill="%23ddd"><rect x="100" y="100" width="200" height="150"/><rect x="350" y="80" width="180" height="180"/><rect x="580" y="120" width="160" height="120"/><rect x="800" y="90" width="220" height="170"/><rect x="150" y="300" width="180" height="140"/><rect x="380" y="320" width="200" height="160"/><rect x="630" y="290" width="170" height="180"/><rect x="850" y="310" width="190" height="150"/></g><g fill="%23bbb"><rect x="120" y="120" width="20" height="100"/><rect x="160" y="120" width="20" height="100"/><rect x="200" y="120" width="20" height="100"/><rect x="240" y="120" width="20" height="100"/></g></svg>');
    background-size: cover;
    background-position: center;
}
.bg-medical {
    background-image: linear-gradient(rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.1)), url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600"><rect fill="%23f8fafc" width="1200" height="600"/><g fill="%23e2e8f0"><circle cx="200" cy="150" r="40"/><circle cx="400" cy="200" r="35"/><circle cx="600" cy="120" r="45"/><circle cx="800" cy="180" r="38"/><circle cx="1000" cy="140" r="42"/><circle cx="150" cy="350" r="36"/><circle cx="350" cy="400" r="40"/><circle cx="550" cy="320" r="44"/><circle cx="750" cy="380" r="37"/><circle cx="950" cy="340" r="41"/></g><g fill="%23cbd5e1"><path d="M180 130h40v40h-40z"/><path d="M200 110v80"/><path d="M380 180h40v40h-40z"/><path d="M400 160v80"/></g></svg>');
    background-size: cover;
    background-position: center;
}
.project-card {
    background-size: cover;
    background-position: center;
    min-height: 250px;
}
/* ---- */
input:focus{
    outline:none;
}
.bg-orange-shadow{background-color: #f974161c}
.bg-blue-shadow{background-color: #5a16f91c}
.bg-green-shadow{background-color: #16f9301c}
.bg-purple-shadow{background-color: #d716f91c}
.bg-red-shadow{background-color: #f916161c}
.bg-teal-shadow{background-color: #16f9ea1c}

.input-bg{background-color:var(--scheme-bac0); color:var(--scheme-fon2)}

.navb-logo{height:90%; width:auto; border-radius:10px; border:1px solid var(--scheme-fon3)}
.hero-logo{border-radius:10px;}
.title{line-height:1.2rem;}
.logo-name{
    display:flex;
    height:100%;
    justify-content: center;
    align-items: center;
    gap:1rem;
}
.name{
    font-size:1.2rem;
    line-height:1.3rem;
}
/* Extend */
.center-center{
    justify-content:center;
    align-items:center;
}
.gap-1{
    gap:1rem;
}
.gap-3{
    gap:3rem;
}
.gap-5{
    gap:5rem;
}
.h-min-ctn{
    height:min-content
}
.mobile-navbar, .hamburger-menu{
    display:none;
}
.two-buttons{
        display:flex;
        flex-direction:row;
        justify-content: center;
        align-items: center;
        gap:2rem;
}
@media (max-width: 950px) {
    .pc-navbar {
        display: none;
    } 
    .name{
        font-size: medium;
    }
    .hamburger-menu {
        display: flex;
    }
    .logo-name{
        display:flex;
        height:100%;
        justify-content: center;
        align-items: center;
        gap:1rem;
        justify-self:left;
    }
    .nav-height{
        height:3.1rem;
        gap:2rem;
        align-items:center;
    }
    .nav-link{
        display:flex;
        justify-content: space-between;
    }
    
}
@media (max-width: 430px) {
    .two-buttons{
        flex-direction:column;
        justify-content: center;
        align-items: center;
        gap:1rem;
    }
}