@media screen and (max-width: 1150px) {
  h1.hero-header-text {
    font-size: 40px;
  }

  h1.hero-header-text {
    width: 100%;
  }

  h3.hero-sm-text {
    width: 60%;
  }

  p.paragraph.md-paragraph-size {
    width: 80vw;
  }

  .win-header-wrapper .paragraph {
    width: 50%;
  }

  .service-grid-wrapper {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .faq-wrapper {
    display: block;
  }

  .section-wrapper.faq-wrapper .faq-col:first-child {
    margin-bottom: 60px;
  }

  h1.hg-header {
    width: 100%;
    font-size: 30px;
  }

  .section-wrapper {
    width: 100%;
  }

  .section.services-section,
  .section {
    padding: 40px;
  }

  .projects-container {
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width: 1080px) {
  .hero-section-wrapper.portfolio h1.hero-header-text {
    width: 80%;
  }

  .filterable_cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .card {
    width: 100%;
  }

  .windows-container {
    display: block;
  }

  .transparant-window-container {
    margin-bottom: 20px;
    width: 100%;
  }

  .section.hero-section.connect .section-wrapper {
    flex-direction: column;
  }

  .input-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0px;
    width: 100%;
  }

  input.primary-input {
    width: 100%;
  }
}

@media screen and (max-width: 950px) {
  /* .menu-items {
    display: none;
  }

  .burger-btn {
    display: block;
  } */

  .nav-wrapper {
    width: 90vw;
  }

  .filterable_cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .nav-col.menu-items {
    display: none;
  }

  .burger-btn {
    display: block;
    width: 40px;
    height: 40px;
    background-color: #ffffff0d;
    border: none;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  h1.hero-header-text {
    font-size: 40px;
  }

  .sec-btn-wrapper,
  a.btn.primary-btn {
    font-size: 12px;
  }

  .transparant-window-container {
    width: 100%;
  }

  .win-header-wrapper p.paragraph {
    width: 100%;
    box-sizing: border-box;
  }

  .faq-col h1 {
    width: auto;
  }

  h1.primary-header.portfolio {
    width: 90%;
  }

  /* .section-wrapper.faq-wrapper .faq-col .primary-header,
  .section-wrapper.faq-wrapper .faq-col .paragraph {
    width: 100%;
  } */
}

@media screen and (max-width: 900px) {
  .filter-btns-wrapper {
    overflow-x: scroll;
    display: flex;
    width: 100%;
  }

  button.filter-btn {
    flex-shrink: 0;
    font-size: 12px;
    padding: 12px 22px;
  }
}

@media screen and (max-width: 850px) {
  .transparant-window-container {
    margin-bottom: 20px;
  }

  h1.hero-header-text {
    font-size: 30px;
  }

  p.paragraph.about {
    width: 100%;
  }

  .window-wrapper.about {
    padding: 40px;
  }

  .paragraph-wrapper {
    display: block;
  }

  .windows-container {
    display: block;
  }

  .service-grid-wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .filterable_cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }

  .paragraph-wrapper .paragraph:first-child {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 800px) {
  .hero-section-wrapper.portfolio h1.hero-header-text {
    font-size: 30px;
  }

  ul.footer-ul {
    flex-direction: column;
  }

  a.footer-info {
    font-size: 12px;
  }

  .footer-li b {
    font-size: 12px;
  }

  img.footer-icon {
    width: 4vw;
  }

  li.footer-li {
    margin-right: 0;
  }

  .footer-icon-main {
    width: 10vw;
    height: 10vw;
  }

  .section.hero-section.portfolio {
    height: 250px;
  }

  .popup-box {
    width: 90%;
  }
}

@media screen and (max-width: 650px) {
  h2.form-header {
    font-size: 22px;
  }

  .icon-wrapper {
    width: 10vw;
    height: 10vw;
  }

  img.mission-vision-icon {
    width: 5vw;
  }

  label {
    font-size: 12px;
  }

  .window-wrapper {
    padding: 40px;
  }

  h1.hero-header-text {
    font-size: 28px;
  }

  h1.primary-header {
    font-size: 22px;
  }

  h3.hero-sm-text {
    width: 94%;
    line-height: normal;
    font-size: 14px;
  }

  .btn-wrapper {
    flex-direction: column;
  }

  img.jm_logo {
    width: 120px;
    margin-bottom: 20px;
  }

  .btn-wrapper {
    padding: 0;
  }

  p.paragraph {
    font-size: 12px;
    line-height: 18px;
  }

  .win-header-wrapper .paragraph {
    width: 100%;
  }

  h3.service-sub-title {
    font-size: 12px;
  }

  h1.hg-header {
    font-size: 28px;
    line-height: normal;
  }

  a.btn.secondary-btn {
    padding: 0;
    width: 100%;
  }

  a.btn.secondary-btn .sec-btn-wrapper {
    width: 100%;
  }

  a.btn.secondary-btn .sec-btn-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 26px;
  }

  a.btn.primary-btn {
    margin: 0;
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .hero-section-wrapper.portfolio h1.hero-header-text {
    font-size: 20px;
  }

  .filterable_cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  h4.card-title {
    font-size: 12px;
  }
}

@media screen and (max-width: 550px) {
  .sidebar {
    width: 100%;
  }
}

@media screen and (max-width: 450px) {
  .window-wrapper,
  .window-wrapper.about {
    padding: 30px;
  }

  .window-wrapper.about {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  img.mission-vision-icon {
    width: 8vw;
  }

  .icon-wrapper {
    width: 14vw;
    height: 14vw;
    margin-bottom: 20px;
  }

  h3#popup-title {
    font-size: 14px;
  }

  .card {
    height: 100%;
  }

  .section.hero-section.portfolio {
    height: 180px;
  }

  .footer-wrapper .col {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img.footer-logo {
    width: 60%;
    margin-bottom: 40px;
  }

  footer.main-footer {
    padding: 20px;
    padding-top: 60px;
  }

  .section.services-section,
  .section {
    padding: 20px;
  }

  .service-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .window-wrapper {
    padding: 30px;
    border-radius: 20px;
  }

  .faq-col .primary-header {
    /* width: 100%; */
  }

  .faq-col p {
    width: 100%;
  }

  .faq-content-wrapper {
    padding-bottom: 0;
  }

  .answer {
    /* padding-bottom: 20px; */
  }

  .answer p {
    font-size: 10px;
    padding-bottom: 10px;
  }

  .btn.secondary-btn.about-btn {
    width: 60%;
  }

  h2.faq-question {
    font-size: 12px;
    width: 80%;
    line-height: 18px;
  }

  .btn.primary-btn {
    padding: 15px 26px;
  }

  h1.hero-header-text {
    font-size: 20px;
  }

  h1.hg-header {
    font-size: 18px;
  }

  .section.hero-section {
    height: 600px;
  }

  .nav-logo {
    width: 100px;
  }

  .section.about-me {
    padding: 40px;
  }

  .slick-slider {
    width: 88vw !important;
  }

  .transparant-window-container {
    padding: 10px;
  }

  .section-wrapper.short-msg {
    margin-top: 60px;
  }

  h2.service-title {
    font-size: 16px;
  }

  h1.primary-header {
    font-size: 18px;
  }

  p.paragraph.portfolio {
    width: 70%;
  }

  h4.card-title {
    font-size: 12px;
  }

  label.cat_name {
    font-size: 10px;
  }

  .item-box .card img.card-img {
    height: 110px;
  }
  .projects-container {
    margin-top: 40px;
  }
}

@media screen and (max-width: 320px) {
  h1.hero-header-text {
    font-size: 16px;
    margin-bottom: 10px;
  }

  h3.hero-sm-text {
    width: 80%;
    font-size: 12px;
  }

  a.btn.secondary-btn {
    padding: 0;
    width: 100%;
  }

  a.btn.secondary-btn .sec-btn-wrapper {
    width: 100%;
  }

  a.btn.secondary-btn .sec-btn-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 26px;
  }

  a.btn.primary-btn {
    margin: 0;
    width: 100%;
  }

  a.btn.primary-btn {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

@media screen and (max-height: 550px) {
  .popup-img {
    width: max-content;
    height: 60vh;
  }

  .popup-box {
    width: max-content;
  }

  h3#popup-title {
    font-size: 12px;
  }
}