/* ==========================================================
        Secure Software Developer Portfolio
        Author : Basavaraja H Gurikar
==========================================================*/

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

:root{

    --primary:#2563eb;
    --secondary:#06b6d4;
    --accent:#38bdf8;

    --dark:#0f172a;
    --dark-card:#162032;

    --light:#f8fafc;
    --light-card:#ffffff;

    --text:#e2e8f0;
    --text-dark:#1e293b;

    --shadow:0 10px 35px rgba(0,0,0,.2);

    --radius:18px;

    --transition:.35s ease;

}

body.light{

    --dark:#f8fafc;
    --dark-card:#ffffff;

    --text:#1e293b;

}

*{

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

}

html{

    scroll-behavior:smooth;

    overflow-x:hidden;

}

body{

    background:var(--dark);

    color:var(--text);

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

    overflow-x:hidden;

    transition:.4s;

}

/* Scrollbar */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

.container{

    width:min(1200px,92%);

    margin:auto;

}

section{

    padding:90px 0;

}

/* =======================================================
            Progress Bar
=======================================================*/

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    height:4px;

    width:0;

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

    z-index:9999;

}

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

.header{

    position:fixed;

    top:0;

    width:100%;

    z-index:999;

    backdrop-filter:blur(18px);

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

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

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    font-size:1.3rem;

    color:white;

    font-weight:700;

    text-decoration:none;

}

.logo i{

    color:var(--secondary);

    margin-right:8px;

}

#navbar{

    display:flex;

    gap:30px;

}

#navbar a{

    color:var(--text);

    text-decoration:none;

    font-weight:500;

    position:relative;

}

#navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--secondary);

    transition:.3s;

}

#navbar a:hover::after{

    width:100%;

}

.header-actions{

    display:flex;

    gap:15px;

}

.header-actions button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:45px;

    height:45px;

    border:none;

    border-radius:50%;

    background:var(--dark-card);

    color:white;

    cursor:pointer;

    transition:.3s;

}

.header-actions button i,
#menuBtn i{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    line-height:1;
}

.header-actions button:hover{

    background:var(--primary);

}

#menuBtn{

    display:none;

}

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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top left,#2563eb40,transparent 50%),

    radial-gradient(circle at bottom right,#06b6d440,transparent 45%);

    z-index:-2;

}

.hero-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:80px;

    align-items:center;

}

.badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 20px;

    border-radius:40px;

    background:rgba(37,99,235,.15);

    color:#60a5fa;

    margin-bottom:20px;

}

.hero h1{

    font-size:4rem;

    font-weight:800;

    line-height:1.2;

}

.hero h1 span{

    color:var(--secondary);

}

.hero h2{

    margin:20px 0;

    color:#94a3b8;

    min-height:40px;

}

.hero p{

    line-height:1.9;

    color:#cbd5e1;

    max-width:650px;

}

.hero-buttons{

    margin-top:40px;

    display:flex;

    gap:20px;

}

.btn{

    padding:14px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.primary{

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

    color:white;

}

.primary:hover{

    transform:translateY(-5px);

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

}

.secondary{

    border:2px solid var(--primary);

    color:white;

}

.secondary:hover{

    background:var(--primary);

}

.social-links{

    margin-top:35px;

    display:flex;

    gap:20px;

}

.social-links a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--dark-card);

    color:white;

    transition:.35s;

}

.social-links a:hover{

    transform:translateY(-8px);

    background:var(--primary);

}

/* =======================================================
                PROFILE IMAGE
=======================================================*/

.profile-card{

    display:flex;

    justify-content:center;

}

.profile-card img{

    width:360px;

    height:360px;

    object-fit:cover;

    border-radius:50%;

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

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

    animation:float 5s ease infinite;

}

@keyframes float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-18px);

}

}

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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:2.4rem;

    margin-bottom:15px;

}

.section-title p{

    color:#94a3b8;

}

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

.about-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:50px;

}

.about-text p{

    line-height:2;

    margin-bottom:20px;

}
.about-text{

    text-align: justify;

    text-justify: inter-word;

    font-size: 1.05rem;

    line-height: 1.9;

    color: #cbd5e1;

}

.about-text p{

    margin-bottom: 22px;

    letter-spacing: 0.3px;

}
@media (max-width: 768px){

    .about-text{

        text-align: left;
        text-align: justify;

    text-justify: inter-word;

    font-size: 1.05rem;

    line-height: 1.9;

    color: #cbd5e1;


    }

}
.about-cards{

    display:grid;

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

    gap:20px;

}

.stat-card{

    padding:30px;

    text-align:center;

    border-radius:var(--radius);

    background:var(--dark-card);

    box-shadow:var(--shadow);

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-card h3{

    color:var(--secondary);

    font-size:2rem;

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

.skills-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.skill-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius);
    padding:30px;
    transition:var(--transition);
    box-shadow:var(--shadow);
}

.skill-card:hover{
    transform:translateY(-12px);
    border-color:var(--secondary);
}

.skill-header{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
}

.skill-header i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
}

.skill-header h3{
    font-size:1.3rem;
}

.skill-tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.skill-tags span{
    padding:8px 15px;
    background:rgba(37,99,235,.15);
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    font-size:.9rem;
    transition:.3s;
}

.skill-tags span:hover{
    background:var(--primary);
    transform:scale(1.08);
}

/* =======================================================
                EXPERIENCE
=======================================================*/

.timeline{
    position:relative;
    max-width:950px;
    margin:auto;
}

.timeline::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:4px;
    height:100%;
    background:linear-gradient(var(--primary),var(--secondary));
    transform:translateX(-50%);
}

.timeline-item{
    position:relative;
    width:50%;
    padding:20px 45px;
}

.timeline-item:nth-child(odd){
    left:0;
}

.timeline-item:nth-child(even){
    left:50%;
}

.timeline-dot{
    position:absolute;
    top:35px;
    width:20px;
    height:20px;
    background:var(--secondary);
    border-radius:50%;
    border:4px solid var(--dark);
}

.timeline-item:nth-child(odd) .timeline-dot{
    right:-12px;
}

.timeline-item:nth-child(even) .timeline-dot{
    left:-12px;
}

.timeline-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(18px);
    border-radius:var(--radius);
    padding:30px;
    box-shadow:var(--shadow);
    transition:.35s;
}

.timeline-card:hover{
    transform:translateY(-10px);
}

.timeline-card h3{
    color:var(--secondary);
    margin-bottom:8px;
}

.company{
    font-weight:600;
    color:#60a5fa;
}

.duration{
    color:#94a3b8;
    margin:8px 0 18px;
}

.timeline-card ul{
    padding-left:18px;
}

.timeline-card li{
    margin-bottom:8px;
    line-height:1.8;
}

.tech-stack{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.tech-stack span{
    background:rgba(6,182,212,.15);
    color:#7dd3fc;
    padding:7px 14px;
    border-radius:50px;
    font-size:.8rem;
}

/* =======================================================
                PROJECTS
=======================================================*/

.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;
}

.project-card{
    overflow:hidden;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    transition:.4s;
    box-shadow:var(--shadow);
}

.project-card:hover{
    transform:translateY(-15px);
}

.project-image{
    position:relative;
    overflow:hidden;
}

.project-image img{
    width:100%;
    height:240px;
    object-fit:cover;
    transition:.45s;
}

.project-card:hover img{
    transform:scale(1.08);
}

.project-content{
    padding:28px;
}

.project-content h3{
    margin-bottom:12px;
    color:#fff;
    font-size:1.4rem;
}

.project-content p{
    color:#cbd5e1;
    line-height:1.8;
    margin-bottom:25px;
}

.project-stack{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:25px;
}

.project-stack span{
    padding:8px 14px;
    background:rgba(37,99,235,.18);
    color:#7dd3fc;
    border-radius:40px;
    font-size:.82rem;
    transition:.3s;
}

.project-stack span:hover{
    background:var(--primary);
    color:white;
}

.project-features{
    margin-bottom:25px;
}

.project-features li{
    list-style:none;
    margin-bottom:10px;
    color:#cbd5e1;
}

.project-features li::before{
    content:"✔";
    color:#22c55e;
    margin-right:10px;
}

.project-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.project-buttons a{
    flex:1;
    min-width:120px;
    text-align:center;
    padding:12px;
    border-radius:12px;
    text-decoration:none;
    transition:.35s;
    font-weight:600;
    position:relative;
    z-index:2;
}

.github-btn{
    background:#1e293b;
    color:white;
}

.github-btn:hover{
    background:#000;
}

.demo-btn{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
}

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

.doc-btn{
    border:1px solid var(--secondary);
    color:var(--secondary);
}

.doc-btn:hover{
    background:var(--secondary);
    color:#000;
}

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

.skill-card,
.timeline-card,
.project-card{
    position:relative;
}

.skill-card::before,
.timeline-card::before,
.project-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(
        135deg,
        rgba(37,99,235,.18),
        rgba(6,182,212,.05)
    );
    opacity:0;
    transition:.35s;
    pointer-events:none;
}

.skill-card:hover::before,
.timeline-card:hover::before,
.project-card:hover::before{
    opacity:1;
}

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

.project-card,
.skill-card,
.timeline-card{
    animation:fadeUp .8s ease both;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}
/* =======================================================
                    AWARDS
=======================================================*/

.awards-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:30px;
}

.award-card{
    background:rgba(255,255,255,.05);
    backdrop-filter:blur(20px);
    border-radius:var(--radius);
    padding:30px;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s;
    text-align:center;
    box-shadow:var(--shadow);
}

.award-card:hover{
    transform:translateY(-12px);
}

.award-card i{
    font-size:55px;
    color:#FFD700;
    margin-bottom:20px;
}

.award-card h3{
    margin-bottom:10px;
    color:#fff;
}

.award-card p{
    color:#94a3b8;
}

/* =======================================================
                CERTIFICATIONS
=======================================================*/

.certificate-grid{

    display:grid;

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

    gap:30px;

}

.certificate-card{

    padding:28px;

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

    border-radius:var(--radius);

    backdrop-filter:blur(20px);

    transition:.35s;

    box-shadow:var(--shadow);

}

.certificate-card:hover{

    transform:translateY(-10px);

}

.certificate-card h3{

    color:white;

    margin-bottom:12px;

}

.certificate-card span{

    color:#7dd3fc;

    display:block;

    margin-bottom:20px;

}

.certificate-card .viewCertificate,
.certificate-card a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 20px;

    border:none;

    border-radius:50px;

    background:var(--primary);

    color:white;

    text-decoration:none;

    font-weight:600;

    cursor:pointer;

    transition:transform .3s ease, box-shadow .3s ease, background .3s ease;

}

.certificate-card .viewCertificate:hover,
.certificate-card a:hover{

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(37,99,235,.2);

}


/* =======================================================
            PROFESSIONAL NETWORK
=======================================================*/

.network-grid{

    display:grid;

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

    gap:25px;

}

.network-card{

    padding:30px;

    border-radius:var(--radius);

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

    text-align:center;

    transition:.35s;

    box-shadow:var(--shadow);

}

.network-card:hover{

    transform:translateY(-10px);

}

.network-card i{

    font-size:45px;

    margin-bottom:18px;

    color:var(--secondary);

}

.network-card a{

    color:white;

    text-decoration:none;

    word-break:break-word;

}

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

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:60px;

}

#contactCards{

    display:grid;

    gap:20px;

}

.contact-card{

    padding:25px;

    border-radius:18px;

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

    display:flex;

    gap:20px;

    align-items:center;

    transition:.35s;

}

.contact-card:hover{

    transform:translateX(10px);

}

.contact-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:white;

}

.contact-card h4{

    margin-bottom:6px;

}

.contact-card a{

    color:#7dd3fc;

    text-decoration:none;

}

.contact-right{

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

    border-radius:var(--radius);

    padding:35px;

    box-shadow:var(--shadow);

}

.input-group{

    margin-bottom:20px;

}

input,

textarea{

    width:100%;

    padding:16px;

    border:none;

    outline:none;

    border-radius:12px;

    background:#1e293b;

    color:white;

    resize:none;

}

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

footer{

    padding:60px 0 20px;

    margin-top:80px;

    border-top:1px solid rgba(100, 14, 105, 0.874);
    border-top-width: 5px;

}

.footer-content{

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

}

.footer-links{

    display:flex;

    gap:25px;

}

.footer-links a{

    color:white;

    text-decoration:none;

}

.footer-social{

    display:flex;

    gap:20px;

}

.footer-social a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--dark-card);

    color:white;

}

.footer-social a:hover{

    background:var(--primary);

}

.copyright{

    margin-top:40px;

    text-align:center;

    color:#94a3b8;

}

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

#scrollTop{

    position:fixed;

    bottom:30px;

    right:30px;

    width:55px;

    height:55px;

    border:none;

    border-radius:50%;

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

    color:white;

    cursor:pointer;

    display:none;

    z-index:999;

}

/* =======================================================
                CERTIFICATE VIEWER
=======================================================*/

.certificate-viewer{
    position:fixed;
    inset:0;
    background:rgba(2,6,23,.82);
    display:none;
    justify-content:center;
    align-items:center;
    padding:20px;
    z-index:99999;
}

.certificate-viewer.active{
    display:flex;
}

.viewer-box{
    width:min(900px,100%);
    background:#111827;
    border-radius:24px;
    padding:24px;
    position:relative;
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}

.viewer-close{
    position:absolute;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:white;
    cursor:pointer;
    font-size:18px;
}

.viewer-head{
    text-align:center;
    margin-bottom:16px;
}

.viewer-head h2{
    color:white;
    margin-bottom:6px;
}

.viewer-head p{
    color:#7dd3fc;
}

.viewer-gallery{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:12px;
}

.viewer-nav{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:white;
    cursor:pointer;
}

.viewer-box img{
    width:100%;
    max-height:72vh;
    object-fit:contain;
    border-radius:16px;
    background:#020617;
    padding:8px;
}

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

@media(max-width:992px){

.hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
}

.hero-left,
.hero-right{
    width:100%;
}

.about-grid{
    grid-template-columns:1fr;
}

.contact-wrapper{
    grid-template-columns:1fr;
}

.timeline::before{
    left:15px;
}

.timeline-item{
    width:100%;
    left:0!important;
    padding-left:50px;
    padding-right:0;
}

.timeline-dot{
    left:6px!important;
    right:auto!important;
}

#navbar{
    position:fixed;
    top:80px;
    right:-100%;
    width:100%;
    max-width:320px;
    height:calc(100vh - 80px);
    background:#111827;
    display:flex;
    flex-direction:column;
    padding:30px 25px;
    transition:.4s;
    z-index:10000;
    box-shadow:-12px 0 40px rgba(0,0,0,.35);
    overflow-y:auto;
}

#navbar a{
    display:block;
    width:100%;
    margin-bottom:16px;
    font-size:1rem;
    padding:10px 0;
}

#navbar a:last-child{
    margin-bottom:0;
}

#navbar.active{
    right:0;
}

#menuBtn{
    display:flex;
}

}

@media(max-width:768px){

.hero h1{
    font-size:2.8rem;
}

.profile-card img{
    width:260px;
    height:260px;
}

.hero-buttons{
    flex-direction:column;
    align-items:center;
}

.social-links{
    justify-content:center;
}

.footer-content{
    text-align:center;
    justify-content:center;
}

.footer-links{
    flex-wrap:wrap;
    justify-content:center;
}

.section-title,
.about-text,
.contact-right,
.award-card,
.certificate-card,
.project-card,
.timeline-card,
.skill-card,
.network-card{
    margin-left:auto;
    margin-right:auto;
}

}

@media(max-width:480px){

.container{
    width:94%;
    max-width:100%;
}

.hero{
    padding-top:100px;
}

.hero-grid,
.about-grid,
.contact-wrapper,
.projects-grid,
.certificate-grid,
.network-grid,
.awards-grid{
    width:100%;
    grid-template-columns:1fr;
}

.hero-left,
.hero-right,
.about-text,
.contact-right,
.footer-content{
    width:100%;
}

.section-title{
    text-align:center;
}

.section-title h2{
    font-size:2rem;
}

.btn{
    width:100%;
    text-align:center;
}

.skill-card,
.project-card,
.timeline-card,
.award-card,
.certificate-card{
    padding:22px;
}

#navbar{
    width:100%;
    max-width:none;
    padding:30px 18px;
}

#navbar a{
    font-size:1rem;
}

.hero-buttons{
    align-items:center;
}

}

/* =======================================================
                LIGHT MODE FIXES
=======================================================*/

body.light .header{
    background:rgba(248,250,252,.95);
    border-bottom:1px solid rgba(15,23,42,.08);
}

body.light .header-actions button{
    background:#e2e8f0;
    color:var(--text-dark);
}

body.light #navbar{
    background:#ffffff;
    box-shadow:0 15px 35px rgba(15,23,42,.08);
}

body.light .badge{
    background:rgba(37,99,235,.12);
    color:#2563eb;
}

body.light .social-links a{
    background:#e2e8f0;
    color:#1e293b;
}

body.light .profile-card img{
    border-color:rgba(15,23,42,.08);
    box-shadow:0 20px 60px rgba(15,23,42,.1);
}

body.light .skill-card,
body.light .timeline-card,
body.light .project-card,
body.light .award-card,
body.light .certificate-card,
body.light .network-card,
body.light .contact-right,
body.light .contact-card,
body.light .viewer-box{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(15,23,42,.08);
    box-shadow:0 20px 50px rgba(15,23,42,.08);
    color:var(--text-dark);
}

body.light .section-title p,
body.light .hero p,
body.light .timeline-card li,
body.light .project-content p,
body.light .award-card p,
body.light .certificate-card span,
body.light .contact-card a,
body.light .contact-card h4,
body.light .footer-links a{
    color:var(--text-dark);
}

body.light .btn.secondary{
    border-color:#1e293b;
    color:#1e293b;
}

body.light .skill-card::before,
body.light .timeline-card::before,
body.light .project-card::before,
body.light .award-card::before,
body.light .certificate-card::before{
    background:linear-gradient(
        135deg,
        rgba(37,99,235,.08),
        rgba(6,182,212,.02)
    );
}

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

.skill-card,
.project-card,
.timeline-card,
.award-card,
.certificate-card,
.network-card,
.contact-right,
.contact-card{

backdrop-filter:blur(20px);

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

}

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

::selection{

background:var(--primary);

color:white;

}

/* =======================================================
                BODY TRANSITION
=======================================================*/

body{

transition:background .4s,color .4s;

}
/* ===============================
        Particles Background
================================ */

#particles-js{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    z-index:-1;

}

.hero{

    position:relative;

    overflow:hidden;

}
.visit-btn{

    background:linear-gradient(135deg,#2563eb,#06b6d4);

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.visit-btn:hover{

    transform:translateY(-4px);

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

}