/* ===================================================
   Vishnu Gonela Portfolio
   Author : Vishnu Prasad Gonela
=================================================== */

:root{

    --primary:#2563eb;
    --secondary:#4f46e5;
    --accent:#06b6d4;

    --dark:#0f172a;
    --dark2:#1e293b;

    --light:#f8fafc;

    --text:#e2e8f0;

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

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

}

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:linear-gradient(
        135deg,
        #0f172a,
        #111827,
        #1e293b
    );

    color:white;

    overflow-x:hidden;

}

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

.glass-nav{

    background:rgba(15,23,42,.70);

    backdrop-filter:blur(15px);

    transition:.4s;

    box-shadow:0 4px 25px rgba(0,0,0,.25);

}

.glass-nav.scrolled{

    background:rgba(15,23,42,.95);

    box-shadow:0 10px 25px rgba(0,0,0,.3);

}

body.light-theme .glass-nav.scrolled{

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

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.navbar-brand{

    color:white !important;

    font-size:28px;

}

.nav-link{

    color:white !important;

    margin-left:18px;

    transition:.3s;

}

.nav-link:hover{

    color:#38bdf8 !important;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-top:90px;

}

.hero canvas#particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:0;

}

.hero .container{

    position:relative;

    z-index:1;

}

.hero h1{

    font-size:64px;

    font-weight:700;

    line-height:1.2;

}

.hero h3{

    color:#38bdf8;

    margin:20px 0;

    min-height:40px;

}

.hero p{

    color:#cbd5e1;

    line-height:1.8;

    font-size:18px;

    margin-top:20px;

}

.profile-image{

    width:360px;

    height:360px;

    object-fit:cover;

    border-radius:50%;

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

    box-shadow:0 25px 50px rgba(0,0,0,.45);

    transition:.4s;

}

.profile-image:hover{

    transform:scale(1.05);

}

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

.btn{

    border-radius:50px;

    padding:14px 30px;

    transition:.35s;

    font-weight:600;

}

.btn-primary{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--secondary)
    );

    border:none;

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 30px rgba(37,99,235,.45);

}

.btn-outline-light:hover{

    color:#111827;

}

/*=========================
STATISTICS
==========================*/

.stats{

    padding:80px 0;

}

.stats .col-md-3{

    background:var(--glass);

    margin-bottom:25px;

    border-radius:20px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.4s;

}

.stats .col-md-3:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.counter{

    font-size:48px;

    font-weight:700;

    color:#38bdf8;

}

.stats p{

    margin-top:10px;

    color:#cbd5e1;

}

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

section{

    padding:100px 0;

    scroll-margin-top:80px;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:42px;

    font-weight:700;

}

.section-title p{

    color:#94a3b8;

}

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

.card-glass{

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

    border-radius:20px;

    padding:35px;

    backdrop-filter:blur(15px);

    transition:.35s;

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

}

.card-glass:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.card-glass::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:radial-gradient(
        circle at var(--spot-x, 50%) var(--spot-y, 50%),
        rgba(255,255,255,.15),
        transparent 55%
    );

    opacity:0;

    transition:opacity .3s;

    pointer-events:none;

}

.card-glass:hover::after{

    opacity:1;

}

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

.contact-form .form-label{

    color:#cbd5e1;

    font-weight:500;

}

.contact-form .form-control{

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

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

    color:#e2e8f0;

    border-radius:12px;

    padding:12px 16px;

}

.contact-form .form-control::placeholder{

    color:#94a3b8;

}

.contact-form .form-control:focus{

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

    border-color:var(--accent);

    box-shadow:0 0 0 .2rem rgba(6,182,212,.25);

    color:#fff;

}

body.light-theme .contact-form .form-label{

    color:#334155;

}

body.light-theme .contact-form .form-control{

    background:#fff;

    color:#111827;

    border:1px solid #cbd5e1;

}

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

footer{

    padding:40px;

    text-align:center;

    color:#94a3b8;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:18px;

    margin-bottom:20px;

}

.footer-social a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--glass);

    color:#e2e8f0;

    font-size:18px;

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

    transition:.35s;

}

.footer-social a:hover{

    transform:translateY(-5px);

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    color:#fff;

    box-shadow:0 10px 25px rgba(37,99,235,.4);

}

.footer-copy{

    margin:0;

    font-size:15px;

}

body.light-theme .footer-social a{

    background:#fff;

    color:#334155;

    border:1px solid #e2e8f0;

}

#contact a[href^="mailto"],
#contact a[href^="tel"]{

    color:#38bdf8;

    text-decoration:none;

    transition:.3s;

}

#contact a[href^="mailto"]:hover,
#contact a[href^="tel"]:hover{

    color:#7dd3fc;

    text-decoration:underline;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#111827;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:50px;

}

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

@media(max-width:992px){

.hero{

text-align:center;

}

.hero h1{

font-size:42px;

}

.profile-image{

width:250px;
height:250px;

margin-top:40px;

}

}

@media(max-width:576px){

.hero h1{

font-size:34px;

}

.hero h3{

font-size:22px;

}

.hero p{

font-size:16px;

}

.btn{

width:100%;

margin-bottom:15px;

}

}

/* ==========================
LIGHT THEME
==========================*/

body.light-theme{

background:#f4f7fb;

color:#111827;

}

body.light-theme .glass-nav{

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

}

body.light-theme .nav-link,
body.light-theme .navbar-brand{

color:#111827 !important;

}

body.light-theme .card-glass,
body.light-theme .stats .col-md-3{

background:white;

color:#111827;

}

body.light-theme footer{

color:#475569;

}

body.light-theme .hero p{

color:#475569;

}

/* ==========================
BACK TO TOP
==========================*/

#topButton{

position:fixed;

right:25px;

bottom:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#2563eb;

color:white;

font-size:22px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 10px 25px rgba(0,0,0,.3);

transition:.3s;

}

#topButton:hover{

transform:translateY(-5px);

background:#1d4ed8;

}

/* Active menu */

.nav-link.active{

color:#38bdf8 !important;

font-weight:600;

}