/* --- Tablet Mode (Max-width: 992px) --- */
@media (max-width: 992px) {
  .HeaderClass {
    height: 700px;
    padding: 1rem 0rem 0rem 0rem;
    width: 100%;
    clip-path: none;
  }
  .HeaderSearch {
    justify-content: flex-start;
  }
  .PictureText {
    /* flex-direction: column-reverse; */
    /* align-items: center; */
    gap: 3rem;
  }

  .Header1 {
    width: 90%;
    /* margin: 0 auto; */
    text-align: right;
    align-items: flex-start;
  }

  .Header2 {
    width: 100%;
  }

  .Header2 img {
    width: 500px;
    height: 200px;
    margin-top: 0;
  }

  .ImageHeader1 {
    width: 100%;
  }

  .cardCompany {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }

  .cardCompany p {
    width: 100%;
  }

  .articlesContainer1 {
    width: 45%;
  }

  .newsContainer {
    flex-direction: column;
  }

  .inner-wrapper {
    flex-direction: column;
    gap: 4rem;
  }

  .list-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
  }
}

/* --- Mobile Mode (Max-width: 768px) --- */
@media (max-width: 768px) {
  .sectionClass,
  .containerArticles,
  .newsContainer,
  .aboutContainer,
  .teammateContainer,
  .inner-wrapper {
    padding-right: 2rem;
  }

  .MenuHumberger {
    position: fixed;
    right: 0; /* چسباندن به لبه راست */
    top: 0;
    width: 50px; /* عرض کمتر برای اشغال نکردن فضا */
    height: 100vh; /* تمام قد */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 1000;
    gap: 2rem;
    padding-top: 1rem;
  }

  .MenuHumbergerParagraphClass {
    display: flex;
    justify-content: center;
    transform: rotate(-90deg) translateX(-250px);
    transform-origin: center;
    white-space: nowrap;
    gap: 1.5rem;
  }

  .MenuHumbergerParagraphClass li a {
    font-size: 0.8rem;
  }

  .MenuHumbergerParagraphClass li a.active {
    font-size: 1rem;
  }

  .OurSubsidiaryCompany svg {
    width: 25px;
  }
  .OurSubsidiaryCompany h2 {
    font-size: 1.5rem;
    padding-top: 0.5rem;
  }
  .buttonCompany a {
    font-size: 1rem;
  }
  .buttonCompany svg {
    width: 10px;
  }
  .newsTitle {
    font-size: 1rem;
  }

  .custom-btn {
    margin-top: 0rem;
  }

  .SearchNumber {
    justify-content: flex-end;
    margin-left: 0;
    gap: 1rem;
  }
  .SearchNumber svg {
    width: 22px;
  }

  .phone {
    font-size: 1.2rem;
  }

  .Header2 h1,
  .Header2 img {
    max-width: 100%;
  }

  .Header2 p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    font-family: "IranSansLight";
    text-align: justify;
  }

  .headerBottom {
    width: 15rem;
    font-size: 1rem;
    padding: 0.6rem 1rem;
    line-height: 1.6rem;
    background-color: #254e8e;
    color: #fff;
    border: 1px solid #387adf;
  }

  .headerBottom svg path {
    stroke: #fff;
  }

  .headerBottom svg {
    width: 12px;
  }

  .HeaderPictureParagraph {
    font-size: 1.3rem;
  }

  .paragraphSVG {
    gap: 0.2rem;
  }

  .paragraph-Wrapper {
    justify-content: space-between;
    align-items: center;
    gap: 9rem;
  }
  .paragraphSVG svg {
    width: 25px;
  }

  .cardCompany {
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
    gap: 1.2rem;
    padding: 1.5rem;
    direction: rtl;
    clip-path: polygon(100% 0%, 100% 53%, 100% 100%, 12% 100%, 0 91%, 0 1%);
  }

  .cardCompany > img:not(.cardCompanyLogo) {
    order: 1;
    width: 100%;
    border-radius: 15px;
  }

  .cardCompany .cardCompanyMain {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0.5rem;
  }

  .cardCompanyMain .cardCompanyLogo {
    order: 1;
    /* width: 70px;  */
    margin-right: 0;
  }

  .cardCompanyMain h3 {
    order: 2;
    font-size: 1.4rem;
    margin: 0;
    color: #000066;
    font-family: "DoranBold";
  }

  .cardCompany p {
    order: 3;
    width: 100%;
    font-size: 0.95rem;
    line-height: 1.8rem;
    text-align: justify;
    margin: 0;
  }

  .OurSubsidiaryCompanyParagraph {
    font-size: 22px;
  }

  .articlesContainer1 {
    width: 100%;
  }
  .articlesContainer {
    gap: 0.5rem;
  }

  .articleDesctiption h3 {
    font-size: 1.5rem;
  }

  .articleDesctiption p {
    font-size: 0.9rem;
  }

  .newsCardDescription h3 {
    font-size: 1.5rem;
  }

  .newsCardDescription p {
    font-size: 0.9rem;
    line-height: 1.5rem;
  }

  .newsCard {
    width: 95%;
    margin: 2rem auto;
  }

  .custom-col-2 {
    align-items: end;
  }

  .newsButton {
    padding-right: 0;
  }

  .newsButton a {
    font-size: 1rem;
  }
  .newsButton a::before {
    background-size: 90px;
    background-position: center;
    margin-left: 3rem;
  }
  .newsButton svg {
    width: 25px;
  }

  .newsTitle h2 {
    font-size: 1.8rem;
  }

  .about {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0rem;
  }

  .aboutImage img {
    order: 1;
    width: 350px;
    padding-top: 5rem;
  }

  .aboutCompany {
    padding-right: 2rem;
    gap: 0.2rem;
  }

  .aboutCompany h2,
  .aboutCompany span {
    font-size: 1.5em;
    order: 2;
  }
  .aboutCompany p {
    order: 2;
    font-size: 1rem;
    text-align: justify;
  }
  .buttonAbout {
    margin-right: 1rem;
  }

  .buttonAbout,
  .buttonAbout a::before {
    order: 2;
  }
  .buttonAbout a {
    font-size: 1rem;
    margin-right: 3rem;
  }

  .buttonAbout a::before {
    background-size: 100px;
  }

  .sectionTeammate {
    padding: 0;
  }
  .aboutContainer {
    padding: 0 1rem;
  }

  .teammateContainer {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 3rem;
  }

  .teammateCarousel {
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
  }

  .teammateCarousel img {
    width: 90px;
    height: auto;
  }

  .f-about {
    width: 100%;
    padding-left: 0;
    text-align: justify;
    justify-content: flex-start;
  }

  .f-about p {
    font-size: 0.9rem;
    line-height: 1.3rem;
  }

  .f-about img {
    width: 80%;
    /* margin: 0 auto; */
  }
  .f-links h2,
  .f-companies h2,
  .f-contact h2 {
    font-size: 1.2rem;
  }

  .f-links li a,
  .f-companies li a,
  .f-contact li a {
    font-size: 0.8rem;
    line-height: 1.8rem;
  }

  .inner-wrapper {
    justify-content: flex-start;
  }

  .list-wrapper {
    flex-direction: row;
    justify-content: flex-start;
  }

  .copyRight-wrapper {
    flex-direction: row;
    justify-content: space-around;
    gap: 2rem;
    padding: 0;
  }
  .copyRight {
    font-size: 0.7rem;
  }
  .f-year {
    font-size: 0.7rem;
    padding-left: 0;
  }

  .f-location p {
    font-size: 0.9rem;
  }
  .f-phone p {
    font-size: 0.9rem;
  }
  label input {
    width: 15rem;
    padding: 0.65rem;
  }
  label button {
    padding: 0.75;
  }
}