/* For Tablet View */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {

    .navbar i {
        font-size: 14px;
        margin-right: 5px;
        /* color: #fff; */
    }

    .navbar {
        font-size: 15px;
        font-weight: 400;
    }

    h1,
    .lead {
        color: white;
        font-size: 27px;
        top: 21vh;

    }


    .social-icons i {
        font-size: 28px;

    }

    .social-icons {
        top: 20vh;

    }

    .resume {
        /* width: 30%; */
        top: 26vh;
    }

    .document-download {
        font-size: 10px;
    }

    .document-title {
        font-size: 15px;
    }

    .document-download a {
        padding-top: 7px;

    }

    .quote {
        font-size: 20px;
        top: 55vh;
        left: 0;
    }

    .about-section span {

        font-size: 42px;

    }

    .section-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .card-text {
        font-size: 14px;
        padding: 2px;
    }

    .project-name {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .testimony span {
        font-size: 35px;
    }
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {}

/* For Mobile Landscape View */
@media screen and (max-device-width: 640px) and (orientation: landscape) {}

/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 768px) {
    .container-fluid {
        /* background: url('abdul wadood6.jpg') center/cover no-repeat; */
        min-height: 100vh;
    }

    .container.center-content {
        margin-left: 141px;
    }

    .social-icons i {
        font-size: 23px;
    }

    .social-icons {
        top: 9vh;

    }

    .navbar i {
        font-size: 14px;
        margin-right: 5px;
    }

    .navbar {
        font-size: 11px;
        font-weight: 600;
    }

    h1,
    .lead {
        font-size: 27px;
        top: 10vh;
        margin-left: -57px;
    }



    .resume {
        width: 30%;
        top: 15vh;
        margin-left: 100px;
    }

    .document-download {
        font-size: 10px;
    }

    .document-title {
        font-size: 15px;
    }

    .document-download a {
        padding-top: 7px;

    }

    .quote {
        font-size: 20px;
        top: 50vh;
        left: 0;
    }

    .about-section span {

        font-size: 42px;

    }

    .section-title {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .card-text {
        color: #666;
        font-size: 14px;
        padding: 2px;
    }

    .project-name {
        font-size: 18px;
        margin-bottom: 0px;

    }

    .testimony >span {
        font-size: 35px;
    }

    .projects-section>span {
        font-size: 35px;
    }

    .certificate-overlay {
        transform: translateY(0);
    }

    .certificate-overlay {
        position: relative;
    }

    .certificate-title {
        font-size: 13px;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .certificate-description {
        font-size: 10px;
        margin-bottom: 0;

    }

    .left-side {
        flex: 1 0 100%;
        /* Takes full width on mobile screens */
        max-width: 100%;
    }

    .right-side {
        flex: 1 0 100%;
        /* Optional: make this full width on mobile screens too */
        max-width: 100%;
    }
    .skills-container {
        display: flex;
        flex-direction: column-reverse;
        flex-wrap: wrap;
    
    }
}

@media screen and (max-device-width: 579px) {

    .quote {
        font-size: 15px;
    }

    h1,
    .lead {
        font-size: 23px;
        top: 10vh;
        margin-left: -124px;
    }

    .social-icons {
        /* top: 30vh; */
        position: relative;
        margin-top: 20px;
        left: -32px;
    }

    .resume {
        width: 32%;
        top: 10vh;
    }

    .document-download {
        font-size: 8px;
    }

    .document-title {
        font-size: 10px;
    }

    .testimony>.card {
        height: 214px;
    }

    .about-section p {
        font-size: 15px;
    }

    .section-title {
        font-size: 23px;
    }

    .testimony >span {
        font-size: 22px;
    }

    .projects-section>span {
        font-size: 22px;
    }

    .card-text {
        font-size: 10px;
        padding: 2px;
    }

    .project-name {
        font-size: 13px;
        margin-bottom: 0px;

    }
    .right-side {    
          flex-direction: column;
          justify-content: center;
          margin-right: 0px;    
      
      }
      .language-box {
        padding: 4px 8px;
        text-align: center;
        margin: 4px;
        height: 40px; /* Adjust height for uniformity */
      }
      .language-box i {
        font-size: 0.9rem; /* Slightly smaller icons */
        margin-right: 4px; /* Space between icon and text */
      }
      .language-box h4 {
        margin: 0;
        font-size: 0.8rem; /* Slightly smaller text */
      }
      .list-group-item {
        font-size:0.9rem;
        /* Remove borders for list items */
      }

}

@media screen and (max-device-width: 483px) {

    .quote {
        font-size: 13px;
        top: 64vh;
        left: -76px;

    }
}

@media screen and (max-device-width: 440px) {
    .container.center-content {
        margin-left: 0px;
    }

    h1 {
        font-weight: 900;
    }

    h1,
    .lead {
        font-size: 21px;
        top: 10vh;
        width: fit-content;

        left: 0px;
        margin-left: 0;
    }

    .navbar {
        font-size: 13px;
    }

    .sticky-navbar a:first-child {
        display: flex;
        font-weight: 700;
        width: 100%;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }

    .container.center-content {
        margin-left: 0;
    }

    .social-icons {
        left: 40px;
    }

    .quote {
        font-size: 16px;
        left: 50%;
        transform: translate(-50%, -50%);
        top: 33vh;
    }

    .navbar {
        top: 0;
        left: 0;
        height: fit-content;
        padding: 2px;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-wrap: wrap;
        width: 100%;
    }

    .resume {
        width: 58%;
        top: 10vh;
        margin-left: 0px;
    }

    .document-download {
        font-size: 10px;
    }

    .document-title {
        top: 4px;
        font-size: 12px;
    }

    .container-fluid {
        /* background: url('abdul\ wadood5.jpg') center/cover no-repeat; */
        min-height: 60vh;
    }

    .sticky-navbar a {
        font-size: 13px;
    }

    .navbar i {
        font-size: 11px;
        margin-right: 5px;
    }

    .testimony>.card {
        height: 122px;
    }

    .right-side {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-right: 9px;
        font-size: 10px;
    }

    .list-group {
        margin-top: 15px;
        font-size: 12px;
    }

    /* .col-md-4 {
        flex: 0 0 49.333333%;
        max-width: 50.333333%;
        padding: 5px;
    } */

    .section-title {
        font-size: 17px;
    }

    .testimony>span {
        font-size: 18px;
    }

    .projects-section>span {
        font-size: 18px;
    }

    .about-section>span {
        font-size: 27px;
    }
}

/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {}

/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {}

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {}


/* Media query for touch screen devices */
@media screen and (max-device-width: 500px) {}