/* ======================================================
   AK PORTFOLIO V3
   Bootstrap Edition
====================================================== */

/* ==========================
   ROOT
========================== */

:root{

    --bg:#050816;
    --bg-secondary:#0b1228;

    --primary:#6EA8FF;
    --secondary:#8B5CF6;
    --accent:#4FD1FF;

    --text:#ffffff;
    --text-light:#CBD5E1;

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

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:22px;

}

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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:"Inter",sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

}

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

body::before{

    content:"";

    position:fixed;

    inset:-30%;

    background:

    radial-gradient(circle at 20% 20%,rgba(110,168,255,.28),transparent 40%),

    radial-gradient(circle at 80% 15%,rgba(139,92,246,.22),transparent 40%),

    radial-gradient(circle at 60% 80%,rgba(79,209,255,.16),transparent 35%),

    var(--bg);

    filter:blur(90px);

    z-index:-3;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background-image:

    radial-gradient(white 1px,transparent 1px);

    background-size:55px 55px;

    opacity:.13;

    z-index:-2;

}

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

.navbar{

    background:rgba(5,8,22,.65);

    backdrop-filter:blur(18px);

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

    padding:18px 0;

    transition:.35s;

}

.logo{

    color:#fff !important;

    font-size:34px;

    font-weight:800;

    letter-spacing:2px;

}

.nav-link{

    color:#fff !important;

    font-weight:600;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:var(--primary) !important;

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:90px;

}

.hero-bg{

    position:absolute;

    left:50%;

    top:50%;

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

    font-size:340px;

    font-weight:900;

    color:white;

    opacity:.05;

    user-select:none;

    pointer-events:none;

}

.hero .row{

    min-height:calc(100vh - 90px);

    align-items:center;

}

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

.hero-hello{

    display:inline-block;

    color:var(--accent);

    font-size:20px;

    margin-bottom:18px;

}

.hero-title{

    font-size:96px;

    font-weight:800;

    line-height:.95;

    margin-bottom:18px;

    background:

    linear-gradient(
        90deg,
        #ffffff,
        var(--primary),
        var(--secondary),
        #ffffff
    );

    background-size:300%;

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-subtitle{

    color:var(--text-light);

    font-size:38px;

    margin-bottom:18px;

    line-height:1.3;

}

.typing{

    color:var(--primary);

    font-size:24px;

    font-weight:600;

    min-height:38px;

    margin-bottom:24px;

}

.hero-description{

    color:var(--text-light);

    max-width:520px;

    line-height:1.9;

    font-size:19px;

}

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

.hero-image{

    width:680px;

    max-width:100%;

    position:relative;

    z-index:2;

    display:block;

    margin:auto;

    filter:drop-shadow(0 30px 60px rgba(0,0,0,.35));

}

.col-lg-6.text-center{

    position:relative;

}

.col-lg-6.text-center::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

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

    width:540px;

    height:540px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(110,168,255,.28),

    transparent 70%

    );

    filter:blur(70px);

}


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

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

    margin-bottom:35px;

    flex-wrap:wrap;

}

.btn-primary-custom{

    background:linear-gradient(135deg,#6EA8FF,#8B5CF6);

    color:#fff !important;

    padding:16px 34px;

    border-radius:14px;

    font-weight:600;

    border:none;

    transition:.35s;

    text-decoration:none;

    box-shadow:0 15px 35px rgba(110,168,255,.35);

}

.btn-primary-custom:hover{

    transform:translateY(-5px);

    color:white !important;

    box-shadow:0 25px 45px rgba(110,168,255,.45);

}

.btn-outline-custom{

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

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

    color:white !important;

    padding:16px 34px;

    border-radius:14px;

    text-decoration:none;

    transition:.35s;

    backdrop-filter:blur(12px);

}

.btn-outline-custom:hover{

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

    transform:translateY(-5px);

    color:white !important;

}

/* ==========================
   SOCIAL ICONS
========================== */

.social-icons{

    display:flex;

    gap:16px;

}

.social-icons a{

    width:56px;

    height:56px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:20px;

    text-decoration:none;

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

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

    backdrop-filter:blur(12px);

    transition:.35s;

}

.social-icons a:hover{

    background:linear-gradient(135deg,#6EA8FF,#8B5CF6);

    transform:translateY(-5px);

}

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

.hero-title{

    font-size:82px;

}

.hero-subtitle{

    font-size:52px;

    max-width:560px;

    line-height:1.15;

}

.hero-description{

    margin-top:15px;

    margin-bottom:0;

}

/* ==========================
   TYPING
========================== */

.typing{

    font-size:24px;

    font-weight:600;

    color:#6EA8FF;

    min-height:35px;

}



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

.section{

    padding:110px 0;

}

.section-heading{

    margin-bottom:60px;

}

.section-heading span{

    color:var(--primary);

    font-size:18px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:2px;

}

.section-heading h2{

    font-size:48px;

    font-weight:800;

    margin-top:12px;

}

/* ==========================
   ABOUT
========================== */

.about-card{

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

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

    border-radius:24px;

    padding:50px;

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

}

.about-card p{

    color:var(--text-light);

    font-size:18px;

    line-height:2;

    margin:0;

    text-align:center;

}

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

.skill-card{

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

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

    border-radius:22px;

    padding:35px 25px;

    text-align:center;

    transition:.35s;

    backdrop-filter:blur(20px);

    height:100%;

}

.skill-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.skill-card i{

    font-size:42px;

    color:var(--primary);

    margin-bottom:18px;

}

.skill-card h5{

    font-weight:700;

    margin-bottom:12px;

}

.skill-card p{

    color:var(--text-light);

    margin:0;

}

/* ==========================
   PROJECT
========================== */

.project-card{

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

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

    border-radius:22px;

    overflow:hidden;

    transition:.35s;

    backdrop-filter:blur(20px);

    height:100%;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.project-card img{

    width:100%;

    display:block;

}


/* ==========================
   PROJECT SLIDER
========================== */

.project-slider{

    position:relative;

    width:100%;

    height:260px;

    overflow:hidden;

    border-radius:20px 20px 0 0;

}

.project-slider .slide{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:0;

    transition:opacity .8s ease-in-out;

}

.project-slider .slide.active{

    opacity:1;

}

.project-preview{

    width:100%;

    height:260px;

    overflow:hidden;

    border-radius:20px 20px 0 0;

}

.project-video{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.project-body{

    padding:28px;

}

.project-body h4{

    margin-bottom:15px;

}

.project-body p{

    color:var(--text-light);

    line-height:1.8;

}

/* ==========================
   CONTACT
========================== */

.contact-card{

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

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

    border-radius:24px;

    padding:50px;

    backdrop-filter:blur(20px);

    text-align:center;

    box-shadow:var(--shadow);

}

.contact-card p{

    color:var(--text-light);

    margin-bottom:30px;

}

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

footer{

    padding:35px 0;

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

}

footer p{

    text-align:center;

    color:var(--text-light);

    margin:0;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes gradientMove{

    0%{

        background-position:0%;

    }

    100%{

        background-position:300%;

    }

}

@keyframes aurora{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

.hero-image{

    animation:floating 6s ease-in-out infinite;

}

.hero-title{

    animation:gradientMove 8s linear infinite;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#080b18;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--primary),

        var(--secondary)

    );

    border-radius:20px;

}

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

@media(max-width:992px){

    .hero{

        text-align:center;

        padding-top:120px;

    }

    .hero-title{

        font-size:64px;

    }

    .hero-subtitle{

        font-size:38px;

    }

    .hero-description{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .social-icons{

        justify-content:center;

    }

    .hero-image{

        width:500px;

        margin-top:50px;

    }

}

@media(max-width:768px){

    .hero-title{

        font-size:52px;

    }

    .hero-subtitle{

        font-size:30px;

    }

    .hero-bg{

        font-size:180px;

    }

    .hero-image{

        width:100%;

    }

    .section-heading h2{

        font-size:36px;

    }

}




/* =========================
   FIX PROJECT CARD HEIGHT
========================= */

#projects .row{
    align-items:flex-start;
}

#projects .col-lg-6{
    align-self:flex-start;
}

.project-card{
    height:auto;
}

.project-body{
    height:auto;
}