@media (max-width: 1200px) {
  .videoContainer .videoContent {
      padding-left: 50px;
      padding-bottom: 50px;
  }
}
@media (max-width: 768px) {
.nav-container {
    max-height: 46px;
    padding-right: 28px;
    padding-left: 28px;
}
.nav-container ul li:not(.submenu-item):nth-of-type(2) {
    padding: 8px 0;
}
.nav-menu.active {
    row-gap: 12px;
}
.nav-container ul li .submenu {
    margin: 0 !important;
}
  .nav-menu {
    display: none;
  }

  .nav-menu.active {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 9999;
    gap: 2rem;
    flex-direction: column;
    margin-top: 67px;
    padding-top: 47px;
    justify-content: start;
  }

.nav-container ul li {
    text-align: left;
    padding: 8px 0 !important;
}
  .nav-menu li a {
    font-size: 18px;
    color: #000;
    text-align: center;
  }

  .nav-container ul li:nth-of-type(2) {
    margin: 0;
  }

  .nav-menu li .submenu {
    display: none;
  }
  .nav-container ul {
    display: none;
  }

  .logo {
    display: block;
  }
  .nav-container img:not(.logo):not(#mobileMenu):not(.arrowIcon) {
    display: none;
  }
#mobileMenu {
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    row-gap: 5px;
    width: 24px;
    height: 24px;
    justify-content: center;
    align-items: center;
}
.whiteLogo .line {
  background: #fff;
}
#mobileMenu .line {
    width: 24px;
    height: 2px;
    display: block;
    background: #00546b !important;
    border-radius: 1px;
}
  .nav-container ul li .submenu {
    position: relative;
    min-height: auto;
    left: auto;
    right: auto;
    transform: none;
    height: 0;
    min-width: auto;
  }

  .nav-container ul li .submenu.active {
    height: max-content;
    transform: none;
    height: auto;
    min-height: auto;
    margin-top: 18px !important;
    row-gap: 8px;
  }

  .videoContainer .videoContent {
    bottom: 100px;
    padding: 0;
    text-align: center;
    width: calc(100% - 40px);
    left: 20px;
  }

  .videoContainer .videoContent .heading {
    font-size: 24px;
  }
  .videoContainer .videoContent p {
    font-size: 16px;
  }

  .philosophy .mobile {
    display: block;
  }

  .philosophy .imageGroup {
    display: none;
  }

  .philosophy {
    display: flex;
    flex-direction: column;
    padding-right: 16px;
    padding-left: 16px;
    gap: 20px;
    height: calc(100vh - 186px);
  }
  .philosophy .content {
    padding: 16px;
    max-width: 100%;
  }
  .philosophy .content .heading {
    font-size: 18px;
    font-weight: 800;
  }

  .philosophy .content p {
    font-size: 14px;
  }
  .philosophy button {
    font-size: 12px;
    max-height: 46px;
    background-color: #15354e;
    color: white;
  }

  .philosophy button img {
    filter: brightness(0) saturate(100%) invert(200%) sepia(0%) saturate(2626%) hue-rotate(126deg) brightness(97%) contrast(98%);
  }

  .philosophy .counterItem .heading {
    font-size: 14px;
  }
  .philosophy .counterItem p {
    font-size: 12px !important;
  }
  /* solutions */
  .solutionContainer {
    flex-direction: column;
  }

  .solutionContainer .banner img:nth-of-type(1) {
    display: none;
  }

  .solutionContainer .banner img:nth-of-type(2) {
    display: block;
  }

  .solutionContainer .content {
    padding: 0;
    text-align: center;
    align-items: center;
    padding: 16px;
    min-width: auto;
    order: 2;
    max-width: 100%;
  }
  .solutionContainer .content .heading {
    margin: 0;
    font-size: 16px;
  }
  .solutionContainer .content p {
    text-align: center;
    font-size: 14px;
  }

  .solutionContainer .content .main {
    margin: 0;
    max-width: 100%;
    margin-top: 40px;
  }

  .solutionContainer .content button,
  .philosophy button {
    margin-top: 40px;
    font-size: 12px;
  }
  .solutionContainer .banner {
    overflow: auto;
  }
  .solutionContainer .banner img {
    width: 100%;
  }

  .description .content {
    padding: 18px;
  }

  .description .content .heading {
    font-size: 18px;
    margin: 0;
  }

  .description .content p {
    font-size: 12px;
    line-height: 140%;
    color: #b0b0b0;
  }

  .description {
    padding-right: 16px;
    padding-left: 16px;
  }

  /* form section */
  .formSection {
    max-width: 100%;
    margin-right: 16px;
    margin-left: 16px;
    padding-top: 67px;
    height: calc(100vh - 67px);
  }

  .formSection .content {
    width: 100%;
  }

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

  .formSection span {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .formSection form {
    min-width: calc(100% - 54px);
    padding-right: 27px;
    padding-left: 27px;
  }

  footer .links {
    display: flex;
    flex-direction: column;
    padding-right: 16px;
    padding-left: 16px;
  }

  footer .links .linksDouble {
    justify-content: start;
  }

  footer .socials {
    margin-top: 0px;
    padding: 16px;
    min-width: max-content;
    text-align: center;
    width: auto;
    display: block;
  }
  footer .links .link ul {
    gap: 14px;
  }
  footer .links .link,
  .sideMenu .link {
    gap: 10px;
  }

  .philosophy .counter {
    margin-bottom: 70px;
  }

  .philosophy .counter .counterItem:nth-of-type(3) {
    min-width: auto;
  }
  .philosophy .counter .counterItem:nth-of-type(2) {
    min-width: auto;
  }
  .philosophy .counter .counterItem .inner-heading {
      margin: 12px 0;
  }
  .mobileContactWrapper {
    display: block;
  }
  .pcContactWrapper {
    display: none;
  }

  .brandBannerWrapper .videoContainer {
    background-image: url("../images/brandMobileBanner.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }

  .aboutBannerWrapper button {
    width: 100%;
    font-size: 12px;
    height: 40px;
  }

  .aboutBannerWrapper button img {
    width: 22px;
    height: 22px;
  }

  .carouselContainer {
    justify-content: center;
    padding: 17px;
  }

  .thumbs {
    justify-content: center;
    margin-top: -83px;
  }

  .thumbs img {
    width: 30px;
    height: 30px;
    margin-left: -8px;
  }

  .boardsContainer .boards {
    grid-template-columns: repeat(1, 1fr);
  }
  .boardsContainer .boards .board {
    padding: 12px;
  }
  .boardsContainer .boards .board img {
    width: 28px;
  }
  .boardsContainer .boards .board .heading {
    margin-top: 4px;
    font-size: 18px;
  }

  .boardsContainer .boards .board p {
    margin: 0;
    margin-top: 10px;
    font-size: 12px;
  }
  .boardsContainer .heading {
    font-size: 24px;
    margin-top: 0;
  }

  .boardsContainer .boards .board:nth-of-type(1),
  .boardsContainer .boards .board:nth-of-type(3) {
    border-right: 0;
  }

  .boardsContainer .boards .board:nth-of-type(3) {
    border-bottom: 2px solid #f4f4f41f;
  }

  .boardsContainer {
    gap: 20px;
  }
  .item {
    display: flex;
    flex-direction: column;
  }
  .item .itemContent {
    order: 2;
    text-align: center;
    padding: 12px;
  }
  .item .itemImageContainer {
    padding: 0px;
    order: 1;
  }

  .owl-theme .owl-nav {
    margin-top: 50px !important;
    justify-content: center;
  }
  .item .itemContent .heading {
    font-size: 14px;
  }

  .item .itemContent p {
    font-size: 10px;
  }

  .item .itemContent button {
    font-size: 12px;
    width: 160px;
    height: 34px;
    margin: auto;
    margin-top: 24px;
  }
  .item .itemImageContainer .itemSocials img {
    width: 22px;
    height: 22px;
  }
  .item .itemImageContainer .mobileItemSocials {
    display: flex !important;
  }
  .item .itemImageContainer .itemSocials {
    display: none;
  }
  .mobileItemsContainer {
    order: 3 !important;
  }

  .contactusForm {
    padding-left: 16px;
    padding-right: 16px;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    height: 100%;
  }

  .contactusForm .content {
    font-size: 18px;
    /* text-align: center; */
    margin-bottom: 4px;
    margin-top: 0;
  }

  .contactusForm .link .heading {
    margin: 14px 0;
  }

  .contactusForm p {
    font-size: 14px;
    /* text-align: center; */
    margin: 0;
  }

  /* .contactusForm .link {
    text-align: center;
  } */

  /* .contactusForm .link .linkItem {
    justify-content: center;
  } */
  .contactusForm .description.expand {
    height: max-content;
  }

  .formSection form {
    padding: 0;
    width: 100%;
    gap: 4px;
  }

  .contactusForm .formSection form input,
  .contactusForm .formSection form textarea {
    background-color: #ffffff21;
    height: 20px;
    max-height: 20px;
    min-height: 20px;
  }

  .contactusForm .formSection form textarea {
    height: 90px;
    max-height: 90px;
    min-height: 90px;
  }

  .formSection form button {
    margin-top: 10px;
  }
  .contactusForm .content .heading {
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 0;
  }

  .pinsContainer {
    flex-direction: column;
    padding-top: 83px;
    padding-right: 26px;
    padding-left: 26px;
    gap: 14px;
    height: calc(100vh - 166px);
  }
  .pinsContainer .pinItem p {
    font-size: 12px;
  }

  .pinsContainer hr {
    min-height: 0px;
    min-width: 100%;
  }

  .pinsContainer .pinItemHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .pinsContainer .pinItemHeader .heading {
    font-size: 16px;
  }

  .pinsContainer .pinItemHeader img {
    width: 34px;
    height: 34px;
  }

  .jobsContainer {
    padding-top: 98px;
    padding-left: 16px;
    padding-right: 16px;
    gap: 18px;
  }

  .jobsContainer .jobsHeader .heading {
    font-size: 22px;
  }

  .jobsContainer .jobsHeader span {
    font-size: 14px;
  }

  .jobsContainer .jobItem {
    padding: 16px 0;
  }

  .jobsContainer .jobItem .jobItemContent .heading {
    font-size: 16px;
  }
  .jobsContainer .jobItem .jobItemContent .jobItemDetail {
    font-size: 12px;
  }
  .jobsContainer .jobItem button {
    font-size: 12px;
  }

  .singleJobPageWrapper {
    padding-top: 106px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .jobDetailsContainer .jobDetailsContent {
    margin-top: 40px;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 24px;
  }

  .jobDetailsContent .jobItemContent .heading {
    font-size: 22px;
  }

  .jobDetailsContainer .applyButton {
    height: 42px;
    width: 260px;
  }
  .jobDetailsContainer .applyLastButton {
    width: 100%;
  }

  .modal {
    padding: 16px;
    width: calc(100% - 32px);
  }
  .modalContent {
    max-width: calc(100% - 82px);
  }

  .submitCV {
    margin-top: 0;
  }

  .modalContent .mainContent {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  .modalContent .mainContent .heading {
    text-align: center;
  }

  .modalContent .mainContent p {
    font-size: 14px;
  }
  .modalContent .mainContent form .controls {
    grid-template-columns: repeat(1, 1fr);
  }

  .historyCardItem.active .historyCardImage {
    height: unset;
    width: unset;
    max-width: unset;
    margin-top: 0;
    padding: 12px;
  }
  .historyCardImage img {
    position: unset;
  }
  .historyCardItem.active .historyCardImage img:last-child {
    transform: none;
    max-height: 100px;
  }

  .historyCardItem {
    width: 260px;
    margin: auto 24px;
  }

  .historyCardItem.active {
    height: auto;
    flex-direction: column;
    width: unset;
    min-width: unset;
  }

  .historyCardItem.active .historyCardImage {
    width: unset;
  }

  .horizontalScroll .scrollInner {
    padding-left: 20px;
    gap: 0px;
    padding-right: 20px;
  }

  .historyCardItem .historyCardContent span {
    font-size: 14px;
  }

  .historyCardItem .historyCardContent p {
    font-size: 12px;
  }

  .historyCardItem .historyCardContent .heading {
    font-size: 14px;
  }

  .historyGroupFlag span {
    font-size: 20px;
  }
    .modalContent {
      width: 95%;
      height: 62%;
  }
  .nav-container ul li .submenu {
      margin-top: 12px;
  }
}


@media (max-width: 480px) {
  .philosophy .counter {
      grid-template-columns: repeat(2, 1fr);
  }
  .description {
      padding-top: 120px;
  }
  .solutionContainer {
      gap: 34px;
  }
  .solutionContainer .content button, .philosophy button {
      margin-top: 12px;
  }
  .uploadBox {
      padding: 12px;
  }

}