/* responsive screen for mobile 575px */
@media only screen and (max-width: 575px) {

    .header-desk {
        display: none;
    }

    .header-mob-tab {
        display: block;
    }

    .header-mob-tab-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* header stat */
    header {
        padding: 1vw 0;
    }

    .header-left {
        width: 35vw;
    }

    .header-left .h2 {
        font-size: 4vw;
    }

    .header-center {
        width: 42vw;
    }

    .header-center ul {
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        background: #fff;
        width: 200px;
        display: none;
        padding: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .header-center ul.show {
        display: block;
        /* show when toggled */
    }

    .hamburger {
        display: block;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
    }

    .header-center {
        position: relative;
    }

    .header-right {
        display: none;
        /* hide button on mobile */
    }

    .header-center ul.show {
        background: #00192e;
        box-shadow: 0px 1px 2px 0px #fff;
        position: absolute;
        top: 5vw;
        left: 20vw;
        z-index: 99;
        width: 35vw;
    }

    .header-center ul li {
        font-size: 2.5vw;
    }

    button {
        padding: 1vw 2vw;
        border-radius: 20px;
        font-size: 3vw;
        border: 1px solid white;
    }

    a.hr {
        color: white !important;
    }

    button.hrl {
        border: none;
    }

    .header-center ul li a {
        color: #c9d5d6;
        width: 30vw;
        padding: 0.5vw 1vw;
        border: none;
        font-size: 3vw;
    }

    .header-right {
        width: 15vw;
        margin-bottom: 1.5vw;
    }

    a.hr {
        font-size: 1.7vw;
    }

    /* hero sec start */
    .hero-sec {
        width: 85vw;
        height: auto;
        flex-direction: column;
    }

    .hero-sec-left {
        width: inherit;
        height: auto;
    }

    .top-p {
        font-size: 3vw;
    }

    .hero-sec-left h1 {
        font-size: 7vw;
    }

    .hero-sec-left h4 {
        font-size: 4vw;
    }

    .bottom-p {
        line-height: 3.5vw;
        font-size: 3vw;
        text-align: justify;
        width: 60vw;
    }

    a#hrl {
        font-size: 2vw;
    }

    .hero-sec-right {
        width: inherit;
        height: auto;
    }

    .lg-circle {
        width: 65vw;
        height: 65vw;
        border: 0.1vw solid #00ffdd;
        border-radius: 270px;
    }

    .sm-circle {
        width: 45vw;
        height: 45vw;
    }

    .box {
        width: 25vw;
        height: 25vw;
    }

    .box i {
        font-size: 10vw;
        margin-bottom: 3vw;
    }

    .box h3 {
        font-size: 3vw;
    }

    .box p {
        font-size: 3vw;
    }

    .line-container {
        display: none;
    }

    .html-circle {
        bottom: 40.3vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    .css-circle {
        top: 7vw;
        left: 37vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    .bootstrap-circle {
        top: 7vw;
        right: 37vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    .git-circle {
        top: 30vw;
        right: 37vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    .js-circle {
        top: 30vw;
        left: 37vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    .wp-circle {
        top: 41vw;
        width: 8vw;
        height: 8vw;
        font-size: 2.5vw;
    }

    /* sec 1 start */
    .sec-1 {
        height: 107vw;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .heading h2 {
        font-size: 4vw;
    }

    .heading h2::after {
        width: 65vw;
        top: 2.3vw;
        left: 20vw;
    }

    .sec-1-inner {
        height: auto;
        flex-direction: column;
    }

    .sec-1-left {
        width: 85vw;
        height: auto;
    }

    .sec-1-left p {
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: justify;
    }

    .sec-1-right {
        width: 84vw;
        height: auto;
        top: 60vw;
        right: 156vw;
    }

    .sec-1-right-inner {
        width: 85vw;
        height: auto;
    }

    .sec-1-right-inner h4 {
        font-size: 4vw;
    }

    .sri-box p {
        font-size: 3vw;
    }

    .sri-box i {
        width: 3vw;
        height: 3vw;
        font-size: 1.9vw;
    }

    .sri-box {
        margin-bottom: 1vw;
    }

    /* sec 2 start */
    .sec-2 {
        height: auto;
    }

    .sec-2-inner {
        height: auto;
        gap: 2vw;
    }

    .s2i-box {
        width: 85vw;
        height: auto;
        padding: 3vw 2vw 6vw 2vw;
    }

    .box-cont i {
        font-size: 5vw;
    }

    .box-cont h3 {
        font-size: 4vw;
    }

    .cont {
        font-size: 3vw;
    }

    .cont p {
        line-height: 4vw;
        text-align: justify;
    }

    .line {
        width: 80.5vw;
    }

    p.html {
        width: 72vw;
    }

    p.css {
        width: 68vw;
    }

    p.js {
        width: 64vw;
    }

    p.bootstrap {
        width: 72vw;
    }

    p.percent {
        width: 80vw;
        font-size: 3vw;
    }



    /* sec 3 start */
    .sec-3 {
        height: auto;
        margin-top: 10vw;
        margin-bottom: 10vw;
    }

    .sec-3 .heading h2::after {
        width: 59.5vw;
        top: 2.6vw;
        left: 25vw;
    }

    .grid-container {
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .hover-box {
        width: 81vw;
        height: 35vw;
    }

    .image-container {
        width: 81vw;
        height: 35vw !important;
    }

    .image-container i {
        font-size: 13vw;
    }

    .hover-text {
        width: 81vw;
        height: 35vw;
    }

    .hover-text h3 {
        margin-bottom: 4vw;
        font-size: 5vw;
    }

    .hover-text p {
        line-height: 4vw;
        font-size: 2.5vw;
    }

    .tags span {
        font-size: 2.5vw;
    }




    /* sec 4 start */
    .sec-4 {
        width: 85vw;
        height: auto;
        margin-left: 7vw;
        margin-bottom: 7vw;
    }

    .sec-4 .heading h2::after {
        width: 59vw;
        top: 2.5vw;
        left: 26vw;
    }

    .git-inner-sec {
        flex-direction: column;
    }

    .git-inner-sec-left {
        width: 85vw;
    }

    .git-inner-sec-left h2 {
        margin-bottom: 1vw;
        font-size: 4vw;
    }

    .git-inner-sec-left p {
        font-size: 3vw;
        text-align: justify;
        line-height: 4vw;
    }

    .email-icon {
        width: 9vw;
        height: 9vw;
        border-radius: 5vw;
        font-size: 3vw;
    }

    .email-content h5 {
        font-size: 3vw;
    }

    .email-content h3 a {
        font-size: 3vw
    }

    .phone-icon {
        width: 9vw;
        height: 9vw;
        border-radius: 5vw;
        font-size: 3vw;
    }

    .phone-content h5 {
        font-size: 3vw;
    }

    .phone-content h3 {
        font-size: 3vw;
    }

    .social-icons {
        display: flex;
        gap: 4vw;
    }

    .social-icons a i {
        font-size: 4vw;
    }

    .social-icons {
        display: flex;
        gap: 4vw;
        margin: 2vw 0vw 3vw 0vw;
    }

    .git-inner-sec-right {
        width: 85vw;
    }

    .git-inner-sec-right h2 {
        color: white;
        margin-bottom: 1.5vw;
        font-size: 5vw;
    }

    .cv-request {
        height: auto;
    }

    .cv-request a {
        font-size: 3vw;
        font-weight: 800;
        color: white;
    }

    .cv-request a:hover {
        color: red;
        text-decoration: 2px underline;
    }

    .git-inner-sec-right p {
        line-height: 4vw;
        margin-bottom: 2vw;
        font-size: 3vw;
        text-align: justify;
    }

    .cv-download {
        gap: 2vw;
    }

    .cv-download i {
        font-size: 4vw;
    }

    p.cvd {
        font-size: 3vw;
        margin-bottom: 0vw;
    }

    /* sec 5 start */
    .sec-5 h6 {
        color: #9aa393;
        font-size: 3vw;
        margin-bottom: 1vw;
    }

    .sec-5 p {
        font-size: 3vw;
    }

    .fa-solid,
    .fas {
        font-size: 3vw;
    }



    /* inner pages css start */
    /* about page css start */
    .hsa-inner h2 {
        font-size: 7vw;
    }

    h2.s4-h2 {
        font-size: 4vw;
    }

    .s1a-inner p {
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: justify;
    }

    .s2a-inner h4,
    .s3a-inner h4 {
        font-size: 4vw;
        color: #00d2fc;
        margin-bottom: 1vw;
        text-decoration: 2px underline;
    }

    .s2a-inner p,
    .s3a-inner p {
        font-size: 3vw;
        line-height: 3.5vw;
    }

    .s3a-ul li {
        list-style: circle !important;
        line-height: 3.5vw;
        font-size: 3vw;
    }

    /* skills page responsive css start */
    .hss-inner h2 {
        font-size: 7vw;
    }

    .flex-sec-1-skill {
        gap: 3vw;
    }

    .flex-sec-1-skill p {
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: justify;
    }

    .sec-1-skill {
        width: 85vw;
    }

    .s1s-inner {
        width: 85vw;
    }

    .s1s-inner h2 {
        font-size: 4vw;
    }

    .heading-skill {
        font-size: 3.5vw;
    }

    /* portfolio page responsive css start */
    .hrp-inner h2 {
        font-size: 7vw;
    }

    .s1p-inner p {
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: justify;
    }

    .project-1 {
        width: 85vw;
        height: 70vw;
    }

    .project-1-content {
        width: 85vw;
    }

    .project-1-content h2 {
        font-size: 4vw;
    }

    .project-1-content h4 {
        font-size: 3vw;
    }

    .project-1-content h4 {
        font-size: 3vw;
    }


    /* contact page responsive code */
    .hsc-inner h2 {
        font-size: 7vw;
    }

    .s4c-p {
        font-size: 3vw;
        line-height: 3.5vw;
        text-align: justify;
    }

}







/* responsive screen for tablet 767px */
@media (min-width: 576px) and (max-width: 1024px) {

    .header-desk {
        display: none;
    }

    header {
        padding: 1vw 0;
    }

    .header-mob-tab {
        display: block;
    }

    .hamburger {
        color: white;
    }

    .header-left {
        width: 35vw;
        height: auto;
    }

    .header-left .h2 {
        font-size: 4vw;
    }

    .header-mob-tab-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-center ul.show {
        background: #00192e;
        box-shadow: 0px 1px 2px 0px #fff;
        position: absolute;
        top: 5vw;
        left: 20vw;
        z-index: 99;
        width: 25vw;
    }

    .hero-sec-left h4 {
        margin-bottom: 0vw;
    }

    .image-container {
        height: 16vw;
    }


    .bottom-p {
        text-align: justify;
    }

    .hover-text h3 {
        font-size: 1.4vw;
    }

    .hover-text p {
        line-height: 1.6vw;
        font-size: 1.2vw;
    }

    .sec-1-left p {
        text-align: justify;
    }

    .cont p {
        text-align: justify;
    }

    .tags span {
        padding: 2px 5px;
        font-size: 1.2vw;
    }

    .git-inner-sec-left p {
        text-align: justify;
    }




    .git-inner-sec-right p {
        font-size: 1.4vw;
        text-align: justify;
        line-height: 2vw;
    }

    .header-center ul {
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        background: #fff;
        width: 200px;
        display: none;
        /* hidden by default */
        padding: 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .header-center ul.show {
        display: block;
    }

    .hamburger {
        display: block;
        /* show icon on mobile */
    }

    .header-center {
        position: relative;
    }

    .header-right {
        display: none;
        /* hide button on mobile */
    }





}




/* responsive for desktop screen min width 1025px */
@media (min-width: 1025px) and (max-width:1980px) {
    .container {
        overflow: hidden;
    }

    header {
        height: auto;
        padding: 1vw 0;
    }

    .header-desk-inner {
        display: flex;
        justify-content: space-between;
    }

    .header-desk {
        display: block;
    }

    .header-mob-tab {
        display: none;
    }


}