/*-- CSS Font --*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:wght@400;500;600;700&display=swap');


/*-- VARIABLES-- */
/* 
:root{
    
    --body-color : rgb(250 , 250 , 250) ;
    --color-white  : rgb(255, 255, 255);

    --text-color-second : rgb(68, 68, 68) ;
    --text-color-third : rgb(30, 159, 171 ) ;
    
    --first-color : rgb(110 , 87, 224);
    --first-color-hover : rgb(40,91,212);

    --second-color : rgb(0, 201, 255);
    --third-color : rgb(192, 166,49);
    --first-shadow-color : rgba(0,0,0,0.1);

} */

body.light{
    --body-color : rgb(250 , 250 , 250) ;
    background: url(white_bg.avif) no-repeat center center fixed;
    background-size: cover;
    --color-white  : rgb(255, 255, 255);

    --text-color-second : rgb(68, 68, 68) ;
    --text-color-third : rgb(30, 159, 171 ) ;
    
    --first-color : rgb(110 , 87, 224);
    --first-color-hover : rgb(40,91,212);

    --second-color : rgb(0, 201, 255);
    --third-color : rgb(192, 166,49);
    --first-shadow-color : rgba(0,0,0,0.1);
}

body.dark{

    color : white;
        
    --body-color : rgb(4, 0, 0) ;
    background: url(dark_bg_2.avif) no-repeat center center fixed;
    background-size: cover;
    
   
    --color-white  : rgb(10,1,1);

    --text-color-second : rgb(184, 193, 186) ;
    --text-color-third : rgb(30, 159, 171 ) ;
    
    --first-color : rgb(110 , 87, 224);
    --first-color-hover : rgb(40,91,212);

    --second-color : rgb(0, 201, 255);
    --third-color : rgb(192, 166,49);
    --first-shadow-color : rgba(61, 228, 240, 0.755);
}

#theme-button{
    background-color: black;
    height : 40px ; 
    width : 40px ;
    border-radius: 50%;
    border : none ;
    margin-top : 1.3rem ;
    margin-left : 2rem ;
}

.nav-logo p{
    font-size : 30px;
}


/*---   Base -----*/

*{
    margin : 0 ;
    padding : 0; 
    box-sizing  : border-box ;
    font-family : 'Poppins' ,sans-serif;
}


/*--Smooth Scroll  --- */

html{
    scroll-behavior: smooth;
}

/*--ScrollBar --*/
::-webkit-scrollbar{
    width :10px ;
    border-radius : 25px ;
}

::-webkit-scrollbar-track{
    background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb{
    background : #ccc ;
    border-radius: 30px;
}

::-webkit-scrollbar-thumb:hover{
    background-color: #bbb;
}


/* Reusable CSS*/

/*Global Button Design*/

.btn{
    font-weight: 500;
    padding : 12px 20px;
    background : #efefef ;
    border : none;
    border-radius : 10px; 
    cursor:  pointer;
    transition: 0.4s;
}

.btn>i{
    margin-left : 10px;
}

.btn:hover{
    background-color: var(--second-color) ;
    color : var(--color-white);
}

/*Global Icon Design*/

i{
    font-size: 16px;
}

/*Base*/ 

body{
    background-color: var(--body-color);
}


.container{
    width : 100% ; 
    position : relative ;
}

/*Navigation Bar*/

nav{
    position : fixed ;
    display : flex ; 
    justify-content: space-between;
    width : 100% ; 
    height : 90px ;
    line-height: 90px;
    background-color: var(--body-color);
    padding-inline: 9vw;
    transition : .3s ;
    z-index : 100 ;
}

.nav-logo{
        position : relative ;
}

.nav-logo p{
    font-size : 2rem;
    font-weight: 600;
    color: var(--text-color-third);
}

.nav-logo span{
    font-size : 40px;
    font-weight: 600;
    position : absolute ;
    top : -2px; 
    right : -20px;
}

.nav-menu, .nav_menu_list{
    display : flex ;
    justify-content: space-evenly;
}

.nav-menu .nav_list{
    list-style: none;
    position : relative ;
}

.nav-link {
    text-decoration: none;
    text-decoration : none; 
    padding-inline : 15px; 
    color : var(--text-color-second);
    font-weight: 500;
    padding-inline : 15px;
    margin-inline : 20px ;

}

.nav-menu-button {
    display : none ;
}

.nav-menu-button i{
    margin-left : 3rem;
    font-size : 28px ;
    cursor : pointer ;
}




/*Wrapper Design*/

.wrapper{
    padding-inline :10vw;
    
}



/*Featured Box*/

.featured-box{
    position : relative ; 
    display : flex ;
    height : 100vh ;
    min-height: 700px;

}

/*Featured Text Box*/

.featured-text{
    position : relative ;
    display : flex ;
    justify-content: center;
    align-items : center;
    min-height : 80vh ;
    flex-direction: column; 
    width : 53% ;
    padding-left: 20px;   
}


/* .featured-text-info{
    position: relative;
    padding-left: 10vw;
} */



.featured-text-card{
    position : relative; 
    padding-right : 24rem;
}

.featured-text-card span{
    background: var(--third-color);
    color : var(--color-white) ;
    padding : 3px 8px ;
    font-size : 15px ;
    border-radius : 5px;
}


.featured-name{
    font-size : 46px; 
    font-weight: 600;
    margin-block: 20px;
    color : var(--text-color-second) ;
}

.typedText{
    text-transform: capitalize;
    color : var(--text-color-third) ;
}

.featured-text-info{
    font-size : 15px; 
    margin-bottom :30px ;
    color : var(--text-color-second);
}

.featured-text-btn{
    display : flex ;
    gap : 20px;
    
    padding-right : 17rem;

}

.featured-text-btn>.blue-btn{
    background : var(--first-color);
    color :var(--color-white);
}


.featured-text-btn>.blue-btn:hover{
    background-color: var(--first-color) ;

}


.social-icons{
    display :flex;
    margin-top : 5em ;
    gap : 30px;
}

.icon{
    display:flex;
    justify-content: center;
    align-items : center ;
    width : 40px ;
    height : 40px ;
    border-radius : 50% ;
    /* box-shadow : 0px 2px 5px 0px rgba(0,0,0,0.1); */
    box-shadow : 0px 2px 5px 0px var(--first-shadow-color);
    cursor : pointer;
}

.icon:hover{
    color : var(--first-color);
}



.resume-download{
    text-decoration: none;
    color : black;
}

/*Featured Image Box*/
.featured-image{
    display : flex ;
    justify-content: right;
    align-content : center;
    min-height: 80vh;
    width : 50% ;
}

.image{
    margin : auto 0 ;
    width: 400px;
    height : 400px;
    border-radius :55%  45% 55% 45% ;
    overflow: hidden;
    animation: imgFloat 6s ease-in-out infinite;
}

.image img{
    width: 400px;
    height :400px;
    object-fit: cover;
}



.project-container{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap : 20px ;
    flex-wrap: wrap;
    
}

.project-box{
    position :relative ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width : 30% ;
    height : 500px;
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
    
}






.project-box>i{
    font-size : 30px ;
    color :#00B5E7 ;
    margin-bottom: 25px;
}

.project-box label{
    margin-bottom : 1.5rem;
}


.project-image{
    height : 250px;
    width : 355px;    
    
    position: relative;

    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("");
    

}

.project-image img{
    border-radius: 20px;
    height : 200px ;
    width : 330px;
    border-radius: 20px;
    object-fit: cover;
    object-position: center
}

.project-location i{
   margin-left : 0.6rem;
   font-size: 20px;
}


/*Certification*/


.certifications-container{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap : 10px ;
    flex-wrap: wrap;
    
}

.certifications-box{
    position :relative ;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width : 30% ;
    height : 400px;
    background: var(--color-white);
    border-radius: 20px;
    box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
    
}



.certifications-box>i{
    font-size : 30px ;
    color :#00B5E7 ;
    margin-bottom: 25px;
}

.certifications-box label{
    margin-bottom : 1.5rem;
}


.certifications-image{
    height : 250px;
    width : 355px;    
    
    position: relative;

    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("");
    

}

.certifications-image img{
    border-radius: 20px;
    height : 250px ;
    width : 330px;
    border-radius: 20px;
    object-fit: cover;
    object-position: center
}

.certifications-box p{
    margin-bottom : 1rem;
}


@keyframes imgFloat{
    50%{
        transform: translateY(40px);
        border-radius :45% 55% 45% 55%;
    }
}

.scroll-btn{
    position: absolute;
    bottom : 0;
    left : 50% ;
    translate : -50% ;
    display: flex;
    justify-content: center;
    align-items: center;
    width : 150px;
    height : 50px;
    gap :5px; 
    text-decoration : none ;
    color : var(--text-color-second);
    background : var(--color-white);
    border-radius : 30px ;
    /* box-shadow : 0 2px 5px 0 rgba(0, 0, 0 , 0.25) ; */
    box-shadow : 0 2px 5px 0 var(--first-shadow-color)
}

.scroll-btn i{
    font-size: 20px;
}


.row{
    display: flex;
    justify-content: space-between;
    width : 100% ;  
    gap : 50px;
}

.col{
    display: flex;
    width : 50%;
}

.section {
    padding-block: 5em;
}


.top-header{
    text-align : center ;
    margin-bottom : 5em ;
}

.top-header h1{
    font-weight : 600 ;
    color : var(--text-color-second);
    margin-bottom: 10px;
}

.top-header span{
    color :#999;
}

h3{
    font-size : 20px;
    font-weight: 600;
    color : var(--text-color-second);
    margin-bottom: 15px;
}

.about-info{
    position :relative ;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-block: 30px 70px;
    padding-inline :20px;
    width : 100%;
    background : var(--color-white);
    box-shadow : 1px 8px 10px 2px  var(--first-shadow-color);
    border-radius : 20px;
}

.about-info p{
    text-align : center;
    font-size : 15px ;
    color : #777;
}

.about-btn button{
    position : absolute ;
    right : 20px;
    bottom :  20px;
    background :  var(--first-color);
    color : var(--color-white);
    border-radius : 30px;
}

.about-btn button:hover{
    background: var(--first-color-hover);
}


.skills-box{
    margin : 10px ;
}

.skills-header{
    margin-bottom : 30px ;
}

.skills-list{
    display: flex;
    flex-wrap : wrap ;
    gap : 5px;
}

.skills-list .span{
    font-size : 14px;
    background-color: var(--first-color);
    color : var(--color-white);
    padding :2px 10px ;
    border-radius: 5px;
}





.contact-info{
    position : relative ;
    display : flex ;
    flex-direction: column;
    justify-content: center;
    align-items : center;
    padding :20px 30px;
    width : 100% ;
    height :315px ;
    background: var(--second-color);
    border-radius : 10px;
    box-shadow: 1px 8px 10px 2px var(--first-shadow-color);
    overflow: hidden;
}

.contact-info>h2{
    color : var(--color-white);
    margin-bottom :20px;
}

.contact-info>p{
    display : flex ;
    align-items : center ;
    gap : 10px ;
    color : var(--color-white);
    margin-block : 5px ;
}

.contact-info::after{
    background-color: var(--color-white);
}


.form-control {
    display: flex;
    flex-direction: column;
    gap : 10px ;
    width : 100% ;  
}

.form-inputs{
    display: flex;
    gap : 10px ;
    width : 100% ;
    margin-bottom : 0.4rem;
    
}

.input-field{
    width : 50%;
    height : 55px;
    background: transparent;
    border : 2px solid #AAA;
    padding-inline :20px;
    outline: none;
    border-radius: 10px;
}

textarea{
    width: 100%;
    height: 250px;
    background: transparent;
    border: 2px soild #AAA;
    border-radius: 10px;
    padding : 15px 20px ;

    outline: none;
}


/* -- MEDIA QUERY == 1024px / RESPONSIVE ---*/

@media only screen and (max-width : 1024px)
{
    .featured-text{
        padding : 0 ;
    }

    .image , .image img{
        width : 320px ;
        height : 320px;
    }
}



@media only screen and (max-width : 1400px)
{
    .project-image img{
        height : 180px ;
        width : 290px;
    }
}

@media only screen and (max-width : 1240px)
{
    .project-image img{
        height : 150px ;
        width : 250px;
    }
}






/* --- MEDIA QUERY == 900px Responsive --- */


@media only screen and (max-width : 1024px)
{
    .nav-button{
        display: none;
    }

    .nav-menu.responsive{
       left : 0 ;
    }

    .nav-menu{
        position : fixed ;
        top : 80px;
        left :-100% ;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background : rgba(255,255,255, 0.7);
        backdrop-filter: blur(20px);
        width : 100% ;
        min-height : 450px;
        height :90vh ;
        transition: .3s;
    }

    .nav_menu_list{
        flex-direction: column;
    }

    .nav-menu-btn{
        display : flex;
        align-items : center ;
        justify-content : center;
    }

    .featured-box{
        flex-direction: column;
        justify-content: center;
        height :100vh;
    }

    .featured-text{
        position : absolute ;
        top : 2rem;
       
    }

    .featured-text{
        width : 100% ;
        justify-content: center;
        align-content: flex-start;
        min-height: 60vh;
    }

    .social-icons{
        margin-top : 2em;
    }
}


/* -- Making Navigation Bar Responsive */ 

@media only screen and (max-width :900px){
    .nav-button{
        display : none;
    }

    .nav_menu.responsive{
        left : 0 ;
    }

    .nav-menu{
        position : fixed ; 
        top : 80px ; 
        left : -100% ;
        flex-direction : column;
        align-items : center ; 
        background : rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width : 100% ;
        min-height : 450px;
        height : 90vh ;
        transition :  0.3s ;
    }


    .nav_menu_list{
        flex-direction: column;
    }

    .nav-menu-button{
        display : flex ; 
        justify-content: center;
        align-items: center;
    }

    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:50px;
    }

    .col{
        display: flex;
        justify-content: center;
        width : 100% ;
    }

    .about-info{
        width : 100% ;
    }

    .project-container{
        justify-content: center;
    }

    .project-box{
        width : 80% ;
    }

    .certifications-container{
        justify-content: center;
    }

    .certifications-box{
        width : 80% ;
    }

    .featured-text{
        position : absolute ;
        top : 2rem;
    }

    .featured-text-btn{
        margin-left : 16rem;
    }

    #hiremebtn{
        height: 2rem;
        width : 5rem;
    }

    .featured-image{
        
        width : 100%;   
        display: flex;
        justify-content: center;
        /* align-items: center; */
        position : absolute ;
        top : 5rem;
        
        
    }

    .featured-image .image{
        display: flex;
        align-items: center;
        margin-bottom : 1rem; 
        
    }

    .featured-text-card{
        display: flex;
        justify-content: center;
        margin-left: 20rem;
        
    }


    .featured-text-card span{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }

    
}


@media only screen and (max-width :600px){
    .nav-button{
        display : none;
    }

    .nav_menu.responsive{
        left : 0 ;
    }

    .nav-menu{
        position : fixed ; 
        top : 80px ; 
        left : -100% ;
        flex-direction : column;
        align-items : center ; 
        background : rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width : 100% ;
        min-height : 450px;
        height : 90vh ;
        transition :  0.3s ;
    }


    .nav_menu_list{
        flex-direction: column;
    }

    .nav-menu-button{
        display : flex ; 
        justify-content: center;
        align-items: center;
    }

    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:50px;
    }

    .col{
        display: flex;
        justify-content: center;
        width : 100% ;
    }

    .about-info{
        width : 100% ;
    }

    .project-container{
        justify-content: center;
    }

    .project-box{
        width : 80% ;
    }

    .project-image img{
        width : 300px;
        height : 200px;
    }

    .certifications-container{
        display: flex;
        justify-content: center;
    }

    .certifications-image img{
        width : 300px;
        height : 200px;
    }

    .certifications-box{
        width : 80% ;
    }

    .featured-text{
        position : absolute ;
        top : 2rem;
    }

    .featured-text-btn{
        margin-left : 16rem;
    }

    #hiremebtn{
        height: 4.2rem;
        width : 5rem;
    }

    .featured-image{
        
        width : 100%;   
        display: flex;
        justify-content: center;
        /* align-items: center; */
        position : absolute ;
        top : 5rem;
        
        
    }

    .featured-image .image{
        display: flex;
        align-items: center;
        margin-bottom : 1rem; 
        
    }

    .featured-text-card{
        display: flex;
        justify-content: center;
        margin-left: 20rem;
        
    }


    .featured-text-card span{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }

    
}


@media only screen and (max-width :480px){

    html, body {
        overflow-x: hidden;
        width: 100%;
    }


    .nav-button{
        display : none;
    }

    .nav_menu.responsive{
        left : 0 ;
    }

    .nav-menu{
        position : fixed ; 
        top : 80px ; 
        left : -100% ;
        flex-direction : column;
        align-items : center ; 
        background : rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width : 100% ;
        min-height : 450px;
        height : 90vh ;
        transition :  0.3s ;
    }


    .nav_menu_list{
        flex-direction: column;
    }

    .nav-menu-button{
        display : flex ; 
        justify-content: center;
        align-items: center;
    }

    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:50px;
    }

    .col{
        display: flex;
        justify-content: center;
        width : 100% ;
    }

    .about-info{
        width : 100% ;
    }

    .project-container{
        justify-content: center;
    }

    .project-box{
        width : 80% ;
    }

    .project-image img{
        width : 270px;
        height : 160px;
    }

    .image{
        height : 250px;
        width : 250px;
        display: flex;
        justify-content: center;
    }

    .certifications-container{
        display: flex;
        justify-content: center;
    }

    .certifications-image img{
        width : 270px;
        height : 160px;
    }

    .certifications-box{
        display: flex;
        justify-content: center;
        width : 80% ;
    }

    .featured-text{
        position : absolute ;
        top : 2rem;
        height : 40vh;
    }

    .featured-name p{
        font-size: 30px;
    }
    .featured-text-info p{
        font-size: 15px;
    }

    .featured-text-btn{
        margin-left : 16rem;
    }

    #hiremebtn{
        height: 4.2rem;
        width : 8rem;
    }

    .featured-image{
        
        width : 100%;   
        display: flex;
        justify-content: center;
        /* align-items: center; */
        position : absolute ;
        top : 5rem;

    }

    .featured-image .image{
        display: flex;
        align-items: center;
        margin-bottom : 1rem; 
        
    }

    .featured-text-card{
        display: flex;
        justify-content: center;
        margin-left: 20rem;
        
    }


    .featured-text-card span{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }

    
}



@media only screen and (max-width :445px){

    html, body {
        overflow-x: hidden;
        width: 100%;
    }


    .nav-button{
        display : none;
    }

    .nav_menu.responsive{
        left : 0 ;
    }

    .nav-menu{
        position : fixed ; 
        top : 80px ; 
        left : -100% ;
        flex-direction : column;
        align-items : center ; 
        background : rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width : 100% ;
        min-height : 450px;
        height : 90vh ;
        transition :  0.3s ;
    }


    .nav_menu_list{
        flex-direction: column;
    }

    .nav-menu-button{
        display : flex ; 
        justify-content: center;
        align-items: center;
    }

    .row{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap:50px;
    }

    .col{
        display: flex;
        justify-content: center;
        width : 100% ;
    }

    .about-info{
        width : 100% ;
    }

    .project-container{
        justify-content: center;
    }

    .project-box{
        width : 80% ;
    }

    .project-image img{
        width : 240px;
        height : 130px;
    }

    .image{
        height : 250px;
        width : 250px;
        display: flex;
        justify-content: center;
    }

    .certifications-container{
        display: flex;
        justify-content: center;
    }

    .certifications-image img{
        width : 255px;
        height : 165px;
    }

    .certifications-box{
        display: flex;
        justify-content: center;
        width : 80% ;
    }

    .featured-text{
        position : absolute ;
        top : 2rem;
        height : 40vh;
        z-index: 100;
    }

    .featured-name p{
        font-size: 30px;
    }
    .featured-text-info p{
        font-size: 15px;
    }

    .featured-text-btn{
        margin-left : 16rem;
    }

    #hiremebtn{
        height: 4.2rem;
        width : 8rem;
    }

    .featured-image{
        
        width : 100%;   
        display: flex;
        justify-content: center;
        /* align-items: center; */
        position : absolute ;
        top : 5rem;

    }

    .featured-image .image{
        display: flex;
        align-items: center;
        margin-bottom : 1rem; 
        
    }

    .featured-text-card{
        display: flex;
        justify-content: center;
        margin-left: 20rem;
        
    }


    .featured-text-card span{
        display: flex;
        justify-content: center;
        align-items: center;
        width:100%;
    }

    
}