/*==================================================
              UNITUSS V2.0
        STYLE.CSS (PART 1)
==================================================*/

/* Google Font */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*==========================
        RESET
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;

    background:#08111F;

    color:#ffffff;

    overflow-x:hidden;

}

/*==========================
       VARIABLES
==========================*/

:root{

    --primary:#6C4DFF;

    --secondary:#00D4FF;

    --dark:#08111F;

    --card:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.12);

    --text:#ffffff;

    --text2:#A8B3CF;

    --shadow:0 15px 40px rgba(0,0,0,.35);

}

/*==========================
      BACKGROUND GLOW
==========================*/

.background-blur{

    position:fixed;

    border-radius:50%;

    filter:blur(140px);

    z-index:-1;

}

.blur1{

    width:350px;

    height:350px;

    background:var(--primary);

    top:-100px;

    left:-100px;

    opacity:.25;

}

.blur2{

    width:400px;

    height:400px;

    background:var(--secondary);

    bottom:-150px;

    right:-150px;

    opacity:.15;

}

/*==========================
        NAVBAR
==========================*/

.navbar{

    position:sticky;

    top:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 8%;

    backdrop-filter:blur(20px);

    background:rgba(8,17,31,.75);

    border-bottom:1px solid var(--border);

    z-index:1000;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

}

.logo img{

    width:42px;

}

.logo h2{

    color:#fff;

    font-weight:700;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    color:var(--text2);

    text-decoration:none;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:#fff;

}

nav a.active{

    color:var(--secondary);

}

.nav-actions{

    display:flex;

    align-items:center;

    gap:15px;

}

.icon-btn{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    cursor:pointer;

    background:var(--card);

    color:#fff;

    transition:.3s;

}

.icon-btn:hover{

    background:var(--primary);

    transform:translateY(-3px);

}

#hamburger{

    display:none;

}

/*==========================
         HERO
==========================*/

.hero{

    width:100%;

    min-height:90vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:70px;

    padding:80px 8%;

}

.hero-left{

    flex:1;

}

.hero-tag{

    display:inline-block;

    padding:10px 18px;

    border-radius:30px;

    background:rgba(108,77,255,.15);

    color:var(--secondary);

    margin-bottom:25px;

}

.hero h1{

    font-size:4.4rem;

    line-height:1.05;

    margin-bottom:25px;

}

.hero h1 span{

    color:var(--secondary);

}

.hero p{

    color:var(--text2);

    font-size:1.1rem;

    line-height:1.8;

    max-width:560px;

    margin-bottom:35px;

}

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:45px;

}

/*==========================
         BUTTONS
==========================*/

.btn-primary{

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    padding:16px 30px;

    border-radius:16px;

    transition:.3s;

    box-shadow:0 0 25px rgba(108,77,255,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

}

.btn-secondary{

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    color:#fff;

    text-decoration:none;

    padding:16px 30px;

    border-radius:16px;

    transition:.3s;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.12);

}

/*==========================
      HERO STATS
==========================*/

.hero-stats{

    display:flex;

    gap:45px;

}

.hero-stats h2{

    color:var(--secondary);

    margin-bottom:5px;

}

.hero-stats span{

    color:var(--text2);

}

/*==========================
     DASHBOARD CARD
==========================*/

.hero-right{

    flex:1;

    display:flex;

    justify-content:center;

}

.dashboard-card{

    width:390px;

    background:var(--card);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:25px;

    padding:30px;

    box-shadow:var(--shadow);

}

.dashboard-header{

    margin-bottom:20px;

}

.dashboard-service{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.dashboard-service:last-child{

    border-bottom:none;

}

.dashboard-service small{

    display:block;

    color:var(--text2);

    margin-top:5px;

}

.dashboard-service strong{

    color:var(--secondary);

}

/*========================================
        CATEGORIES SECTION
========================================*/

.categories{

    padding:90px 8%;

}

.section-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

}

.section-title h2{

    font-size:2.2rem;

}

.section-title p{

    color:var(--text2);

}

.section-title a{

    color:var(--secondary);

    text-decoration:none;

    font-weight:600;

}

.category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

.category-card{

    background:var(--card);

    backdrop-filter:blur(20px);

    border:1px solid var(--border);

    border-radius:22px;

    padding:35px;

    transition:.35s;

    cursor:pointer;

}

.category-card:hover{

    transform:translateY(-10px);

    border-color:var(--secondary);

    box-shadow:0 0 30px rgba(0,212,255,.2);

}

.category-icon{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(108,77,255,.18);

    margin-bottom:20px;

}

.category-icon i{

    color:var(--secondary);

    font-size:28px;

}

.category-card h3{

    margin-bottom:12px;

}

.category-card p{

    color:var(--text2);

    line-height:1.7;

}

/*========================================
        FEATURED SERVICES
========================================*/

.featured-services{

    padding:30px 8% 90px;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.service-card{

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    border-radius:24px;

    overflow:hidden;

    transition:.35s;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.service-image{

    height:190px;

    background:linear-gradient(135deg,#6C4DFF,#00D4FF);

    position:relative;

}

.badge{

    position:absolute;

    top:18px;

    left:18px;

    background:white;

    color:#08111F;

    padding:8px 14px;

    border-radius:30px;

    font-size:.8rem;

    font-weight:600;

}

.service-content{

    padding:25px;

}

.seller{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:20px;

}

.seller img{

    width:48px;

    height:48px;

    border-radius:50%;

    object-fit:cover;

}

.seller small{

    color:var(--text2);

}

.service-content h3{

    margin-bottom:12px;

}

.service-content p{

    color:var(--text2);

    line-height:1.7;

    margin-bottom:25px;

}

.card-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.card-bottom span{

    color:var(--secondary);

    font-size:1.2rem;

    font-weight:700;

}

.card-bottom button{

    background:var(--primary);

    color:white;

    border:none;

    padding:12px 24px;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

}

.card-bottom button:hover{

    background:var(--secondary);

    color:#08111F;

}

/*========================================
        PLATFORM STATS
========================================*/

.platform-stats{

    padding:40px 8% 100px;

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

    gap:30px;

}

.stat-card{

    background:var(--card);

    border:1px solid var(--border);

    backdrop-filter:blur(20px);

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-8px);

}

.stat-card i{

    font-size:38px;

    color:var(--secondary);

    margin-bottom:20px;

}

.stat-card h2{

    font-size:2.3rem;

    margin-bottom:10px;

}

.stat-card p{

    color:var(--text2);

}

/*========================================
            FOOTER
========================================*/

footer{

    padding:70px 8% 30px;

    border-top:1px solid rgba(255,255,255,.08);

}

.footer-content{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-content h2{

    margin-bottom:18px;

}

.footer-content h3{

    margin-bottom:18px;

}

.footer-content p{

    color:var(--text2);

    line-height:1.8;

}

.footer-content a{

    display:block;

    margin-bottom:12px;

    color:var(--text2);

    text-decoration:none;

    transition:.3s;

}

.footer-content a:hover{

    color:var(--secondary);

}

footer hr{

    margin:50px 0 25px;

    border:none;

    border-top:1px solid rgba(255,255,255,.08);

}

.copyright{

    text-align:center;

    color:var(--text2);

}

/*========================================
        RESPONSIVE
========================================*/

@media(max-width:992px){

.hero{

flex-direction:column;

text-align:center;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.section-title{

flex-direction:column;

gap:15px;

text-align:center;

}

.footer-content{

grid-template-columns:1fr;

text-align:center;

}

}

@media(max-width:768px){

nav{

display:none;

}

#hamburger{

display:block;

width:45px;

height:45px;

border:none;

border-radius:12px;

background:var(--primary);

color:white;

cursor:pointer;

}

.hero h1{

font-size:3rem;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.dashboard-card{

width:100%;

}

}

/*========================================
        PREMIUM ANIMATIONS
========================================*/

@keyframes float{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-12px);
}

100%{
transform:translateY(0px);
}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes pulseGlow{

0%{

box-shadow:0 0 0 rgba(108,77,255,0);

}

50%{

box-shadow:0 0 35px rgba(108,77,255,.35);

}

100%{

box-shadow:0 0 0 rgba(108,77,255,0);

}

}

.dashboard-card{

animation:float 5s ease-in-out infinite;

}

.hero-content,
.hero-left,
.hero-right,
.category-card,
.service-card,
.stat-card{

animation:fadeUp .8s ease;

}

/*========================================
        SCROLLBAR
========================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111F;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#6C4DFF,
#00D4FF
);

border-radius:30px;

}

/*========================================
        INPUTS
========================================*/

input,
textarea,
select{

width:100%;

padding:15px 18px;

background:rgba(255,255,255,.06);

border:1px solid rgba(255,255,255,.12);

border-radius:16px;

color:white;

font-size:1rem;

outline:none;

transition:.3s;

}

input:focus,
textarea:focus,
select:focus{

border-color:#00D4FF;

box-shadow:0 0 18px rgba(0,212,255,.2);

}

/*========================================
        FORMS
========================================*/

.form-card{

max-width:750px;

margin:auto;

padding:35px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border-radius:25px;

border:1px solid rgba(255,255,255,.1);

}

.form-group{

margin-bottom:20px;

}

label{

display:block;

margin-bottom:8px;

font-weight:600;

}

/*========================================
        PROFILE CARD
========================================*/

.profile-card{

background:rgba(255,255,255,.08);

border-radius:25px;

padding:35px;

border:1px solid rgba(255,255,255,.1);

text-align:center;

}

.profile-card img{

width:120px;

height:120px;

border-radius:50%;

border:4px solid #6C4DFF;

object-fit:cover;

margin-bottom:20px;

}

.profile-card h2{

margin-bottom:10px;

}

.profile-card p{

color:#A8B3CF;

}

/*========================================
        GLASS EFFECT
========================================*/

.glass{

background:rgba(255,255,255,.08);

backdrop-filter:blur(20px);

border:1px solid rgba(255,255,255,.12);

border-radius:22px;

}

/*========================================
        HOVER EFFECTS
========================================*/

.category-card:hover,
.service-card:hover,
.stat-card:hover,
.dashboard-card:hover{

animation:pulseGlow 1.2s ease;

}

/*========================================
        LINKS
========================================*/

a{

transition:.3s;

}

a:hover{

opacity:.9;

}

/*========================================
        SELECTION
========================================*/

::selection{

background:#6C4DFF;

color:white;

}

/*========================================
        LOADER (Future)
========================================*/

.loader{

width:60px;

height:60px;

border:5px solid rgba(255,255,255,.1);

border-top:5px solid #00D4FF;

border-radius:50%;

animation:spin 1s linear infinite;

margin:auto;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

/*========================================
            AUTHENTICATION
========================================*/

.auth-page{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    padding:60px 8%;

    gap:60px;

}

.auth-left{

    animation:fadeUp .8s ease;

}

.auth-brand h1{

    font-size:3.5rem;

    color:var(--secondary);

    margin-bottom:20px;

}

.auth-brand h2{

    font-size:3rem;

    line-height:1.2;

    margin-bottom:20px;

}

.auth-brand h2 span{

    color:var(--primary);

}

.auth-brand p{

    color:var(--text2);

    font-size:1.05rem;

    line-height:1.8;

    max-width:520px;

    margin-bottom:35px;

}

.auth-features{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.auth-features div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:1rem;

}

.auth-features i{

    color:var(--secondary);

}

.auth-right{

    display:flex;

    justify-content:center;

    animation:fadeUp 1s ease;

}

.auth-card{

    width:100%;

    max-width:520px;

}

.auth-card h2{

    text-align:center;

    margin-bottom:10px;

}

.auth-card>p{

    text-align:center;

    color:var(--text2);

    margin-bottom:30px;

}

.auth-btn{

    width:100%;

    margin-top:10px;

    font-size:1rem;

}

.terms{

    display:flex;

    align-items:center;

    gap:10px;

    margin:18px 0;

    color:var(--text2);

    font-size:.95rem;

}

.terms input{

    width:auto;

}

.auth-footer{

    text-align:center;

    margin-top:25px;

    color:var(--text2);

}

.auth-footer a{

    color:var(--secondary);

    text-decoration:none;

    font-weight:600;

}

.auth-footer a:hover{

    text-decoration:underline;

}

/*========================================
        UNITUSS PASSWORD STRENGTH
        GLASSMORPHISM
========================================*/

.password-strength {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-sizing: border-box;
}


/*========================================
        STRENGTH TRACK
========================================*/

.strength-track {
    width: 100%;
    height: 5px;

    background: rgba(255, 255, 255, 0.12);

    border-radius: 50px;

    overflow: hidden;
}


/*========================================
        STRENGTH BAR
========================================*/

#strengthBar {
    width: 0%;
    height: 100%;

    border-radius: 50px;

    transition:
        width 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

    background: transparent;
}


/*========================================
        STRENGTH TEXT
========================================*/

.strength-info {
    margin-top: 7px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


#strengthText {
    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.3px;

    color: rgba(255, 255, 255, 0.65);

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/*========================================
        VERY WEAK
========================================*/

#strengthBar.strength-weak {

    background: #ff4d6d;

    box-shadow:
        0 0 8px rgba(255, 77, 109, 0.5);

}

#strengthBar.strength-weak + .strength-info #strengthText {
    color: #ff4d6d;
}


/*========================================
        WEAK / FAIR
========================================*/

#strengthBar.strength-fair {

    background: #ffb347;

    box-shadow:
        0 0 8px rgba(255, 179, 71, 0.5);

}


/*========================================
        GOOD
========================================*/

#strengthBar.strength-good {

    background: #4dabf7;

    box-shadow:
        0 0 10px rgba(77, 171, 247, 0.5);

}


/*========================================
        STRONG
========================================*/

#strengthBar.strength-strong {

    background: #4ade80;

    box-shadow:
        0 0 12px rgba(74, 222, 128, 0.65);

}

/*========================================
        TEXT COLOUR STATES
========================================*/

#strengthText {
    transition: color 0.3s ease;
}

#strengthText.weak {
    color: #ff4d6d;
}

#strengthText.fair {
    color: #ffb347;
}

#strengthText.good {
    color: #4dabf7;
}

#strengthText.strong {
    color: #4ade80;
}

/*========================================
        SUCCESS POPUP
========================================*/

.success-popup{

    position:fixed;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.8);

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.15);

    padding:35px;

    border-radius:24px;

    text-align:center;

    opacity:0;

    pointer-events:none;

    transition:.35s;

    z-index:5000;

}

.success-popup.show{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

.success-popup i{

    font-size:55px;

    color:#00D26A;

    margin-bottom:15px;

}

/*========================================
        MOBILE
========================================*/

@media(max-width:900px){

.auth-page{

grid-template-columns:1fr;

padding:40px 25px;

}

.auth-left{

text-align:center;

}

.auth-brand p{

margin:auto;

margin-bottom:30px;

}

.auth-features{

align-items:center;

}

}

@media(max-width:600px){

.auth-brand h1{

font-size:2.6rem;

}

.auth-brand h2{

font-size:2.1rem;

}

.auth-card{

padding:25px;

}

input{

font-size:.95rem;

}

}

/* PASSWORD WRAPPER */

.password-wrapper{

position:relative;

}

.password-wrapper input{

padding-right:55px;

}

.toggle-password{

position:absolute;

right:18px;

top:50%;

transform:translateY(-50%);

cursor:pointer;

color:#A8B3CF;

transition:.3s;

}

.toggle-password:hover{

color:var(--secondary);

}

/* REMEMBER ME */

.remember-row{

display:flex;

justify-content:space-between;

align-items:center;

margin:18px 0 28px;

font-size:.95rem;

}

.remember-row label{

display:flex;

align-items:center;

gap:8px;

color:var(--text2);

}

.remember-row input{

width:auto;

}

.remember-row a{

text-decoration:none;

color:var(--secondary);

}

.remember-row a:hover{

text-decoration:underline;

}

@media(max-width:600px){

.remember-row{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

}

/* =====================================================
   UNITUSS PROFILE PAGE
   GLASSMORPHISM PROFILE DESIGN
===================================================== */


/* =====================================================
   PROFILE PAGE BACKGROUND
===================================================== */

.profile-page {
    min-height: 100vh;
    padding: 30px 5%;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(0, 119, 255, 0.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(0, 212, 255, 0.08),
            transparent 35%
        ),
        #07111f;

    color: #ffffff;
}


/* =====================================================
   PROFILE COVER
===================================================== */

.profile-cover {
    position: relative;

    width: 100%;
    max-width: 1200px;

    height: 300px;

    margin: 0 auto;

    overflow: visible;

    border-radius: 24px 24px 0 0;

    border: 1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35);
}


/* =====================================================
   COVER BACKGROUND
===================================================== */

.cover-background {
    position: absolute;

    inset: 0;

    border-radius: 24px 24px 0 0;

    background:
        linear-gradient(
            135deg,
            rgba(5, 20, 40, 0.35),
            rgba(0, 119, 255, 0.25)
        ),
        url("../assets/images/profile-cover.jpg");

    background-size: cover;

    background-position: center;

    overflow: hidden;
}


/* =====================================================
   COVER OVERLAY
===================================================== */

.cover-background::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(4, 12, 25, 0.05),
            rgba(4, 12, 25, 0.75)
        );

    pointer-events: none;
}


/* =====================================================
   PROFILE PICTURE WRAPPER
===================================================== */

.profile-picture-wrapper {
    position: absolute;

    left: 50px;

    bottom: -75px;

    width: 150px;

    height: 150px;

    z-index: 5;
}


/* =====================================================
   PROFILE PICTURE
===================================================== */

.profile-picture-wrapper img {
    width: 150px;

    height: 150px;

    object-fit: cover;

    border-radius: 50%;

    border: 5px solid #07111f;

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.5);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.profile-picture-wrapper img:hover {
    transform: scale(1.04);

    box-shadow:
        0 15px 40px rgba(0, 119, 255, 0.35);
}


/* =====================================================
   CHANGE PROFILE PICTURE BUTTON
===================================================== */

.change-picture-btn {
    position: absolute;

    right: 5px;

    bottom: 5px;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    border: 2px solid #07111f;

    background: rgba(255, 255, 255, 0.12);

    color: #ffffff;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.change-picture-btn:hover {
    transform: scale(1.1);

    background: rgba(255, 255, 255, 0.22);
}


/* =====================================================
   PROFILE HEADER
===================================================== */

.profile-header {
    position: relative;

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 100px 50px 35px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 30px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.05);

    border-left: 1px solid rgba(255, 255, 255, 0.10);

    border-right: 1px solid rgba(255, 255, 255, 0.10);

    border-bottom: 1px solid rgba(255, 255, 255, 0.10);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);
}


/* =====================================================
   PROFILE NAME
===================================================== */

.profile-main-info h1 {
    margin: 0;

    font-size: 32px;

    font-weight: 700;

    letter-spacing: -0.5px;
}


/* =====================================================
   USERNAME
===================================================== */

.profile-username {
    margin: 5px 0 15px;

    color: rgba(255, 255, 255, 0.55);

    font-size: 15px;
}


/* =====================================================
   BIO
===================================================== */

.profile-bio {
    max-width: 600px;

    margin: 0;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.75);

    font-size: 15px;
}


/* =====================================================
   PROFILE ACTIONS
===================================================== */

.profile-actions {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}


/* =====================================================
   BUTTONS
===================================================== */

.btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 10px;

    border: 1px solid rgba(255, 255, 255, 0.15);

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.btn:hover {
    transform: translateY(-2px);
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.btn-primary {
    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00a8ff
        );

    color: #ffffff;

    box-shadow:
        0 8px 25px rgba(0, 119, 255, 0.25);
}


.btn-primary:hover {
    box-shadow:
        0 12px 30px rgba(0, 119, 255, 0.4);
}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.btn-secondary {
    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);
}


.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}


/* =====================================================
   PROFILE CONTENT
===================================================== */

.profile-content {
    width: 100%;

    max-width: 1200px;

    margin: 25px auto 50px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* =====================================================
   PROFILE CARDS
===================================================== */

.profile-card {
    padding: 25px;

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid rgba(255, 255, 255, 0.10);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.profile-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(255, 255, 255, 0.18);
}


/* =====================================================
   CARD HEADER
===================================================== */

.card-header {
    margin-bottom: 20px;

    padding-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.08);
}


.card-header h2 {
    display: flex;

    align-items: center;

    gap: 10px;

    margin: 0;

    font-size: 19px;
}


.card-header i {
    color: #4db8ff;

    font-size: 17px;
}


/* =====================================================
   PROFILE DETAILS
===================================================== */

.profile-detail {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    margin-bottom: 20px;
}


.profile-detail:last-child {
    margin-bottom: 0;
}


.profile-detail > i {
    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.07);

    color: #4db8ff;
}


.profile-detail span {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;

    color:
        rgba(255, 255, 255, 0.45);
}


.profile-detail p {
    margin: 0;

    font-size: 14px;

    color:
        rgba(255, 255, 255, 0.85);

    word-break: break-word;
}


/* =====================================================
   SKILLS
===================================================== */

.skills-container {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.skill-tag {
    padding: 8px 13px;

    border-radius: 50px;

    background:
        rgba(0, 119, 255, 0.12);

    border:
        1px solid rgba(0, 119, 255, 0.25);

    color:
        rgba(255, 255, 255, 0.85);

    font-size: 13px;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.skill-tag:hover {
    transform: translateY(-2px);

    background:
        rgba(0, 119, 255, 0.22);
}


/* =====================================================
   SERVICES
===================================================== */

.services-container {
    min-height: 130px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.empty-state {
    width: 100%;

    text-align: center;

    padding: 20px;

    color:
        rgba(255, 255, 255, 0.45);
}


.empty-state i {
    display: block;

    margin-bottom: 10px;

    font-size: 28px;

    color:
        rgba(255, 255, 255, 0.25);
}


.empty-state p {
    margin: 10px 0 18px;

    font-size: 14px;
}


/* =====================================================
   RESPONSIVE TABLET
===================================================== */

@media (max-width: 768px) {

    .profile-page {
        padding: 15px;
    }


    .profile-cover {
        height: 230px;

        border-radius: 18px 18px 0 0;
    }


    .cover-background {
        border-radius: 18px 18px 0 0;
    }


    .profile-picture-wrapper {
        left: 50%;

        transform: translateX(-50%);

        bottom: -65px;

        width: 130px;

        height: 130px;
    }


    .profile-picture-wrapper img {
        width: 130px;

        height: 130px;
    }


    .profile-header {
        padding:
            85px 20px 25px;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .profile-main-info h1 {
        font-size: 26px;
    }


    .profile-bio {
        max-width: 100%;
    }


    .profile-actions {
        width: 100%;

        justify-content: center;
    }


    .profile-content {
        grid-template-columns: 1fr;

        margin-top: 15px;
    }

}


/* =====================================================
   RESPONSIVE MOBILE
===================================================== */

@media (max-width: 480px) {

    .profile-page {
        padding: 8px;
    }


    .profile-cover {
        height: 190px;

        border-radius: 14px 14px 0 0;
    }


    .cover-background {
        border-radius: 14px 14px 0 0;
    }


    .profile-picture-wrapper {
        width: 110px;

        height: 110px;

        bottom: -55px;
    }


    .profile-picture-wrapper img {
        width: 110px;

        height: 110px;

        border-width: 4px;
    }


    .change-picture-btn {
        width: 34px;

        height: 34px;

        font-size: 12px;
    }


    .profile-header {
        padding:
            75px 15px 20px;
    }


    .profile-main-info h1 {
        font-size: 23px;
    }


    .profile-username {
        font-size: 14px;
    }


    .profile-bio {
        font-size: 14px;
    }


    .profile-actions {
        flex-direction: column;

        width: 100%;
    }


    .btn {
        width: 100%;
    }


    .profile-content {
        gap: 12px;
    }


    .profile-card {
        padding: 20px;

        border-radius: 15px;
    }


    .card-header h2 {
        font-size: 17px;
    }

}

/* =====================================================
   EDIT PROFILE MODAL
===================================================== */

.modal-overlay {
    position: fixed;

    inset: 0;

    z-index: 9999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(2, 8, 18, 0.75);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    opacity: 0;

    transition:
        opacity 0.3s ease;
}


/* OPEN MODAL */

.modal-overlay.active {
    display: flex;

    opacity: 1;
}


/* =====================================================
   MODAL CONTAINER
===================================================== */

.edit-profile-modal {
    width: 100%;

    max-width: 600px;

    max-height: 90vh;

    overflow-y: auto;

    padding: 30px;

    border-radius: 22px;

    background:
        rgba(10, 25, 45, 0.82);

    border:
        1px solid rgba(255, 255, 255, 0.14);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        transform 0.3s ease;
}


.modal-overlay.active
.edit-profile-modal {

    transform:
        translateY(0)
        scale(1);
}


/* =====================================================
   MODAL HEADER
===================================================== */

.modal-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);
}


.modal-header h2 {

    margin: 0 0 5px;

    font-size: 24px;
}


.modal-header p {

    margin: 0;

    font-size: 13px;

    color:
        rgba(255, 255, 255, 0.5);
}


/* =====================================================
   CLOSE BUTTON
===================================================== */

.modal-close {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    border:
        1px solid rgba(255, 255, 255, 0.10);

    background:
        rgba(255, 255, 255, 0.06);

    color: white;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.modal-close:hover {

    background:
        rgba(255, 255, 255, 0.14);

    transform:
        rotate(90deg);
}


/* =====================================================
   EDIT PICTURE
===================================================== */

.edit-picture-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 25px;

    text-align: center;
}


.edit-picture-wrapper {

    position: relative;

    width: 110px;

    height: 110px;

    margin-bottom: 10px;
}


.edit-picture-wrapper img {

    width: 110px;

    height: 110px;

    object-fit: cover;

    border-radius: 50%;

    border:
        4px solid rgba(255, 255, 255, 0.15);

    background:
        rgba(255, 255, 255, 0.08);
}


.change-profile-picture {

    position: absolute;

    right: 0;

    bottom: 0;

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00a8ff
        );

    color: white;

    cursor: pointer;

    border:
        2px solid #0a192d;

    transition:
        transform 0.25s ease;
}


.change-profile-picture:hover {

    transform:
        scale(1.1);
}


.edit-picture-section p {

    margin: 0;

    font-size: 12px;

    color:
        rgba(255, 255, 255, 0.45);
}


/* =====================================================
   FORM GROUP
===================================================== */

.edit-profile-modal .form-group {

    margin-bottom: 20px;
}


.edit-profile-modal .form-group label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    font-weight: 600;

    color:
        rgba(255, 255, 255, 0.8);
}


/* =====================================================
   INPUTS
===================================================== */

.edit-profile-modal input,
.edit-profile-modal textarea {

    width: 100%;

    box-sizing: border-box;

    padding: 13px 15px;

    border-radius: 10px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    background:
        rgba(255, 255, 255, 0.06);

    color: white;

    outline: none;

    font-family: inherit;

    font-size: 14px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.edit-profile-modal input::placeholder,
.edit-profile-modal textarea::placeholder {

    color:
        rgba(255, 255, 255, 0.35);
}


.edit-profile-modal input:focus,
.edit-profile-modal textarea:focus {

    border-color:
        rgba(0, 168, 255, 0.7);

    background:
        rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 3px
        rgba(0, 168, 255, 0.10);
}


.edit-profile-modal textarea {

    resize: vertical;

    min-height: 100px;
}


/* =====================================================
   USERNAME INPUT
===================================================== */

.username-input {

    display: flex;

    align-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.06);

    overflow: hidden;
}


.username-input span {

    padding-left: 15px;

    color:
        rgba(255, 255, 255, 0.45);

    font-size: 14px;
}


.username-input input {

    border: none;

    background: transparent;

    border-radius: 0;

    box-shadow: none;
}


.username-input:focus-within {

    border-color:
        rgba(0, 168, 255, 0.7);

    box-shadow:
        0 0 0 3px
        rgba(0, 168, 255, 0.10);
}


/* =====================================================
   FORM HELP TEXT
===================================================== */

.edit-profile-modal .form-group small {

    display: block;

    margin-top: 6px;

    font-size: 11px;

    color:
        rgba(255, 255, 255, 0.4);
}


/* =====================================================
   MODAL ACTIONS
===================================================== */

.modal-actions {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.10);
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .modal-overlay {

        padding: 10px;

        align-items: flex-end;
    }


    .edit-profile-modal {

        max-height: 92vh;

        padding: 22px;

        border-radius:
            22px 22px 0 0;
    }


    .modal-actions {

        flex-direction: column-reverse;
    }


    .modal-actions .btn {

        width: 100%;
    }

}

/* ========================================
   ADD SERVICE BUTTON
======================================== */

.add-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 20px;

    border: 1px solid rgba(0, 168, 255, 0.5);
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #0077ff,
        #00a8ff
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(0, 119, 255, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.add-service-btn:hover {
    transform: translateY(-2px);

    filter: brightness(1.1);

    box-shadow:
        0 12px 28px rgba(0, 119, 255, 0.30);
}

.add-service-btn:active {
    transform: translateY(0);
}

.add-service-btn i {
    font-size: 13px;
}

/* ========================================
   MAIN NAVIGATION
======================================== */

.main-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 16px;

    border-radius: 10px;

    color: rgba(255, 255, 255, 0.75);

    text-decoration: none;

    font-size: 14px;
    font-weight: 500;

    transition: all 0.25s ease;
}

.main-nav a:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.08);

    transform: translateY(-1px);
}

.main-nav a.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00a8ff
        );

    box-shadow:
        0 6px 18px
        rgba(0, 119, 255, 0.25);
}

.main-nav i {
    font-size: 14px;
}

/* ========================================
   SERVICE CATEGORY DROPDOWN
======================================== */

#createServiceForm select {
    width: 100%;
    padding: 13px 15px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;

    font-family: inherit;
    font-size: 14px;

    outline: none;
    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


/* Dropdown when focused */

#createServiceForm select:focus {
    border-color: rgba(0, 168, 255, 0.7);

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 0 0 3px rgba(0, 168, 255, 0.10);
}


/* Dropdown options */

#createServiceForm select option {
    background: #07111f;
    color: #ffffff;

    padding: 10px;
}


/* Placeholder option */

#createServiceForm select option:first-child {
    color: rgba(255, 255, 255, 0.5);
}

/* ========================================
   HAMBURGER BUTTON
======================================== */

#hamburger {
    display: none;

    width: 42px;
    height: 42px;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

#hamburger:hover {
    background: #6C4DFF;
}


/* ========================================
   MOBILE MENU
======================================== */

.mobile-menu {
    position: fixed;

    top: 0;
    right: 0;

    width: 280px;
    height: 100vh;

    z-index: 9998;

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 90px 20px 20px;

    background:
        rgba(7, 17, 31, 0.92);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border-left:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        -10px 0 40px rgba(0, 0, 0, 0.35);

    transform:
        translateX(100%);

    transition:
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* MENU OPEN */

.mobile-menu.active {
    transform:
        translateX(0);
}


/* MENU LINKS */

.mobile-menu a {
    display: flex;

    align-items: center;

    gap: 14px;

    padding: 14px 16px;

    border-radius: 10px;

    color:
        rgba(255, 255, 255, 0.8);

    text-decoration: none;

    font-size: 15px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.mobile-menu a:hover {
    color: #ffffff;

    background:
        rgba(0, 119, 255, 0.18);

    transform:
        translateX(5px);
}


/* ========================================
   HAMBURGER ANIMATION
======================================== */

#hamburger {
    position: relative;

    z-index: 10000;
}

#hamburger i {
    transition:
        transform 0.3s ease,
        opacity 0.2s ease;
}


/* When menu is open */

#hamburger.active i {
    transform:
        rotate(90deg);
}


/* ========================================
   MOBILE RESPONSIVE
======================================== */

@media (max-width: 768px) {

    #hamburger {
        display: flex;
    }

    .main-nav {
        display: none;
    }

}