@media screen and (min-width: 1400px) {


    .mobile-img {
        width: 50%;
        max-width: 750px !important;
    }

    .color-layer,
    .hero-banner {
        height: 80vh;
        min-height: 850px;
    }

    .color-layer {
        max-width: 100%;
    }

    .navbar {
        max-width: 1950px;
    }

    .hero-banner-content-container {
        width: 98%;
        max-width: 1920px;
    }

    .main-heading {
        font-size: 64px;
        width: 600px;
    }

    .about-content-container {
        margin-top: 130px;
    }

    .build-your-future-para,
    .what-is-tuttarvik,
    .fun-and-easy-heading,
    .try-tuttarvik-heading,
    .our-support-head {
        font-size: 48px;
    }

    .skill-head,
    .inner-context-heading,
    .acnt-create-head,
    .content-header,
    .try-tuttarvik-heading{
        font-size: 28px;
    }

    .content-no  {
        font-size: 22px;
    }

    .build-your-future-para {
        width: 1164px;
    }

    .welding-image {
        width: 90%;
    }

    .fun-and-easy-section-container {
        max-width: 1920px;
        padding: 0px 180px;
    }

    .get-started-container {
        max-width: 1920px;
    }

    .job-seeker-section {
        margin-top: -100px;
    }

    .icon {
        padding: 37px 0px 0px 8px;
    }

    .get-started-section-bg {
        height: auto;
    }

    .yt-video {
        height: 0vh;
        min-height: 570px;
        width: 100%;
    }

    .inner-context-para {
        max-width: 800px;
    }

    .get-started-right-grid {
        width: 100%;
    }

    .job-seeker-form-container {
        max-width: 1250px;
        padding: 5% 5%;
    }

    .supporters-container {
        max-width: 1920px;
    }

    .grid-item-left {
        width: 55%;
        max-width: 780px;
    }

    .footer-content-container {
        max-width: 1920px;
    }

    .employer-btn {
        padding: 13px 15px 14px 10px;
    }

    .footer-img {
        width: 120px;
        max-width: 117px;
        height: 35px;
    }

    .links-container {
        max-width: 1920px;
    }

    .skill-para {
        max-width: 460px;
    }

    .emp-login {
        margin-left: 20px;
    }

    .modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        padding: 0px 100px 0px 100px;
        width: 697px;
        height: 620px;
    }

    .close {
        top: 80px;
        right: 90px;
    }

    .modal-head {
        font-size: 25px;
    }

    .modal-para {
        font-size: 13px;
        width: 100%;
        margin: 10px 0px 0px 0px;
    }

    .frgt-pswrd {
        color: #000;
        width: 100%;
        text-align: right;
        margin-top: 13px;
        font-size: 15px;
    }

    .modal-btn-container {
        width: 258px;
        display: flex;
        margin: 30px 0px 0px 0px;
    }

    .login-btn {
        padding: 13px 45px 9px 45px;
    }

    .cancel-btn {
        margin: 0px 0px 0px 25px;
        background-color: transparent;
        padding: 10px;
    }

    .cancel-btn:hover {
        background-color: transparent;
    }

    .crt-acnt-line {
        margin: 20px 0px 0px 0px;
    }

    .form-container {
        margin: 30px 0px 0px 0px;
    }

    .about-context-para {
        min-width: 580px;
    }

    .try-tuttarvik-heading {
        max-width: 650px;
    }

    .card-text-container,
  .card-image{
    max-width: 446px;
    min-width: 280px;
  }
}

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


    .hero-banner,
    .color-layer {
        height: 85vh; /* Adjust the height as needed */
        min-height: 661px;
        width: 100%;
    }

    .hero-banner {
        width: 98.6vw;
    }

    .main-heading {
        width: 90%;
    }

    .skill-para {
        min-width: 80%;
        max-width: 60%;
    }

    .emp-login {
        margin-left: 20px;
    }

    .welding-image {
        height: auto;
        max-width: 38vw;
    }

    .about-context-para {
        font-size: 15px;
    }

    .fun-and-easy-heading {
        font-size: 3vw;
    }

    .fun-and-easy-para {
        font-size: 19px;
    }

    .yt-image {
        width: 50%;
    }

    .get-started-container {
        margin-top: 8%;
    }

    .get-started-section-bg {
        height: auto;
    }

    .get-started-right-grid {
        min-width: 900px;
        display: flex;
        flex-flow: row-reverse;
    }

    .job-seeker-form-container {
        padding: 5% 6%;
    }

    .supporters-container {
        width: 80%;
    }

    .our-supporters-section {
        padding-bottom: 20vh;
    }

    .about-content-container {
        margin-top: 100px;
    }

    .skill-para {
        min-width: 375px;
    }

    .about-skill-section {
        margin: 0px 0px 0px 216px;
        width: 465px;
    }

    .job-seeker-section {
        margin-top: -130px;
    }

    .modal-content {
        width: 47vw;
        height: 64vh;
        min-width: 600px;
        min-height: 500px;
    }

    .form-input-label,
    .copyright,
    .frgt-pswrd,
    .crt-acnt-line,
    .navbar .nav-links a {
        font-size: 14px;
    }

    .inner-context-para, .welcome-text , .about-context-para,
    .content-para, .employer-btn,
    .download-line,
    .modal-para  {
        font-size: 16px;
    }

    .content-header,
    .build-your-future-para,
    .try-tuttarvik-heading,
    .modal-head  {
        font-size: 28px;
    }

    .try-tuttarvik-heading,
    .skill-head,
    .what-is-tuttarvik,
    .our-support-head {
        font-size: 40px;
    }

    .main-heading {
        font-size: 64px;
        width: 600px;
    }

    .content-no  {
        font-size: 22px;
    }
}

@media screen and (max-width: 1200px) {
    .navbar .nav-links a {
        display: inline-block;
        text-align: center;
        margin: 20px 1vw;
        text-decoration: none;
        color: #fff;
    }

    .login {
        border-right: 3px solid #475a75;
        padding: 0px 5vw 0px 0px;
    }

    .menu-icon {
        display: none;
    }

    .unknown-text {
        font-weight: 600;
        padding: 0px 2vw 0px 0px;
    }

    .mobile-img {
        width: 550px;
    }

    .fun-and-easy-heading {
        font-size: 3.4vw;
    }

    .fun-and-easy-para {
        font-size: 11px;
    }

    .hero-banner {
        width: 100vw;
    }

    .yt-image {
        width: 70%;
    }

    .acnt-create-head {
        font-size: 2.5vw;
    }

    .welding-image {
        width: auto;
        margin: 50px 0px 0px 0px;
        max-width: 40vw;
    }

    .grid-item-left {
        width: 80%;

    }

    .about-context-para {
        width: 100%;
    }

    .about-section-container {
        padding-bottom: 10%;
    }

    .about-skill-section {
        margin: 0px 40px 0px 0px;
    }

    .skill-head {
        font-size: 2vw;
    }

    .what-is-tuttarvik {
        font-size: 2.9vw;
    }

    .job-seeker-section {
        margin-top: -150px;
    }

    .inner-context-para {
        min-width: 350px;
        max-width: 500px;
    }

    .modal-content {
        width: 47vw;
        height: 64vh;
        min-width: 600px;
        min-height: 500px;
    }

    .yt-video {
        margin: 55px 0px 50px 0px;
    }

    .get-started-right-grid {
        min-width: auto;
    }

    .content-no  {
        font-size: 22px;
    }

    .form-input-label,
    .copyright,
    .frgt-pswrd,
    .crt-acnt-line,
    .navbar .nav-links a {
        font-size: 14px;
    }

    .inner-context-para, .welcome-text , .about-context-para,
    .content-para, .employer-btn,
    .download-line,
    .modal-para  {
        font-size: 16px;
    }

    .content-header,
    .build-your-future-para,
    .try-tuttarvik-heading,
    .modal-head  {
        font-size: 28px;
    }

    .try-tuttarvik-heading,
    .skill-head,
    .what-is-tuttarvik,
    .our-support-head {
        font-size: 40px;
    }

    .main-heading {
        width: 480px;
        font-size: 52px;
    }

    .fun-and-easy-section-container {
        padding: 0px 50px;
    }
}

@media screen and (max-width: 992px) {
    .nav-img {
        display: none;
    }

    .emp-login {
        margin-left: 20px;
    }

    .grid-item {
        width: 90%;
    }

    .main-heading {
        font-size: 7vw;
    }

    .hero-banner,
    .color-layer {
        height: 120vh; /* Adjust the height as needed */
    }

    .about-skill-section {
        /* width: 300px; */
        margin: 0px 0px 0px 200px;
        min-width: 300px;
        height: 480px;
    }

        .about-content-inner-container {
            width: 70%;
            flex-direction: column-reverse;
        }

    .grid-item-left {
        width: 125%;
    }

    .hr {
        width: 16vw;
        background: #dddbdb;
        height: 3.5px;
        border: none;
        border-radius: 25px;
        margin-bottom: 20px;
        opacity: 0.9;
        position: relative;
    }

    .welding-image {
        max-width: 600px;
        margin: 10px 0px 70px 0px;
    }

    .build-your-future-para {
        margin-bottom: 0vh;
    }

    .about-skill-section {
        margin: 0px 0px 0px 30px;
        height: auto;
    }

    .hr {
        width: 26vw;
    }

    .skill-head {
        font-size: 2.5vw;
    }

    .skill-para {
        margin-bottom: 20px;
    }

    .about-context-para {
        width: 100%;
    }

    .about-content-container {
        margin: 2vh 0px 0px 0px;
    }

    .fun-and-easy-heading {
        font-size: 3.7vw;
    }

    .fun-and-easy-para {
        font-size: 12px;
    }

    .get-started-container {
        width: 90%;
    }

    .acnt-create-head {
        font-size: 2.5vw;
    }

    .job-seeker-section {
        margin-top: -16vh;
        padding-bottom: 20vh;
    }

    .our-supporters-section {
        padding-bottom: 20vh;
    }

    .content-header {
        font-size: 3vh;
    }

    .content-para {
        width: 90%;
        font-size: 13px;
        min-width: 320px;
    }

    .employer-btn {
        font-size: 12px;
        width: 180px;
        padding: 13px 10px 9px 10px;
    }

    .yt-video {
        width: 77%;
        height: 60vh;
        margin: 40px 10% 40px 10%;
    }
    .form-input-label,
    .copyright,
    .frgt-pswrd,
    .crt-acnt-line,
    .navbar .nav-links a {
        font-size: 14px;
    }

    .inner-context-para, .welcome-text , .about-context-para,
    .content-para, .employer-btn,
    .download-line,
    .modal-para  {
        font-size: 16px;
    }

    .content-header,
    .build-your-future-para,
    .try-tuttarvik-heading,
    .content-no,
    .modal-head  {
        font-size: 28px;
    }

    .try-tuttarvik-heading,
    .skill-head,
    .what-is-tuttarvik,
    .our-support-head {
        font-size: 40px;
    }

    .arrow-icon {
        display: none !important;
    }

    .grid-item {
        margin: -20% 0px 0px 40px;
        width: 90%;
    }

    .mobile-img {
        display: block;
        width: 60vw;
        bottom: 0;
        right: 0;
    }

    .build-your-future-para {
        width: 75%;
    }

    .fun-and-easy-section-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .card-container {
        padding: 0px 0px 50px 20px;
    }

    .card-text-container, .card-image {
        max-width: 48vw;
    }


}

@media only screen and (min-width: 993px) and (max-width: 1196px) {
    .card-text-container, .card-image {
       height: inherit;
       width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .navbar .title,
    .navbar .nav-links {
        float: none;
        text-align: center;
        width: 100%;
        padding: 60px 0px 60px 0px !important
    }

    .navbar {
        background-color: rgb(25, 51, 86);
        overflow: hidden;
        position: fixed;
        width: 100%;
        z-index: 12;
    }

    .center-app-icons{
        margin: auto 0;
        display: flex;
    flex-direction: column;
    }


    .nav-img {
        display: block;
        height: 46px;
        width: 142px;
        margin: auto;
        /* margin: 30px 0px 10px 0px; */
    }

    .learn-more-btn {
        margin-bottom: auto;
        margin-left: 0 !important;
        /* margin: 40px 0px 0px 0px; */
    }


    .navbar .nav-links {
        display: none;
    }


    .unknown-text {
        display: block;
        margin: 0;
        padding: 0;
    }

    .navbar .nav-links a {
        font-size: 20px;
       /* / margin: -50% 0px 10% 0px; */
    }

    .login {
        border-right: none;
        padding: 0px;
    }

    .navbar .nav-links.active {
        display: block;
        height: 100vh;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
        margin: auto;
    }

    /* Style the "hamburger" menu icon */
    .navbar .menu-icon {
        display: block;
        padding: 30px 40px;
        font-size: 30px;
        margin: -12px 0px 0px 0px;
        text-align: right;
        cursor: pointer;
        color: #fff;
        position: absolute;
        right: 0;
        top: 15px;
    }

    .mobile-img {
        display: block;
        width: 80vw;
        bottom: 0;
        right: 0;
    }

    .grid-item {
        margin: -50% 0px 0px 40px;
        width: 90%;
    }

    .main-heading {
        font-size: 7vw;
    }

    .hero-banner,
    .color-layer {
        height: 120vh; /* Adjust the height as needed */
        width: 100%;
    }

    .about-content-container {
        flex-direction: column;
    }

    .grid-item-left {
        width: 87%;
    }

    /* .what-is-tuttarvik,
    .skill-head {
        font-size: 4vw;
    } */

    .hr {
        width: 40vw;
    }

    /* .fun-and-easy-heading {
        font-size: 5vw;
    }

    .fun-and-easy-para {
        font-size: 1.8vw;
    } */

    .about-section-container {
        padding-bottom: 15% !important;
    }

    .get-started-section-bg {
        height: auto;
    }

    .get-started-container {
        flex-direction: column;
        padding-bottom: 10%;
        margin-top: 10%;
    }

    .try-tuttarvik-heading {
        margin-bottom: 5%;
        width: 100%;
    }

    .get-started-right-grid {
        width: 100%;
    }

    .yt-video {
        width: 77%;
        height: 60vh;
        margin: 60px 10% 40px 11%;
    }

    .inner-context-para {
        min-width: 250px;
        max-width: 500px;
        padding: 0px 30px 0px 0px;
    }

    .form-container {
        display: flex;
        flex-direction: column;
    }

    .form-group-language,
    .form-group {
        width: 100%;
    }

    .acnt-create-head {
        font-size: 3vw;
    }

    .job-seeker-section {
        margin-top: -19vh;
    }

    .employer-btn {
        display: none;
    }

    .mobile-employer-btn {
        display: block;
    }

    /* .content-para {
        width: 100%;
        font-size: 2vw;
    } */

    .welding-image {
        max-width: 80vw;
    }

    .footer-content-container {
        width: 85%;
        display: flex;
        flex-direction: column;
        align-items: initial;
    }

    .logo {
        margin: 40px 0px 0px 0px;
        width: 25vw;
        height: auto;
    }

    .content-header {
        margin: 45px 0px 0px 0px;
    }

    .links-container {
        flex-direction: column;
    }

    .copyright {
        padding: 15px 0px 0px 0px;
    }

    .footer-links {
        padding: 20px 0px;
    }

    .footer-img {
        height: 40px;
        display: block !important;
        margin: 0px 8px 0px 8px;

    }

    .arrow-icon  {
        display: none !important;
    }

    .build-your-future-para {
        width: 85%;
    }

    .about-content-inner-container {
        width: 90%;
    }

    .card-text-container, .card-image {
        max-width: 70vw;
    }

     .footer-content-container,
    .logo-content-container {
        flex-direction: column;
    }

    .employer-btn {
        right: 0;
        top : 100%;
        position: relative;
    }

    .footer-content {
        text-align: center;
        justify-content: center;
        align-items: center;
    }

    .content-left-side {
        justify-content: center;
    }

    .copyright {
        text-align: center;
    }

    .supporters-container {
        flex-direction: column;
        align-items: center;
    }


}

@media screen and (max-width: 576px) {
    .about-skill-section {
        min-width: 200px;
    }

    .hero-banner, .color-layer {
        height: 120vh;
    }

    .build-your-future-para {
        width: 100%;
        padding: 0px 9vw;
    }

    .download-line {
        text-align: center;
        padding: 0px 80px;
    }

    .about-content-container {
        margin: 10vh 0px 0px 0px;
    }

    /* .skill-para {
        max-width: 50%;
        font-size: 13px;
    }

    .fun-and-easy-heading {
        font-size: 5.8vw;
    }

    .fun-and-easy-para {
        font-size: 2vw;
    } */

    .about-section-container {
        padding-bottom: 15% !important;
    }

    .acnt-create-head {
        font-size: 25px;
    }

    .job-seeker-form-container {
        padding: 10% 6%;
    }

    .job-seeker-section {
        margin-top: -15vh;
    }

    .grid-item {
        margin: -70% 0px 0px 20px;
    }
    .our-support-head {
        margin: 0px 35px 30px 35px;
    }

    .get-started-content-container {
        flex-direction: column;
    }

    .logo-content-container {
        flex-direction: column;
        padding: 20% 0% 15% 0%;
    }

    .footer-content {
        text-align: center;
        justify-content: center;
    align-items: center;
    }

    .content-no {
        min-width: 160px;
        width: 131px;
        margin: 0px 0px 10px 10px;
        border-radius: 50px;
        height: 55px;
    }

    .yt-video {
        height: 170px;
        width: 90%;
    margin: 60px 10% 40px 5%;
    }

    .arrow-icon {
        display: none !important;
    }

    .inner-context-images {
        display: flex;
        flex-direction: column;
    }

    .content-images {
        height: 50px;
        margin: 0px 15px 20px 0px;
        width: 170px;
    }

    .content-para {
        min-width: 190px;
        /* font-size: 13px; */
        margin: 20px 0px 20px 0px;
    }

    .copyright {
        text-align: center;
        padding: 30px 17%;
    }

    .logo {
        width: 180px;
        height: auto;
        margin: 0px 0px 30px 0px;
    }
    .footer-content {
        margin: 0px;
    }

    .footer-img {
        height: 40px;
        display: block !important;
    }

    .content-left-side {
        margin: 0px 0px 20px 0px;
    }

    .footer-links {
        padding: 0px 0px 20px 0px;
    }

    .mobile-img {
        display: block;
        width: 100vw;
        bottom: 0;
        right: 0;
    }

    .main-heading {
        font-size: 48px;
        width: 100%;

    }
    .welding-image {
        max-width: 80vw;
    }

    .about-content-inner-container {
        width: 90%;
    }

    .get-started-left-grid {
        padding: 7% 0px 0px 0px;
    }

    .crt-acnt-line {
        width: 145px;
    }

    .inner-context-heading {
        margin-top: 30px;
        font-size: 2.33rem;
    }

    .frgt-pswrd {
        width: 100%;
    }

    .employer-btn {
        width: 178px;
        padding: 15px 0px 17px 0px;
        max-width: 255px;
        height: 51px;
    }

    .try-tuttarvik-heading {
        width: 97%;
    }

    .modal-content {
        min-width: 310px;
        min-height: 597px;
        padding: 0px 30px;
    }

    .form-input  {
        width: 246px;
    }

    .nav-links.active {
        height: 100%;
    }

    .card-text-container, .card-image {
        max-width: 100%;
    }

    .fun-and-easy-section-container {
        padding: 0px 50px 0px 30px;
    }

    .form-group-row {
        flex-direction: column;
        position: relative;
    }
   /* targetting form-input-label under form-group-row */
   .form-group-row .form-input-label {
    width: max-content;
   }


}