:root{
    --title-color : rgb(241, 241, 241);
     --edu_titlecolor : black;
    --header-bg : rgb(44, 44, 86);
    --nav-color : rgb(218, 218, 218);
    --nav-hover : rgb(103, 75, 244);
    --theme-btn-color : rgb(255, 255, 255);
    --about-bg : rgb(138, 138, 192);
    --hello-color : black;
    --name-color : black;
    --pro-color : black;
    --border-color : black;
    --btn-bg : rgb(164, 164, 248);
    --btn-color : black;
    --edu-cart-bg : #6189ff;
    --edu-icon : black;
    --edu-cont-color : black;
    --skill-about-bg : rgb(210 215 197);
    --social-icon-color : rgb(149, 149, 149);
    --skill-dec-color : black;
    --cv-ok-bg : rgb(189, 0, 0);
    --scroll-bg : rgb(249, 249, 249);
}

[data-theme="dark"]{
     --title-color : rgb(241, 241, 241);
     --edu_titlecolor : rgb(248, 248, 248);
    --header-bg : rgb(0, 0, 0);
    --nav-color : rgb(218, 218, 218);
    --nav-hover : rgb(103, 75, 244);
    --theme-btn-color : rgb(255, 255, 255);
    --about-bg : rgb(36, 36, 36);
    --hello-color : rgb(220, 220, 220);
    --name-color : rgb(255, 255, 255);
    --pro-color : rgb(255, 255, 255);
    --border-color : rgb(246, 246, 246);
    --btn-bg : rgb(39, 39, 55);
    --btn-color : rgb(183, 183, 183);
    --edu-cart-bg : #27292c;
    --edu-icon : rgb(206, 206, 206);
    --edu-cont-color : rgb(234, 233, 233);
    --skill-about-bg : rgb(48, 51, 41);
    --social-icon-color : rgb(149, 149, 149);
    --skill-dec-color : rgb(246, 246, 246);
    --cv-ok-bg : rgb(189, 0, 0);
}

*{
    margin : 0;
    padding : 0;
    box-sizing : border-box;
}
body{
    height : 100vh;
    width : 100%;
}

/* header */
.header{
    height : 10%;
    width : 100%;
    background-color : var(--header-bg);
    display : flex;
    justify-content : space-between;
    align-items : center;
    padding : 1.4rem;
    position : fixed;
    z-index : 10;
}
.header_title{
    color : var(--title-color);
    font-size : 1.7rem;
    font-weight : 600;
}
.navs{
    display : flex;
    justify-content : center;
    align-items : center;
    list-style : none;
    gap : 3rem;
}
.navTag{
    color : var(--nav-color);
    text-decoration : none;
    font-size : 1.4rem;
    transition : color 0.2s ease-in;
}
.nav a:hover{
    color : var(--nav-hover);
}

.theme_btn,.menu_icon{
    color : var(--theme-btn-color);
    font-size : 1.7rem; 
     transition : color 0.2s ease-in;
     cursor : pointer;
}

.theme_btn:hover{
    color : var(--nav-hover);
}

.menu_btn_box{
    display : none;
}


/* about section */
.about{
    height : 100vh;
    width : 100%;
    background-color : var(--about-bg);
    display : flex;
    justify-content : center;
    align-items : center;
    gap : 2.5rem;
    z-index : 5;
    position : relative;
    overflow : hidden;
}

.image_box{
    height : 50%;
    width : 30%;
    animation : imageani 1s linear 1;
}

@keyframes imageani{
    from{
        transform : translateX(-100%);
        opacity : 0;
    }
    to{
       transform : translateX(0);
       opacity : 1;
    }
}
.about_image{
    height : 100%;
    width : 100%;
}

.about_box{
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : left;
    row-gap : 1rem;
    animation : aboutani 1s linear 1;
}

@keyframes aboutani{
    from{
        transform : translateX(100%);
        opacity : 0;
    }
    to{
       transform : translateX(0);
       opacity : 1;
    }
}
.hello_title{
    font-size : 1.7rem;
    color : var(--hello-color);
}

.my_name{
    font-size : 2.2rem;
    color : var(--name-color);
    font-weight : 600;
}

.my_prof{
    height : 2.5rem;
    font-size : 1.9rem;
    color : var(--pro-color);
}

.my_prof::after{
    content : "|";
    margin-left : 5px;
    animation : blink 1s infinite;
}

@keyframes blink{
     0%{
        opacity : 1;
     }
     50%{
        opacity : 0;
     }
     100%{
        opacity : 1;
     }

}
.about_btn_box{
    display : flex;
    justify-content : center;
    align-items : center;
    gap : 1rem;
    margin-top : 1rem;
}
.left_btn{
    font-size : 1.3rem;
    border : 1px solid var(--border-color);
    padding : 0.5rem;
    border-radius : 0.5rem;
    cursor : pointer;
    background-color : var(--btn-bg);
    color : var(--btn-color);
    transition : background-color 0.3s ease;
}

.right_btn a{
    background-color : var(--btn-bg);
    border : 1px solid var(--border-color);
    border-radius : 0.5rem;
    cursor : pointer;
    padding : 0.5rem;
    text-decoration : none;
    font-size : 1.3rem;
    color : var(--btn-color);
    transition : background-color 0.3s ease;
}

.left_btn:hover,.right_btn a:hover{
    background-color : var(--nav-hover);
}

/* cv notification */
.cv-notification{
    position : absolute;
    top : 38%;
    left : 38%;
    height : 30%;
    width : 30%;
    min-width: 400px;
    border : 1px solid var(--border-color);
    background-color : var(--about-bg);
    display : none;
}

.notification_header{
    height : 15%;
    width : 100%;
    background-color : var(--header-bg);
    display : flex;
    justify-content : center;
    align-items : center;
}
.notification_header h1{
    font-size : 1.3rem;
    font-weight : 500;
    color : var(--title-color);
}

.notification_box{
    height : 85%;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    gap : 2rem;
}

.notification{
    font-size : 1.1rem;
    color : var(--hello-color);
}

.cv_ok_btn{
    border : 1px solid var(--border-color);
    padding : 0.5rem 1rem;
    background-color : var(--cv-ok-bg);
    border-radius : 0.5rem;
    color : var(--title-color);
    font-size : 1rem;
}
.cv_ok_btn:hover{
    background-color : rgb(195, 45, 45);
}
.display_notification_bar{
    display : block;
}

/* education section */

.education{
    height : 100vh;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    background-color : var(--about-bg);
    gap : 2rem;
    z-index : 5;
}

.education_title{
    font-size : 2.5rem;
    color : var(--edu_titlecolor);
}

.education_carts{
    height : 60%;
    width : 45%;
    min-width: 600px;
    display : grid;
    grid-template-columns : repeat(2,1fr);
    gap : 1.5rem;
}

.education_info{
    height : 100%;
    width : 100%;
    border-radius : 1rem;
    border : 1px solid var(--border-color);
    background-color : var(--edu-cart-bg);
    display : flex;
    justify-content : center;
    flex-direction : column;
    align-items : center;
    gap : 0.5rem;
    transition : transform 0.3s ease;
}

.edu_icon{
    font-size : 2rem;
    color : var(--edu-icon);
}

.cart_title,.board,.percentage{
    font-size : 1.3rem;
    font-weight : 500;
    color : var(--edu-cont-color);
}

.education_info:hover{
    transform : scale(1.02);
}


/* skill section */
.skills{
    height : 160vh;
    width : 100%;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : center;
    gap  : 1rem;
    background-color : var(--about-bg);
    z-index : 5;
}

.skill_title{
    font-size : 2.5rem;
    color : var(--edu_titlecolor);
}

.skills_carts{
    height : 75%;
    width : 70%;
    min-width: 600px;
    display : flex;
    flex-direction : column;
    align-items : center;
    justify-content : space-between;
}



.skills_cart{
    height : 18%;
    width : 100%;
    display : flex;
    justify-content : center;
    align-items : center;
    gap : 0.5rem;
}

.skill_about{
    height : 90%;
    width : 70%;
    background-color : var(--skill-about-bg);
    padding : 0.8rem;
    border-radius : 1rem;
    border : 1px solid var(--border-color);
    transition : transform 0.3s ease;
}

.skill_about:hover{
    transform : scale(1.02);
}
.skill_heading{
    font-size : 2rem;
}

.skill_dec{
    font-size : 1.5rem;
}

.skill_heading,.skill_dec{
    color : var(--skill-dec-color);
}
.skill_image{
    height : 100%;
    width : 20%;
}

.skill_img{
    height : 100%;
    width : 100%;
}



/* contact section */
.contact{
    height : 100vh;
    width : 100%;
    background-color : var(--about-bg);
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    gap : 1rem;
    z-index : 5;
}

.contact_title{
    font-size : 2.5rem;
    color : var(--edu_titlecolor);
}

.contact_image{
    height : 45%;
    width : 22%;
    min-width: 300px;
    border-radius : 1rem;
    transition : 0.3s ease;
}

.contact_image:hover{
    transform : scale(1.01);
}

.cont_img{
    height : 100%;
    width : 100%;
    border-radius : 1rem;
    border : 1px solid var(--border-color);
}

.contact_desc{
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    gap : 0.5rem;
}
.contact_name{
    font-size : 2rem;
    color : var(--name-color);
}

.con_logo{
    font-size : 1.5rem;
    color : var(--skill-dec-color);
}

.cont_s{
    font-size : 1.5rem;
    color : var(--skill-dec-color);
}
.email_link{
    display : flex;
    justify-content : left;
    align-items : center;
    gap : 0.5rem;
}

.contact_number{
   display : flex;
    justify-content : left;
    align-items : center;
    gap : 0.5rem;
}

/* footer */
.footer{
    height : 25vh;
    width : 100%;
    display : flex;
    flex-direction : column;
    justify-content : center;
    align-items : center;
    gap : 1rem;
    background-color : var(--header-bg);
}

.footer_title{
    color : var(--title-color);
    font-size : 2rem;
}

.social_icons{
    display : flex;
    justify-content : center;
    align-items : center;
    gap : 1rem;
}

.so_icon{
    font-size : 1.7rem;
     color : var(--social-icon-color);
    transition : 0.3s ease;    
}
.social{
    text-decoration : none;
}
.so_icon:hover{
    color : var(--nav-hover);
}
.social.disabled{
    opacity : 0.4;
    pointer-events : none;
    cursor : not-allowed;
}
.copyright{
    font-size : 1.1rem;
    color : var(--social-icon-color);
}

/* slide bar */

::-webkit-scrollbar{
    width : 0.3rem;
    background-color : var(--scroll-bg);
}

::-webkit-scrollbar-thumb{
    background-color : var(--header-bg);
}

/* actice nav */
.active{
     color : var(--nav-hover);
}

/* making responsive */

@media screen and (max-width : 750px){
    .navs{
        position : absolute;
        flex-direction : column;
        right : 2rem;
        top : 6rem;
        background-color : var(--header-bg);
        padding : 3rem 2rem;
        gap : 1rem;
        border-radius : 0.5rem;
        border : 1px solid var(--border-color);
        transition : transform 0.3s ease;
        transform : translateX(140%);
    }   
    .navTag{
        font-size : 1.6rem;
    }
    .nav_visibale{
        transform : translateX(0);
    }
    .menu_btn_box{
        display : block;
    }

    /* education */
    .education_carts{
       min-width : 500px;
    }
    /* notification */
     .cv-notification{
        min-width : 300px;
        left : 28%;
     }
    .notification_box{
        padding: 1rem;
        text-align: center;
    }
}

@media screen and (max-width : 600px){
      /*about  */
      .header_title{
        font-size : 1.4rem;
      }
    .about{
       flex-direction : column;
       min-width : 300px;
       gap : 1rem;
    }
    .image_box{
        height : 40%;
        width : 50%;
        min-width : 270px;
    }
    .about_box{
        row-gap : 0.5rem;
    }
    .hello_title{
        font-size : 1.5rem;
    }
    .my_name{
        font-size : 1.8rem;
    } 
    .my_prof{
          font-size : 1.5rem;
    }
    .about_btn_box{
    margin-top : 0.6rem;
     } 

     /* notification */
    .cv-notification {
        left: 6%;
        top: 56%;
    }
     
     /* education */
     .education{
        height : 130vh;
     }
     .education_title{
        font-size : 2.1rem;
     }
    .education_carts{
        height: 70%;
       min-width : 300px;
       grid-template-columns : repeat(1,1fr);
    }
    .education_info{
    width : 100%;
    justify-self : center;
    }

    /*skills  */
      .skills_carts{
        min-width : 300px;
      }
      .skill_heading{
        font-size : 1.5rem;
      }
      .skill_about{
        width : 100%;
      }
      .skill_dec{
        font-size : 1.3rem;
      }
      .skill_title{
        font-size : 2.1rem;
      }
      .skill_image{
        display : none;
      }
      
      /* contact */
      .contact_title{
        font-size : 2.1rem;
      }
      .contact_image{
        min-width: 250px;
        
      }
    .contact_name{
        font-size : 1.9rem;
    }

      /* footer */
      .footer{
        height : 20vh;
      }
      .footer_title{
        font-size : 1.7rem;
      }
}

@media screen and (max-width : 400px){
    /* header */
    .header{
        height : 9%;
    }
    .header_title{
        font-size: 1.3rem;
    }
    .navTag {
        font-size: 1.2rem;
    }
    .cont_s{
        font-size : 1.2rem;
    }
    .theme_btn, .menu_icon {
        font-size : 1.4rem;
    }
    /* about */
    .image_box{
        min-width : 230px;
    }
     .hello_title{
        font-size : 1.1rem;
    }
    .my_name{
        font-size : 1.5rem;
    }
    .my_prof{
        font-size : 1.4rem;
    }
    .left_btn{
        font-size : 1rem;
    }
    .right_btn a{
        font-size : 1rem;
    }
    /* notification */
    .cv-notification {
        min-width: 257px;
        }
        
    /* education */
    .education_carts{
        height : 75%;
        min-width : 250px;
        gap : 1rem;
    }
    .education_title {
        font-size: 1.6rem;
    }
    .cart_title, .board, .percentage {
    font-size: 1rem;
    }
    /* skill */
    .skill_title{
        font-size : 1.6rem;
    }
    .skills_carts {
        min-width: 250px;
    }
    .skill_heading {
        font-size: 1.1rem;
    }
    .skill_dec {
        font-size: 1rem;
    }
    /* contact */
    .contact{
        gap : 1.3rem;
    }
    .contact_title{
        font-size : 1.6rem;
    }
    .contact_image{
        height : 40%;
        min-width : 230px;
    }
    .contact_name {
        font-size: 1.6rem;
    }
    /* footer */
    .footer_title {
        font-size: 1.4rem;
    }
    .copyright {
    font-size: 0.9rem;
    }
}