/*==================================================

        SAURAV BEENA PORTFOLIO
        VERSION 0.5

==================================================*/



/*==================================================

                    ROOT

==================================================*/

:root{

    --background:#050505;

    --surface:rgba(255,255,255,.05);

    --surface-hover:rgba(255,255,255,.08);

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

    --text:#ffffff;

    --text-secondary:rgba(255,255,255,.72);

    --accent:#ffffff;

    --radius:28px;

    --transition:.35s ease;

    --max-width:1400px;

}



/*==================================================

                    RESET

==================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:var(--background);

    color:var(--text);

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

    overflow-x:hidden;

    position:relative;

}



/*==================================================

                EFFECTS CANVAS

==================================================*/

#effects-canvas{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    z-index:-1;

}



/*==================================================

                GLOBAL SECTIONS

==================================================*/

section{

    width:min(

        92%,

        var(--max-width)

    );

    margin:auto;

    padding:120px 0;

}



.section-title{

    margin-bottom:70px;

}



.section-title h2{

    font-size:4rem;

    font-weight:500;

    letter-spacing:-1px;

}



/*==================================================

                LINKS

==================================================*/

a{

    color:inherit;

    text-decoration:none;

}



/*==================================================

                BUTTONS

==================================================*/

button{

    border:none;

    outline:none;

    cursor:pointer;

    font-family:inherit;

}



/*==================================================

                IMAGES

==================================================*/

img{

    display:block;

    max-width:100%;

}



/*==================================================

                VIDEOS

==================================================*/

video{

    display:block;

    width:100%;

}



/*==================================================

                SCROLLBAR

==================================================*/

::-webkit-scrollbar{

    width:10px;

}



::-webkit-scrollbar-track{

    background:#090909;

}



::-webkit-scrollbar-thumb{

    background:#2d2d2d;

    border-radius:100px;

}



::-webkit-scrollbar-thumb:hover{

    background:#555;

}



/*==================================================

            TEXT SELECTION

==================================================*/

::selection{

    background:white;

    color:black;

}



/*==================================================

                REVEAL

==================================================*/

.reveal{

    opacity:1;

    transform:translateY(50px);

    transition:

    opacity .8s ease,

    transform .8s ease;

}



.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==================================================

                LOADING SCREEN

==================================================*/

#loading-screen{

    position:fixed;

    inset:0;

    background:#050505;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:30px;

    z-index:9999;

    transition:opacity .8s ease;

}



.loader-circle{

    width:60px;

    height:60px;

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

    border-top:3px solid white;

    border-radius:50%;

    animation:spin 1s linear infinite;

}



#loading-screen h2{

    font-size:1rem;

    font-weight:400;

    letter-spacing:4px;

    text-transform:uppercase;

    color:rgba(255,255,255,.75);

}





/*==================================================

                    HERO

==================================================*/

.hero{

    width:100%;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

}



.hero-content{

    width:min(92%,1400px);

    margin:auto;

}



.hi{

    font-size:4rem;

    font-weight:500;

    opacity:0;

    animation:fadeIn .9s ease forwards;

}



.name{

    font-size:7rem;

    font-weight:600;

    line-height:1.05;

    letter-spacing:-3px;

    margin-top:10px;

    opacity:0;

    transform:translateY(50px);

    animation:slideUp 1s ease forwards;

    animation-delay:.5s;

}



.name span{

    color:white;

}



.hero-subtitle{

    margin-top:25px;

    font-size:1.2rem;

    color:rgba(255,255,255,.72);

    letter-spacing:1px;

    opacity:0;

    transform:translateY(30px);

    animation:slideUp 1s ease forwards;

    animation-delay:1s;

}





/*==================================================

            SCROLL INDICATOR

==================================================*/

.scroll-indicator{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:rgba(255,255,255,.5);

    font-size:.85rem;

    letter-spacing:3px;

    text-transform:uppercase;

}



.scroll-indicator span{

    font-size:1.3rem;

    animation:floatArrow 2s ease-in-out infinite;

}





/*==================================================

                HERO BUTTON

==================================================*/

.hero-button{

    margin-top:50px;

}



.hero-button button{

    padding:16px 42px;

    border-radius:100px;

    background:white;

    color:black;

    font-size:1rem;

    font-weight:600;

    transition:all .35s ease;

}



.hero-button button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 40px rgba(255,255,255,.12);

}





/*==================================================

                ANIMATIONS

==================================================*/

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}



@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes floatArrow{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================

                    SERVICES

==================================================*/

.services{

    min-height:100vh;

}



.services-container{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:70px;

    align-items:flex-start;

}



/*==================================================

                SERVICES MENU

==================================================*/

.services-left{

    position:sticky;

    top:120px;

}



#services-menu{

    display:flex;

    flex-direction:column;

    gap:18px;

}



.service-btn{

    position:relative;

    background:none;

    color:rgba(255,255,255,.45);

    text-align:left;

    padding:16px 0 16px 24px;

    font-size:1.1rem;

    font-weight:400;

    transition:all .35s ease;

}



.service-btn:hover{

    color:white;

    transform:translateX(8px);

}



.service-btn.active{

    color:white;

}



.service-btn::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:4px;

    height:0;

    border-radius:100px;

    background:white;

    transition:.35s ease;

}



.service-btn.active::before{

    height:34px;

}





/*==================================================

                GLASS CARD

==================================================*/

.glass-card{

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

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

    border-radius:32px;

    backdrop-filter:blur(20px);

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

    overflow:hidden;

    transition:

    transform .45s ease,

    border-color .45s ease,

    box-shadow .45s ease;

}



.glass-card:hover{

    border-color:rgba(255,255,255,.22);

    box-shadow:

    0 25px 80px rgba(0,0,0,.45);

}





/*==================================================

            SERVICE CONTENT

==================================================*/

.service-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:45px;

    align-items:center;

    padding:45px;

}



.service-text{

    display:flex;

    flex-direction:column;

    gap:24px;

}



#service-title{

    font-size:2.8rem;

    font-weight:600;

}



#service-description{

    font-size:1.05rem;

    line-height:1.9;

    color:rgba(255,255,255,.72);

}





/*==================================================

                VIDEO

==================================================*/

.service-video{

    display:flex;

    justify-content:center;

    align-items:center;

}



#service-video{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:20px;

    background:#111;

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

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;

}



#service-video:hover{

    transform:scale(1.02);

    border-color:rgba(255,255,255,.22);

    box-shadow:

    0 15px 50px rgba(0,0,0,.35);

}





/*==================================================

                MINI CONTACT

==================================================*/

.mini-contact{

    padding-top:80px;

}



.mini-contact-card{

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

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

    border-radius:32px;

    padding:70px;

    text-align:center;

    backdrop-filter:blur(18px);

}



.mini-contact-card h2{

    font-size:2.6rem;

    margin-bottom:18px;

}



.mini-contact-card p{

    color:rgba(255,255,255,.72);

    margin-bottom:35px;

}



#contact-button{

    padding:16px 42px;

    border-radius:100px;

    background:white;

    color:black;

    font-weight:600;

    transition:.35s ease;

}



#contact-button:hover{

    transform:translateY(-4px);

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

                RESUME CTA

==================================================*/

.resume-cta{

    padding:120px 8%;

}

.resume-card{

    max-width:900px;

    margin:0 auto;

    padding:70px 60px;

    text-align:center;

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

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

    border-radius:30px;

}

.resume-card h2{

    font-size:2rem;

    font-weight:700;

    margin-bottom:20px;

}

.resume-card p{

    max-width:650px;

    margin:0 auto 42px;

    color:var(--text-secondary);

    line-height:1.8;

    font-size:1rem;

}

.resume-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    background:#ffffff;

    color:#111111;

    text-decoration:none;

    font-size:1rem;

    font-weight:600;

    border:none;

    border-radius:999px;

    cursor:pointer;

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

    box-shadow:
        0 0 18px rgba(255,255,255,.18),
        0 0 35px rgba(255,255,255,.08);

}

.resume-button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 24px rgba(255,255,255,.28),
        0 0 45px rgba(255,255,255,.12);

}

.resume-button:active{

    transform:translateY(0);

}

/*==================================================

                EXPERIENCE

==================================================*/

.experience{

    min-height:90vh;

}



.experience-card{

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

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

    border-radius:32px;

    backdrop-filter:blur(18px);

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

    padding:55px;

}



#typewriter{

    font-size:1.18rem;

    line-height:2.1;

    color:rgba(255,255,255,.72);

    min-height:340px;

    white-space:pre-line;

}





/*==================================================

            SOFTWARE EXPERTISE

==================================================*/

.software{

    min-height:100vh;

}



.software-grid{

    display:grid;

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

    gap:28px;

}





/*==================================================

            SOFTWARE CARD

==================================================*/

.software-card{

    aspect-ratio:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:20px;

    padding:25px;

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

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

    border-radius:24px;

    backdrop-filter:blur(18px);

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

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;

}



.software-card:hover{

    transform:

    translateY(-10px)

    scale(1.02);

    border-color:

    rgba(255,255,255,.22);

    box-shadow:

    0 20px 60px

    rgba(0,0,0,.35);

}





/*==================================================

            SOFTWARE ICON

==================================================*/

.software-card img{

    width:68px;

    height:68px;

    object-fit:contain;

}



.software-card span{

    font-size:.95rem;

    text-align:center;

    color:rgba(255,255,255,.75);

}





/*==================================================

            CARD PLACEHOLDER

==================================================*/

.software-placeholder{

    width:68px;

    height:68px;

    border-radius:16px;

    background:

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

    border:

    1px dashed

    rgba(255,255,255,.18);

}





/*==================================================

            EXPERIENCE REVEAL

==================================================*/

.experience-card,

.software-card{

    opacity:1;

    transform:translateY(40px);

}



.experience-card.active,

.software-card.active{

    opacity:1;

    transform:translateY(0);

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

                LET'S CONNECT

==================================================*/

.contact{

    min-height:100vh;

}



.contact-grid{

    display:grid;

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

    gap:30px;

}





/*==================================================

                CONTACT CARD

==================================================*/

.contact-card{

    display:flex;

    align-items:center;

    gap:25px;

    padding:30px;

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

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

    border-radius:28px;

    backdrop-filter:blur(18px);

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

    transition:

    transform .35s ease,

    border-color .35s ease,

    box-shadow .35s ease;

}



.contact-card:hover{

    transform:

    translateY(-8px)

    scale(1.01);

    border-color:

    rgba(255,255,255,.22);

    box-shadow:

    0 18px 55px

    rgba(0,0,0,.35);

}





/*==================================================

                CONTACT ICON

==================================================*/

.contact-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:

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

    display:flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

}



.contact-icon img{

    width:42px;

    height:42px;

    object-fit:contain;

}





/*==================================================

                CONTACT INFO

==================================================*/

.contact-info{

    flex:1;

}



.contact-info h3{

    font-size:1.2rem;

    margin-bottom:8px;

}



.contact-text{

    font-size:.92rem;

    color:rgba(255,255,255,.72);

    word-break:break-word;

    margin-bottom:16px;

}





/*==================================================

            CONTACT BUTTONS

==================================================*/

.contact-buttons{

    display:flex;

    gap:12px;

}



.contact-buttons button{

    padding:10px 18px;

    border-radius:100px;

    background:white;

    color:black;

    font-size:.9rem;

    font-weight:600;

    transition:.3s ease;

}



.contact-buttons button:hover{

    transform:translateY(-3px);

}





/*==================================================

                    FOOTER

==================================================*/

footer{

    width:100%;

    margin-top:80px;

    padding:45px 0;

    border-top:

    1px solid

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

}



.footer-content{

    width:min(

        92%,

        var(--max-width)

    );

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}



.footer-content p{

    color:rgba(255,255,255,.45);

    font-size:.95rem;

    letter-spacing:.5px;

}





/*==================================================

            GENERAL HOVER

==================================================*/

.glass-card,

.mini-contact-card,

.experience-card,

.software-card,

.contact-card{

    will-change:

    transform;

}



button{

    transition:

    transform .3s ease,

    box-shadow .3s ease;

}



button:active{

    transform:scale(.98);


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

                RESPONSIVE DESIGN

==================================================*/


/*==================================================

                TABLETS

==================================================*/


@media(max-width:1200px){

    section{

        width:94%;

    }

    .services-container{

        grid-template-columns:1fr;

        gap:45px;

    }

    .services-left{

        position:static;

    }

    #services-menu{

        flex-direction:row;

        flex-wrap:wrap;

        gap:12px;

    }

    .service-btn{

        padding:12px 20px;

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

        border-radius:100px;

    }

    .service-btn::before{

        display:none;

    }

    .service-content{

        grid-template-columns:1fr;

    }

    .software-grid{

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

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

}





/*==================================================

                MOBILE

==================================================*/

@media(max-width:768px){

    section{

        width:92%;

        padding:80px 0;

    }



    .section-title h2{

        font-size:2.4rem;

        text-align:center;

    }



    .hero{

        height:100svh;

        text-align:center;

    }



    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:center;

    }



    .hi{

        font-size:2.3rem;

    }



    .name{

        font-size:3.4rem;

        letter-spacing:-1px;

    }



    .hero-subtitle{

        font-size:1rem;

        max-width:320px;

    }



    .service-content{

        padding:28px;

        gap:28px;

    }



    #service-title{

        font-size:2rem;

    }



    #service-description{

        font-size:.95rem;

        line-height:1.8;

    }



    #service-video{

        border-radius:16px;

    }



    .mini-contact-card{

        padding:45px 25px;

    }



    .mini-contact-card h2{

        font-size:2rem;

    }



    .experience-card{

        padding:35px 25px;

    }



    #typewriter{

        min-height:auto;

        font-size:1rem;

        line-height:1.9;

    }



    .software-grid{

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

        gap:18px;

    }



    .software-card{

        padding:20px;

    }



    .software-card img{

        width:52px;

        height:52px;

    }



    .contact-card{

        flex-direction:column;

        align-items:flex-start;

        padding:24px;

    }



    .contact-buttons{

        width:100%;

        display:flex;

    }



    .contact-buttons button{

        flex:1;

    }



    footer{

        margin-top:50px;

        text-align:center;

    }

}





/*==================================================

                SMALL PHONES

==================================================*/

@media(max-width:480px){

    .name{

        font-size:2.7rem;

    }

    .hi{

        font-size:2rem;

    }

    .section-title h2{

        font-size:2rem;

    }

    .glass-card{

        border-radius:22px;

    }

    .mini-contact-card{

        border-radius:22px;

    }

    .experience-card{

        border-radius:22px;

    }

    .software-card{

        border-radius:20px;

    }

    .contact-card{

        border-radius:22px;

    }

}