/*
 * TravelCore Arabic presentation layer.
 *
 * The shared TechGuru component markup and generated RTL theme are loaded
 * first. This file contains only Arabic-specific typography, visual direction,
 * image treatment, responsive sizing and directional icon corrections, so the
 * English component styles remain untouched.
 */

.techguru-ar {
  --techguru-font: "Noto Sans Arabic", var(--font-arabic), "Segoe UI", Tahoma, sans-serif;
  --techguru-font-two: "Noto Kufi Arabic", "Noto Sans Arabic", var(--font-arabic), "Segoe UI", Tahoma, sans-serif;
  font-family: var(--techguru-font);
}

.techguru-ar .travelcore-wordmark,
.techguru-ar .travelcore-wordmark span {
  font-family: "Space Grotesk", var(--techguru-font);
  direction: ltr;
  unicode-bidi: isolate;
}

.techguru-ar h1,
.techguru-ar h2,
.techguru-ar h3,
.techguru-ar h4,
.techguru-ar h5,
.techguru-ar h6,
.techguru-ar p,
.techguru-ar li,
.techguru-ar span,
.techguru-ar a,
.techguru-ar button,
.techguru-ar label,
.techguru-ar input,
.techguru-ar textarea {
  letter-spacing: 0;
}

.techguru-ar h1,
.techguru-ar h2,
.techguru-ar h3,
.techguru-ar h4,
.techguru-ar h5,
.techguru-ar h6 {
  font-family: var(--techguru-font-two);
  line-height: 1.5;
}

/* Section headings use the same Arabic display face as the hero title. */
.techguru-ar .section-title__title,
.techguru-ar .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

/* Keep the services heading as three deliberate Arabic lines. The artwork is
 * part of the title in the source template, so it must stay inline between
 * the first line and the two highlighted lines without changing their RTL
 * shaping or creating an empty line. */
.techguru-react-site.techguru-ar .techguru-services-section .section-title__title {
  direction: rtl;
  text-align: right;
  max-width: 920px;
  line-height: 1.45;
}

.techguru-react-site.techguru-ar .techguru-services-section .section-title__title img {
  display: inline-block;
  width: 120px;
  height: auto;
  margin: 0;
  border-radius: 20px;
}

.techguru-react-site.techguru-ar .techguru-services-section .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

/* The source theme offsets this heading for the English two-column layout.
 * Remove that offset in Arabic so the connected title stays inside its own
 * column and keeps the intended three-line composition. */
.techguru-react-site.techguru-ar .why-choose-one__left .section-title__title {
  direction: rtl;
  text-align: right;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  font-family: var(--techguru-font-two) !important;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.45;
  overflow-wrap: normal;
  word-break: normal;
}

.techguru-react-site.techguru-ar .why-choose-one__left .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

/* Keep the Arabic portfolio intro heading inside its own column. The source
 * English layout pulls this title 110px across the image column; that offset
 * collides with Arabic text, so preserve the two-column composition without
 * the overlap. Tighten the checklist rhythm to match the compact copy. */
.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__right .section-title__title {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  text-align: right;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__right .section-title {
  margin-bottom: 16px;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__text {
  max-width: 560px;
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__points-list {
  margin: 22px 0 0;
  padding: 0;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__points-list li {
  align-items: center;
  gap: 11px;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__points-list li + li {
  margin-top: 16px;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__points-list li p {
  margin: 0;
  line-height: 1.7;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .techguru-website-intro .about-four__btn-box {
  margin-top: 24px;
}

/* Keep the Arabic delivery-plan copy readable in the two-column process
 * section; the template's English middle step is left-aligned by design. */
.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__left {
  max-width: 520px;
  margin-top: 0;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__left .section-title {
  margin-bottom: 18px;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__left .section-title__title {
  max-width: 100%;
  margin: 0;
  text-align: right;
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__text {
  max-width: 500px;
  margin: 0;
  text-align: right;
  font-size: 16px;
  line-height: 1.9;
  overflow-wrap: break-word;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__btn-box {
  margin-top: 22px;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__right {
  margin-right: 0;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__process-content {
  max-width: 320px;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__process-title {
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.6;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__process-text {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.85;
}

.techguru-react-site.techguru-ar .techguru-ar-websites-page .process-one__process-list li:nth-child(2) .process-one__process-content {
  text-align: right;
}

/* The process flow reads from right to left in Arabic. The template moves
 * the arrow containers through RTL CSS, so mirror the artwork itself as well
 * to keep both arrows pointing toward the next step. */
.techguru-react-site.techguru-ar .process-two__shape-1 img,
.techguru-react-site.techguru-ar .process-two__shape-2 img {
  transform: scaleX(-1);
}

.techguru-react-site.techguru-ar .process-two .section-title__title {
  direction: rtl;
  text-align: center;
  font-family: var(--techguru-font-two) !important;
  line-height: 1.5;
}

.techguru-react-site.techguru-ar .process-two .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

/* Product-path heading: keep the Arabic title as two intentional lines and
 * use the same display face as the hero without changing the card artwork. */
.techguru-react-site.techguru-ar .portfolio-two .section-title__title {
  direction: rtl;
  text-align: center;
  font-family: var(--techguru-font-two) !important;
  line-height: 1.5;
}

.techguru-react-site.techguru-ar .portfolio-two .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

/* Contact heading and copy keep the same Arabic display treatment as the
 * hero while staying aligned to the RTL content column. */
.techguru-react-site.techguru-ar .contact-two__left .section-title__title {
  direction: rtl;
  text-align: right;
  max-width: 100%;
  font-family: var(--techguru-font-two) !important;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.techguru-react-site.techguru-ar .contact-two__left .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

.techguru-react-site.techguru-ar .contact-two__text {
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}

.techguru-react-site.techguru-ar .contact-two__contact-list {
  direction: rtl;
  text-align: right;
}

/* Resources heading and introduction follow the same RTL reading rhythm as
 * the hero while the resource cards retain the template's original layout. */
.techguru-react-site.techguru-ar .blog-two__left .section-title__title {
  direction: rtl;
  text-align: right;
  max-width: 100%;
  font-family: var(--techguru-font-two) !important;
  line-height: 1.5;
  overflow-wrap: normal;
  word-break: normal;
}

.techguru-react-site.techguru-ar .blog-two__left .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

.techguru-react-site.techguru-ar .blog-two-text {
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-intro {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: #0b192c;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-intro .services-four__right {
  direction: rtl;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-intro .section-title__title,
.techguru-react-site.techguru-ar .techguru-ar-navigation-intro .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-intro .services-four__text {
  max-width: 680px;
  margin: 24px 0 30px;
  direction: rtl;
  text-align: right;
  line-height: 1.9;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary {
  padding: 34px;
  border: 1px solid rgba(92, 176, 233, 0.35);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(26, 53, 88, 0.96), rgba(14, 31, 53, 0.94));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
  direction: rtl;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary > span {
  display: block;
  margin-bottom: 16px;
  color: #69baff;
  font-family: "Space Grotesk", sans-serif;
  direction: ltr;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary strong {
  display: block;
  color: #fff;
  font-family: var(--techguru-font-two);
  font-size: 25px;
  line-height: 1.5;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary p {
  margin: 12px 0 22px;
  color: #c5d0e0;
  line-height: 1.85;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #ffc947;
  font-weight: 600;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-summary a .icon-right-arrow {
  transform: scaleX(-1);
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-page .portfolio-one__title-box,
.techguru-react-site.techguru-ar .techguru-ar-navigation-page .portfolio-one__content {
  direction: rtl;
  text-align: right;
}

.techguru-react-site.techguru-ar .techguru-ar-navigation-page .portfolio-one__title a,
.techguru-react-site.techguru-ar .techguru-ar-navigation-page .portfolio-one__year span {
  font-family: var(--techguru-font-two);
}

@media (max-width: 767px) {
  .techguru-react-site.techguru-ar .techguru-ar-navigation-intro {
    padding: 72px 0;
  }

  .techguru-react-site.techguru-ar .techguru-ar-navigation-summary {
    margin-top: 34px;
    padding: 25px;
  }
}

@media (max-width: 767px) {
  .techguru-react-site.techguru-ar .techguru-services-section .section-title__title img {
    width: 120px;
    height: auto;
    border-radius: 20px;
  }
}

.techguru-ar [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
}

.techguru-ar input[type="email"],
.techguru-ar input[type="url"] {
  direction: ltr;
  text-align: right;
}

/* Arabic mirrors the visual artwork with the RTL composition. Text, logos and
 * navigation remain separate DOM content, so only the photographic artwork
 * is flipped. */
.techguru-react-site.techguru-ar .about-two__img > img,
.techguru-react-site.techguru-ar .why-choose-one__img > img,
.techguru-react-site.techguru-ar .event-one__img > img,
.techguru-react-site.techguru-ar .blog-two__img > img,
.techguru-react-site.techguru-ar .blog-two__img-two > img {
  backface-visibility: visible;
  transform: scaleX(-1);
}

/* The English homepage keeps the About artwork on the left and its copy on
 * the right. RTL changes the reading direction inside each column, but it
 * should not swap this visual relationship or mirror readable UI previews. */
.techguru-react-site.techguru-ar .about-two > .container > .row {
  direction: ltr;
}

.techguru-react-site.techguru-ar .about-two__left,
.techguru-react-site.techguru-ar .about-two__right {
  direction: rtl;
}

.techguru-react-site.techguru-ar .about-two__right .section-title__title {
  font-family: var(--techguru-font-two) !important;
  max-width: 100%;
  font-size: clamp(30px, 3.2vw, 48px);
  line-height: 1.42;
  text-align: right;
  overflow-wrap: anywhere;
}

.techguru-react-site.techguru-ar .about-two__right .section-title__title span {
  font-family: var(--techguru-font-two) !important;
}

.techguru-react-site.techguru-ar .about-two__img-2 > img {
  transform: none;
}

.techguru-react-site.techguru-ar .about-two__img,
.techguru-react-site.techguru-ar .about-two__img-2,
.techguru-react-site.techguru-ar .why-choose-one__img,
.techguru-react-site.techguru-ar .event-one__img,
.techguru-react-site.techguru-ar .blog-two__img,
.techguru-react-site.techguru-ar .blog-two__img-two {
  direction: ltr;
}

/* Keep the Arabic chrome on the same measured header grid as English. */
.techguru-react-site.techguru-ar .main-menu-two__top-inner {
  padding: 19px 65px 19px;
}

.techguru-react-site.techguru-ar .main-menu-two__wrapper-inner {
  padding: 0 65px 0;
}

.techguru-react-site.techguru-ar .main-menu-two__top-text,
.techguru-react-site.techguru-ar .main-menu-two__contact-list li .text p {
  line-height: 26px;
}

.techguru-react-site.techguru-ar .main-slider-two__bg {
  direction: ltr;
  background-position: center center;
  transform-origin: center center;
  transform: scaleX(-1);
}

.techguru-react-site.techguru-ar .main-slider-two .swiper-slide-active .main-slider-two__bg {
  transform: scaleX(-1) scale(1.1);
}

.techguru-react-site.techguru-ar .main-slider-two__bg::before,
.techguru-react-site.techguru-ar .main-slider-two__bg::after {
  direction: ltr;
}

.techguru-react-site.techguru-ar .main-slider-two__title {
  font-family: var(--techguru-font-two);
  font-size: clamp(36px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.2;
}

.techguru-react-site.techguru-ar .main-slider-two__text {
  font-size: 17px;
  line-height: 1.7;
}

.techguru-react-site.techguru-ar .main-menu__list > li > ul {
  z-index: 1000;
}

/* Directional icons point with the reading flow, while symmetric icons stay
 * unchanged. */
.techguru-ar .icon-right-arrow::before {
  content: "\e901";
}

.techguru-ar .icon-right-arrow-1::before {
  content: "\e922";
}

.techguru-ar .icon-right-arrow-2,
.techguru-ar .icon-right-quote,
.techguru-ar .icon-play-button-arrowhead {
  display: inline-block;
  transform: scaleX(-1);
}

.techguru-ar .main-slider-two__nav .swiper-button-prev i {
  transform: none;
}

.techguru-ar .main-slider-two__nav .swiper-button-next i {
  transform: rotateY(180deg);
}

@media (min-width: 1200px) and (max-width: 1470px) {
  .techguru-react-site.techguru-ar .main-menu-two__top-inner {
    padding: 19px 30px 19px;
  }

  .techguru-react-site.techguru-ar .main-menu-two__wrapper-inner {
    padding: 0 30px 0;
  }
}

@media (max-width: 991px) {
  .techguru-react-site.techguru-ar .main-menu-two__top {
    display: none;
  }

  .techguru-react-site.techguru-ar .main-menu-two__wrapper-inner {
    padding: 0 30px 0;
  }
}

@media (max-width: 767px) {
  .techguru-react-site.techguru-ar .main-menu-two__wrapper-inner {
    padding: 0 15px 0;
  }

  .techguru-react-site.techguru-ar .main-slider-two__title {
    max-width: 100%;
    font-size: clamp(28px, 8.2vw, 36px);
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .techguru-react-site.techguru-ar .main-slider-two__title br {
    display: block;
  }
}