/* @media (max-width: 430px) {
  header nav {
    display: none;
  }

  .banner {
    height: 12rem;
  }

  .banner2 {
    width: 100%;
  }
} */
@media (max-width: 1800px) {

  /*  body {
    background-color: red;
  } */
  .areas {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 70%;
    gap: 10px;
  }
}

@media (max-width: 1600px) {
  .banner h1 {
    font-size: 24px;
  }

  .banner>img {
    position: absolute;
    right: 0;
    width: 45%;
    height: 100%;
  }
}

@media (max-width: 1750px) {
  .testimonials {
    overflow: auto;
    width: 100%;
  }

  .feedback-card {
    overflow: auto;
  }

  .case {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 600px;
  }

  .case .infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .case .infos {
    width: 100%;
  }

  .case .infos h1 {
    text-align: center;
  }

  .case .infos p {
    text-align: center;
  }
}

@media (max-width: 1150px) {
  * {
    padding: 0;
    margin: 0;
  }

  header {
    flex-direction: row;
    justify-content: space-between;
    height: 11rem;
    gap: 15px;
    background: var(--Dark-Blue, linear-gradient(90deg, #010712 0%, #111C2D 24%, #1D3657 48.5%, #16263C 76%, #070F18 100%));
  }

  header nav {
    display: none;
  }

  header svg {
    display: block;
  }

  .banner {
    flex-direction: column-reverse;
    align-items: flex-start;
    background-size: 100% 100%;

    background: linear-gradient(90deg, #000000 0%, #0c1522 24%, #152841 48.5%, rgba(22, 38, 60, 0.9) 76%, rgba(5, 53, 107, 0.329) 100%);
    ;
    background: linear-gradient(90deg, #050702 0%, #2e2e2e 25%, #383838 50%, #2e2e2e 75%, #050702 100%);
  }

  .text {
    width: 80%;
    margin: 0 auto;
    align-items: flex-start;
    gap: 12px;
  }

  .social {
    width: 170px;
    justify-content: flex-start;
    height: 24px;
    gap: 12px;
    margin-bottom: 30px;
  }

  .social img {
    width: 40px;
    height: 40px;
  }

  .banner h1 {
    text-align: start;
    font-size: 35px;
    margin-bottom: 20px;
  }



  .banner h2 {
    font-size: 22px;
    /* width: 50%; */
    margin-bottom: 30px;
  }

  .banner1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12rem;
    height: 12rem;
  }

  .banner2 {
    display: none;
    height: 12rem;
    width: 100%;
  }

  .history {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .history div {
    margin: 10px 0;
  }

  .history h2 {
    font-size: 30px;
    margin: 10px 0;
  }

  .history p {
    width: 95%;
    font-size: 20px;
  }

  .history div:not(:nth-child(3)) {
    display: none;
  }

  .history.open div:not(:nth-child(3)) {
    display: block;
  }

  .ver {
    display: block;
  }

  .history img {
    display: none;
  }

  .values {
    width: 100%;
  }

  .values .title h1 {
    font-size: 40px;
    margin-top: 20px;
  }

  .pillars {
    flex-wrap: wrap;
    height: initial;
  }

  .pillar {
    justify-content: center;
    width: 48%;
    gap: 0;
    height: 225px;
  }

  .pillar h3 {
    font-size: 20px;
  }

  /* .pillar img {
    margin: 20px 0;
  } */

  .pillar p {
    display: none;
  }

  .thinking {
    flex-direction: column;
    gap: 10px;
    padding: 20px 10px;
    margin: 16px 0;
    margin-bottom: 0;
  }

  .thinking h3 {
    font-size: 18px;
  }

  .thinking p {
    font-size: 15px;
  }

  .activity {
    width: 100%;
    margin: 0;
  }

  .activity h1 {
    font-size: 26px;
  }

  .activity h2 {
    font-size: 20px;
  }

  .areas {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 70%;
    gap: 10px;
    margin-top: 60px;
  }

  /* 
  .area {
    min-width: 170px;
  } */

  .area p {
    display: none;
  }

  .cases {
    width: 100%;
    margin: 0;
  }

  .cases h1 {
    font-size: 26px;
  }

  .cases h2 {
    font-size: 20px;
    text-align: center;
  }

  .case {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 600px;
  }

  .case .infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .case .infos {
    width: 100%;
  }

  .case .infos h1 {
    text-align: center;
  }

  .case .infos p {
    text-align: center;
  }

  .hire {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 30px 0;
    background: linear-gradient(90deg, rgba(1, 7, 18, 0.00) 0%, #111C2D 25%, #1D3657 50%, #16263C 75%, rgba(7, 15, 24, 0.00) 100%);
  }

  .hire h2 {
    text-align: center;
    font-size: 18px;
  }

  .reasons {
    overflow: hidden;
    width: 100%;
    flex-wrap: wrap;
    height: inherit;
    height: 525px;
  }

  .reason {
    width: 200px;
    justify-content: center;
    height: 250px;
  }

  .reason img {
    width: 200px;
    height: 200px;
  }

  .feedbacks {
    width: 100%;
  }

  .feedbacks h2 {
    font-size: 20px;
    text-align: center;
  }

  .testimonials {
    width: 100%;
    overflow: auto;
  }

  .feedback-card {
    min-width: 300px;
    overflow: auto;
  }

  .testimonial {
    min-width: 303px;
  }

  footer {
    width: 100%;
  }

  footer div:nth-child(1) {
    width: 100%;
    height: inherit;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  footer div .info:nth-child(2) {
    margin-right: 14.6875rem;
  }

  footer .map {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  footer .map iframe {
    width: 90%;
    height: 100%;
    border-radius: 15px;
  }

  footer p {
    font-size: 12px;
    width: 90%;
  }

  .team {
    overflow: hidden;
    width: 100%;
    padding: 0 0;
    padding-top: 279px;
  }

  .teamModal.open .member {
    flex-direction: column;
  }

  .teamModal.open .member span {
    gap: 5px;
  }

  .teamModal.open {
    background-color: rgba(0, 0, 0, 0.699);
  }

  .teamModal.open {
    top: 285px;
  }

  .team img {
    width: 592.105px;
    height: 613.556px;
  }

  .team .content {
    width: 100%;
    gap: 25px;
  }

  .history h1 {
    font-size: 20px;
  }

  footer>img {
    margin: 30px;
  }

  .fixed {
    bottom: calc(10% - 40px);
    right: 30px;
    width: 50px;
    height: 50px;
  }

  /* .team .content>img {
    display: none;
  } */
}

@media (max-width: 545px) {
  * {
    padding: 0;
    margin: 0;
  }

  .caseModalContainer .case {
    width: 95%;
  }

  .banner>img {
    display: none;
    /*  width: 100%;
    opacity: 0.1; */
  }

  header {
    flex-direction: column;
    justify-content: center;
    height: inherit;
    gap: 15px;
    background: var(--Dark-Blue, linear-gradient(90deg, #010712 0%, #111C2D 24%, #1D3657 48.5%, #16263C 76%, #070F18 100%));
  }

  header img {
    margin: 30px 0;
  }

  header nav {
    display: none;
    flex-direction: column;
    gap: 15px;
  }

  header svg {
    display: block;
    padding: 10px 0 25px 0;
  }

  .banner {
    flex-direction: column-reverse;
    align-items: flex-start;
    background-size: 100% 100%;

    background: linear-gradient(90deg, #000000 0%, #0c1522 24%, #152841 48.5%, rgba(22, 38, 60, 0.9) 76%, rgba(5, 53, 107, 0.329) 100%);
    ;
    background: linear-gradient(90deg, #050702 0%, #2e2e2e 25%, #383838 50%, #2e2e2e 75%, #050702 100%);
  }

  .text {
    width: 80%;
    margin: 0 auto;
    align-items: flex-start;
    gap: 12px;
  }

  .social {
    width: 170px;
    justify-content: flex-start;
    height: 24px;
    gap: 12px;
    margin-bottom: 30px;
  }

  .social img {
    width: 40px;
    height: 40px;
  }

  .banner h1 {
    font-size: 35px;
    margin-bottom: 20px;
  }

  .banner h2 {
    font-size: 22px;
    /* width: 50%; */
    margin-bottom: 30px;
  }

  .banner1 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 12rem;
    height: 12rem;
  }

  .banner2 {
    display: none;
    height: 12rem;
    width: 100%;
  }

  .history {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .history div {
    margin: 10px 0;
  }

  .history h2 {
    font-size: 17px;
    margin: 10px 0;
  }

  .history p {
    width: 95%;
    font-size: 13px;
  }

  .history div:not(:nth-child(3)) {
    display: none;
  }

  .ver {
    display: block;
  }

  .history img {
    display: none;
  }

  .values {
    width: 100%;
  }

  .values .title h1 {
    font-size: 40px;
    margin-top: 20px;
  }

  .pillars {
    flex-wrap: wrap;
    height: initial;
  }

  .pillar {
    justify-content: center;
    width: 48%;
    gap: 0;
    height: 225px;
  }

  .pillar h3 {
    font-size: 20px;
  }

  /* 
  .pillar img {
    margin: 20px 0;
  } */

  .pillar p {
    display: none;
  }

  .thinking {
    flex-direction: column;
    gap: 10px;
    padding: 20px 10px;
    margin: 16px 0;
    margin-bottom: 0;
  }

  .thinking h3 {
    font-size: 18px;
  }

  .thinking p {
    font-size: 12px;
  }

  .activity {
    width: 100%;
    margin: 0;
  }

  .activity h1 {
    font-size: 26px;
  }

  .activity h2 {
    font-size: 20px;
  }

  .areas {
    /* 
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center; */
    display: flex;
    width: 100%;
    /*  gap: 10px; */
  }

  .area {
    width: 160px;
  }

  .area p {
    display: none;
  }

  .cases {
    width: 100%;
    margin: 0;
  }

  .cases h1 {
    font-size: 26px;
  }

  .cases h2 {
    font-size: 20px;
    text-align: center;
  }

  .case {
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 600px;
  }

  .case .infos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .case .infos {
    width: 100%;
  }

  .case .infos h1 {
    text-align: center;
  }

  .case .infos p {
    text-align: center;
  }

  .hire {
    width: 100%;
    height: inherit;
    margin: 0;
    padding: 30px 0;
    background: linear-gradient(90deg, rgba(1, 7, 18, 0.00) 0%, #111C2D 25%, #1D3657 50%, #16263C 75%, rgba(7, 15, 24, 0.00) 100%);
  }

  .hire h2 {
    text-align: center;
    font-size: 18px;
  }

  .reasons {
    width: 100%;
    flex-wrap: wrap;
    height: inherit;
    height: 525px;
  }

  .reason {
    width: 170px;
    justify-content: center;
    height: 250px;
  }

  .reason p {
    font-size: 20px;
  }

  .reason img {
    width: 200px;
    height: 200px;
  }

  .feedbacks {
    width: 100%;
  }

  .feedbacks h2 {
    font-size: 20px;
    text-align: center;
  }

  .testimonials {
    width: 100%;
    overflow: scroll;
  }

  .testimonial {
    min-width: 300px;
  }

  footer {
    width: 100%;
  }

  footer div:nth-child(1) {
    width: 100%;
    height: inherit;
    flex-wrap: wrap;
  }

  footer .map {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  footer .map iframe {
    width: 90%;
    height: 100%;
    border-radius: 15px;
  }

  footer p {
    font-size: 12px;
    width: 90%;
  }

  footer>div .info p.insta {
    font-size: 16px;
  }

  footer div .info:nth-child(2) {
    margin-right: 0;
  }

  .team {
    overflow: hidden;
    width: 100%;
    padding: 0 0;
    padding-top: 279px;
  }

  .team img {
    /* width: 100%; */
    height: 613.556px;
  }

  .team .content {
    width: 100%;
    gap: 25px;
  }

  .team .content .member img {
    width: 80%;
    height: 60%;
  }

  .history h1 {
    font-size: 20px;
  }

  footer>img {
    margin: 30px;
  }

  .member h1 {
    font-size: 20px;
    height: 24px;
  }

  .teamModal.open .member span p {
    font-size: 10px;
  }

  .fixed {
    bottom: calc(10% - 40px);
    right: 30px;
    width: 50px;
    height: 50px;
  }

  .team .content .teamModal.open .member img {
    width: 45%;
    height: 45%;
  }

  .history.open .seeMore {
    display: none;
  }

  .history .seeMore {
    display: block;
    font-size: 10px;
    width: 120px;
    height: 25px;
    margin-bottom: 5px;
  }

  /* .team .content>img {
    display: none;
  } */

}