:root{
    --primary-color:#ffffff;
    --secondary-color:#146ebe;
    --black-color:#000000;
    --fade-black-color:#333333;
    --gray-color:rgb(209, 209, 209);
    --ghost-white:ghostwhite;
    --primary-btn-colr:ghostwhite;
    --red-color:#d70606;
}

.dark-mode{
    --primary-color:#181818;
    --secondary-color:#146ebe;
    --black-color:ghostwhite ;
    --fade-black-color:#ffffff;
    --gray-color:rgb(209, 209, 209);
    --ghost-white:black;
}



/* For mediup Screen size....... */
@media all and (min-width:650px) and (max-width:1100px){
    #nav-menu>#logo{
        font-size: 2rem;
        margin: auto;
    }
    #nav-menu>#logo>.logo-name>p>span{
        font-size: 3rem;
    }

    #nav-menu>#change-theme{
        margin: auto;
    }
    #menu-list>ul>li a{
        font-size:0.7rem;
        margin:auto 5px;
    }

    #primary-btn{
        font-size: 0.6rem;
        padding: 7px;
    }



/* main section */
    #home{
        width: 100%;
        
    }
    #home>#main-left{
        font-size: 1.2rem;
        
    }
    #home>#main-left>.name-sec span{
        font-size: 2rem;
    }
    #home>#main-left>#subtitle-sec{
        font-size: 1.2rem;
    }
    #home>#main-left>#subtitle-sec .auto-type{
        font-size: 1.3rem;
    }

    #home>#main-left>#social-icon-1 div i{
        font-size: 18px;
        padding: 9px;
    }
    #home>#main-left>.resume-btn-1 #primary-btn{
        font-size: 15px;
        margin: 30px auto;
        border-radius: 5px;
    }

    

    .primary-heading{
        font-size: 30px;
    }

    /* About Section...... */
    #about>.content-section>.about-content p{
        font-size: 17px;
    }

    #about>.content-section{
        display: block;
    }
    #about>.content-section>.about-img{
        width: 50%;
    }
    #about>.content-section>.about-content{
        width: 90%;
    }


    /* #tech-skill>#techskill-content{
        grid-template-columns:repeat(3,1fr);
    }

    #bullet-points{
        grid-template-columns: repeat(2,1fr)
    } */




    /* Project section......... */
    #projects>#project-items>.project-card .project-title{
        font-size: 18px;
    }

    #projects>#project-items>.project-card .project-description p{
        font-size: 15px;
    }
    #projects>#project-items>.project-card>.prj-links{
        font-size: 1.5rem;
    }



/* Tech-skill section */
    
    #skills>#techskill-content{
        width: 90%;
        grid-template-columns:repeat(5,1fr);
        gap: 1rem;

    }
    #skills>#techskill-content .skills-card{
        font-size: 16px;
    }


    /* Bullet points...... */
    #bullet-points{
        gap: 30px;
    }

    #bullet-points>.bullet-box .line1{
        font-size: 18px;
    }
    #bullet-points>.bullet-box .line2{
        font-size: 20px;
    }



    /* Contact section......... */

    #social-icons2{
        font-size: 12px;
        gap: 15px;
    }

    #contact #contact-right #contact-form input,textarea{
        font-size: 13px;
        padding: 7px;
    }

    #contact #contact-right #contact-form .upload-area{
        font-size: 17px;
    }

    #contact #contact-right #contact-form .upload-area select{
        font-size: 18px;
    }
    #contact #contact-right #contact-form .contact-form-btn button{
        font-size: 15px;
        padding: 7px;
    }
    #alert-section{
        width: 70%;
        font-size: 15px;
    }


    #intro_animation div{
        width: 30%;
        margin:40vh auto;
        font-size: large;
    
    }


}   









/* ------------------------------------------------------------- */

/* For Small Screen size.......................*/



@media all and (min-width:250px) and (max-width:649px){
    #nav-menu>#logo{
        font-size: 1.5rem;
        margin: auto;
    }
    #nav-menu>#logo>.logo-name>p>span{
        font-size: 2rem;
    }

    #nav-menu>#change-theme{
        margin: auto;
    }
    #nav-menu>#menu-list>ul{
        width: 60%;
        position: fixed;
        right: 100%;
        top: 0px;
        height:100vh;
        display:block;
        background-color:var(--ghost-white);
        box-shadow: 10px 1px  165px var(--fade-black-color);
        z-index: 300;
        transition: 0.2s;
        visibility: hidden;
    }

    #nav-menu>#menu-list>ul>li{
        color:var(--black-color);
        font-size: 10px;
        margin:5px 0px;
        background-color:var(--primary-color);
        padding: 10px;
    }
    #nav-menu #menu-close-icon i{
        color: var(--primary-color);
        position: absolute;
        top: 5px;
        left: 60%;
        font-size: 30px;
        visibility: hidden;
        z-index: 301;;
        background-color:var(--fade-black-color);
        padding: 5px;
    }

    #primary-btn{
        font-size: 0.5rem;
        padding: 7px;
    }

    #menu-list-icon{
        color: var(--black-color);
        position: relative;
        visibility: visible;
        margin-right: 9px;
        font-size: 20px;
    }



/* main section */
    #home{
        width: 100%;
        display: block;
        position: relative;
        
    }
    #home>#main-left{
        width: 80%;
        margin: 50px auto;
        font-size: 0.9rem;
        
    }
    #home>#main-left>.salute-sec img{
        width: 30px;
    }
    #home>#main-left>.name-sec span{
        font-size: 1.5rem;
    }
    #home>#main-left>#subtitle-sec{
        font-size: 1rem;
    }
    #home>#main-left>#subtitle-sec .auto-type{
        font-size: 1.1rem;
    }

    #home>#main-left>#social-icon-1 div i{
        font-size: 12px;
        padding: 7px;
    }
    #home>#main-left>.resume-btn-1 #primary-btn{
        font-size: 10px;
        margin: 10px auto;
    }
    

    #home>#main-right{
        /* width: 20%; */
        position: absolute;
        top:1%;
        left: 80%;
        transform: translateX(-50%);
    }
    #home>#main-right img{
        width: 50%;
        margin: auto;
    }


    .primary-heading{
        font-size: 20px;
    }




    /* About Section...... */
    #about{
        padding: 10px;
    }

    #about>.content-section>.about-content p{
        font-size: 12px;
    }

    #about>.content-section{
        display: block;
    }
    #about>.content-section>.about-img{
        width: 30%;
    }
    #about>.content-section>.about-content{
        width: 90%;
    }
    #about>.content-section>.about-content p i{
        font-size: 15px;
    }


    /* #tech-skill>#techskill-content{
        grid-template-columns:repeat(3,1fr);
    }

    #bullet-points{
        grid-template-columns: repeat(2,1fr)
    } */




    /* Project section......... */
    #projects>#project-items{
        grid-template-columns:repeat(1,1fr);
    }

    #projects>#project-items>.project-card .project-title{
        font-size: 13px;
    }

    #projects>#project-items>.project-card .project-description p{
        font-size: 10px;
    }
    #projects>#project-items>.project-card>.prj-links{
        font-size: 1.1rem;
    }
    #projects>#project-items>.project-card>.prj-type{
        font-size: 11px;
    }


/* Tech-skill section */
    
    #skills>#techskill-content{
        width: 90%;
        grid-template-columns:repeat(3,1fr);
        gap: 1rem;

    }
    #skills>#techskill-content .skills-card{
        font-size: 0.5rem;
        padding: 10px;
        
    }
    #skills>#techskill-content .skills-card img{
        width: 50%;
    }





/* Github section designing............. */

    #github-view{
        width: 90%;
        margin: auto;
    }
    #github-view>#github-cal{
        margin: 10px auto;
    }
    #github-view>#github-stats-card{
        grid-template-columns: repeat(1,1fr);

    }

    #github-view>#github-streak-stat{
        display: block;

    }

    #github-view>#github-lang{
        width: 80%;
    } 

/* Bullet points...... */
    #bullet-points{
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
    }
    

    #bullet-points>.bullet-box .line1{
        font-size: 15px;
    }
    #bullet-points>.bullet-box .line2{
        font-size: 17px;
    }



    /* Contact section......... */


    #contact #contact-left{
        visibility: hidden;
        position: absolute;
    }
    #contact #contact-right{
        /* width: 100%; */
        margin: auto;
    }

    #social-icons2{
        font-size: 10px;
        gap: 12px;
        width: 90%;
        grid-template-columns: repeat(2,1fr);

    }

    #contact #contact-right #contact-form{
        width: 95%;
        margin:auto
    }



/* Footer section............ */

    #footer-section{
        font-size: 10px;
        padding: 9px;
    }






    #contact #contact-right #contact-form input,textarea{
        font-size: 13px;
        padding: 7px;
    }

    #contact #contact-right #contact-form .upload-area{
        font-size: 17px;
    }

    #contact #contact-right #contact-form .upload-area select{
        font-size: 18px;
    }
    #contact #contact-right #contact-form .contact-form-btn button{
        font-size: 15px;
        padding: 7px;
    }

    #alert-section{
        width: 70%;
        font-size: 13px;
    }
    
    #intro_animation div{
        width: 40%;
        margin:40vh auto;
        font-size: small;
    
    }


}