/* css resets */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

input {
  border: none;
  outline: none;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-LIGHT.TTF');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-REGULAR.TTF');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-SEMIBOLD.TTF');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-SEMIBOLD.TTF');
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-BOLD.TTF');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'PINAR';
  src: url('../assets/font/PINAR-BLACK.TTF');
  font-weight: 900;
  font-display: swap;
}

body {
  font-size: 16px;
  background-color: var(--color-background);
  /* padding-bottom: 3rem; */
  font-family: 'PINAR';
}

/* css variables */
:root {
  /* colors */
  --color-gradient: linear-gradient(299.36deg, #1e000a 0%, #a40f39 100%);
  --color-background: #fdfdfd;
  --color-gray-800: #1d2939;
  --color-error-500: #f04438;
  --color-gray-900: #101828;
  --color-gray-700: #344054;
  --color-gray-600: #475467;
  --color-gray-100: #f2f4f7;
  --color-pure-gray: #717171;

  /* shadows */
  --shadow-plan-box: 0px 10px 20px 0px #8484841a;
  --shadow-star: 0px 8px 10px 0px #fec31040;
  --shadow-accordion-desktop: 0px 10px 20px 0px #8484841a;

  /* fonts sizes */
  --font-size-14: 1.4rem;
  --font-size-16: 1.6rem;
  --font-size-18: 1.8rem;
  --font-size-20: 2rem;
  --font-size-12: 1.2rem;
  --font-size-22: 2.2rem;
  --font-size-24: 2.4rem;
  --font-size-28: 2.8rem;
  --font-size-44: 4.4rem;

  /* font weights */
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --font-weight-900: 900;
}

.collapse {
  transform: rotate(180deg);
}

.collapseBody {
  display: none;
}

.hideOverflow {
  overflow: hidden;
}

/* ==================== mobile ==================== */

/* ---------------- modal overlay ---------------- */
.modalOverlay {
  display: none;
}

.shownModalOverlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 102;
  background: rgba(29, 41, 57, 0.9);
}

/* ---------------- modal ---------------- */
.hiddenModal {
  display: none !important;
  padding: 0 1.5rem;
}

.errorMessageField {
  color: var(--color-error-500);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-400);
}

#successMessage {
  color: #16a34a;
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-600);
}

.shownModal {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  background-color: #fff;
  top: 0;
  z-index: 110;
  overflow: auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.shownModal::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.shownModal {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

#closeModal {
  margin-left: 1rem;
  margin-right: auto;
  padding: 1rem;
}

#closeModal > img {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-top: 1rem;
  cursor: pointer;
  padding: 0.3rem;
}

.modalTitle {
  text-align: center;
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
  color: var(--color-gray-900);
  margin: 1rem 0 2rem;
}

.modalForm {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  padding: 0 3rem;
  padding-bottom: 2rem;
}

.formHandler {
  position: relative;
  width: 100%;
  margin: 1.5rem 0;
  height: 60px;
}

.modalInput {
  display: flex;
  border: 1px solid #e4e7ec;
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
}

.selectTour {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url('../assets/icons-images/selectIcon.svg');
  background-repeat: no-repeat;
  background-position: 1rem 50%;
  outline: none;
}

.modalInputLabel {
  font-size: var(--font-size-14);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-500);
  padding: 0 0.5rem;
  background-color: #fff;
  position: absolute;
  top: -13px;
  right: 3rem;
}

.modalSelection {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5rem;
}

.modalSelection > p {
  font-size: var(--font-size-14);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-500);
}

.modalSelection > div {
  display: flex;
  align-items: center;
}

.modalSelection > div :first-child {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gradient);
  color: #fff;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.modalSelection > div :last-child {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-gradient);
  color: #fff;
  border-radius: 6px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.modalSelection > div :nth-child(2) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
}

.disabledMinusButton {
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
  color: #fff;
  border-radius: 6px;
  width: 24px;
  height: 24px;
}

.btn-box {
  display: flex;
  flex-direction: column;
  align-items: end;
  width: 100%;
  padding-top: 25px;
}

.modalButton {
  display: flex;
  word-spacing: 0.5rem;
  justify-content: center;
  align-items: center;
  font-family: 'PINAR';
  color: #fff;
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  background: var(--color-gradient);
  border: none;
  outline: none;
  height: 45px;
  border-radius: 10px;
  cursor: pointer;
  padding: 10px 20px;
}

/* ---------------- main ---------------- */
.mainContainer {
  padding: 0 1.5rem;
  overflow-x: hidden !important;
}

/* ---------------- header ---------------- */
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-gray-800);
  padding: 1rem 1.5rem 0;
}

.topVector {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  overflow-x: hidden;
}

.header :last-child {
  display: flex;
  z-index: 100;
}

.header :last-child > a {
  font-weight: var(--font-weight-600);
  color: var(--color-gray-800);
}

.header :last-child > p {
  font-weight: var(--font-weight-600);
  display: none;
}

.headphone {
  margin-right: 0.75rem;
}

.whiteHeadphone {
  display: none;
}

.Ghasedak24Mobile {
  width: 87px;
  height: 27px;
}

/* ---------------- hero section ---------------- */
.heroDesktop {
  display: none;
}

.seeToursOfWC {
  display: none;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}

.hero :first-child {
  font-weight: var(--font-weight-600);
  word-spacing: 0.5rem;
  font-size: var(--font-size-20);
  color: var(--color-gray-900);
}

.hero :first-child > strong {
  color: var(--color-error-500);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-20);
}

.hero :last-child {
  line-height: 3.7rem;
  text-align: center;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  color: var(--color-gray-700);
  margin-top: 3rem;
}

.hero :last-child * {
  font-size: var(--font-size-14);
  color: var(--color-gray-900);
  font-weight: var(--font-weight-700);
}

.seeToursOfWC {
  font-size: var(--font-size-18) !important;
  font-weight: var(--font-weight-500) !important;
}

.qatarWC {
  width: 216px;
  height: 274px;
}

/* ---------------- tours section ---------------- */
.tours {
  margin-top: 3rem;
}

.QatarCup {
  display: none;
}

.ball {
  display: none;
}

.QatarAirways {
  display: none;
}

.tourInfoMobile {
  display: block;
}

.tourInfoDesktop {
  display: none;
}

.TourTitle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tourText {
  font-weight: var(--font-weight-600);
  color: var(--color-gray-800);
  font-size: var(--font-size-18);
  word-spacing: 0.2rem;
}

.tourText > span {
  color: var(--color-error-500);
  text-decoration: underline;
  word-spacing: 0.5rem;
}

.dateOfTour {
  display: flex;
  align-items: center;
  margin-top: 2rem;
  font-size: var(--font-size-14);
}

.dateOfTour :first-child {
  margin-left: 0.5rem;
  font-weight: var(--font-weight-500);
  color: var(--color-gray-600);
}

.dateOfTour :last-child {
  font-weight: var(--font-weight-600);
  color: var(--color-gray-900);
  word-spacing: 0.3rem;
}

.dateOfTour :last-child * {
  color: var(--color-error-500);
  font-weight: 600;
}

.TourServices {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  align-items: center;
}

.TourServicesHead {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-gradient);
  width: 100%;
  color: #fff;
  padding: 0 1rem;
  cursor: pointer;
  border-radius: 8px;
  font-size: var(--font-size-14);
  font-weight: 400;
}

.TourServicesBody {
  width: 100%;
}

.TourServicesBody > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 95%;
  background-color: var(--color-gray-100);
  margin: auto;
  padding: 1rem;
  list-style: inside;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  font-size: var(--font-size-14);
  font-weight: 500;
  color: var(--color-gray-800);
}

.TourServicesBody > ul * {
  margin: 1rem 0;
}

.tourElement {
  width: 100%;
}

.tourElementContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  box-shadow: var(--shadow-plan-box);
  border-radius: 16px;
  padding: 2rem;
  margin-top: 2rem;
}

.tourElementTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4e7ec;
  width: 100%;
  padding-bottom: 0.5rem;
  font-weight: var(--font-weight-500);
  color: var(--color-gray-800);
  font-size: var(--font-size-16);
}

.tourElementStars {
  display: flex;
  align-items: flex-end;
}

.tourElementStars * {
  width: 22px;
  height: 22px;
}

.smallStar {
  width: 20px;
  height: 20px;
}

.mediumStar {
  width: 23px;
  height: 23px;
}

.largeStar {
  width: 27px;
  height: 27px;
}

.tourElementItems {
  width: 100%;
}

.roomItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
}

.roomItem :first-child {
  color: var(--color-gray-700);
  font-weight: 500;
  font-size: var(--font-size-14);
}

.roomItem :first-child > span {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-600);
}

.roomItem :last-child {
  color: var(--color-gray-900);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-16);
}

.roomItem :last-child > span {
  font-weight: 500;
  font-size: var(--font-size-12);
  color: var(--color-gray-600);
}

.tourElementButton {
  width: 100%;
  text-align: center;
}

.tourElementButton > p {
  font-size: var(--font-size-12);
  color: var(--color-gray-600);
  font-weight: var(--font-weight-500);
}

.goldenTourElementButton > p {
  color: #fff;
}

.tourElementButton > button {
  font-family: 'PINAR';
  background: var(--color-gradient);
  outline: none;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: #fff;
  height: 48px;
  margin-top: 1rem;
  border-radius: 8px;
  font-weight: 500;
  font-size: var(--font-size-16);
  cursor: pointer;
}

.goldenTourElementButton > button {
  background: none;
  background-color: #fff;
  color: #000;
}

.fourteenDayTour {
  margin-top: 5rem;
}

/* ---------------- FAQ ---------------- */
.faq {
  margin-top: 5rem;
}

.faqTitle {
  font-size: var(--font-size-18);
  font-weight: 600;
  text-align: center;
  color: var(--color-gray-800);
  margin-bottom: 2rem;
}

.faqAccordion {
  margin: 2rem auto;
  z-index: 100;
}

.faqAccordionHead {
  color: #fff;
  background: var(--color-gradient);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  z-index: 100;
}

.faqAccordionHead > p {
  flex-grow: 1;
  margin: 0 0.5rem;
  z-index: 100;
}

.faqAccordionBody {
  background: var(--color-gradient);
  margin-top: -0.5rem;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.faqAccordionBody > p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 95%;
  margin: auto;
  padding: 1rem;
  list-style: inside;
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-400);
  color: #fff;
  line-height: 2.5;
}

/* ---------------- contact us ---------------- */
.contact {
  margin-top: 5rem;
  text-align: center;
}

.contactText {
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-600);
  color: var(--color-gray-800);
  word-spacing: 0.2rem;
}

.contactTextDesktop {
  display: none;
}

.contactPhoneNumber {
  font-size: var(--font-size-24);
  color: var(--color-gray-800);
  font-weight: var(--font-weight-900);
  text-decoration: underline;
}

.contactPhoneNumberDesktop {
  display: none;
}

/* ---------------- footer ----------------  */
.footer {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Ghasedak24FooterLogo {
  margin-bottom: 1.5rem;
}

.Ghasedak24Slogan {
  color: var(--color-pure-gray);
  font-size: var(--font-size-14);
  font-weight: var(--font-weight-500);
  margin-bottom: 1.5rem;
}

.socialMedia {
  width: 60%;
  display: flex;
  justify-content: space-around;
}

/* ==================== desktop ==================== */

@media screen and (min-width: 1024px) {
  body {
    padding: 1.5rem 4rem 5rem 4rem;
    overflow-x: hidden;
  }

  /* ---------------- modal ---------------- */
  .shownModal {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 444px;
    width: 70.5rem;
    background-color: #fff;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 110;
    overflow: auto;
    border-radius: 24px;
  }

  .displayLoading {
    background: rgb(196, 195, 189);
    cursor: not-allowed;
  }

  .hiddenRequestButton {
    background: var(--color-gradient);
  }

  #closeModal {
    padding-top: 1rem;
    padding-bottom: 0;
  }

  .modalTitle {
    margin-top: -2rem;
  }

  .modalForm {
    flex-direction: row;
  }

  .formHandler {
    width: 45%;
    margin: 1.2rem 0.2rem;
    height: 60px;
  }

  .modalSelection {
    width: 45%;
    margin: 1.2rem 0.2rem;
  }

  .modalInput {
    width: 100%;
  }

  .modalButton {
    position: absolute;
    bottom: 0;
    width: 177px;
    left: 30px;
  }

  #successMessage {
    position: absolute;
    bottom: -50px;
    left: 50px;
  }

  /* ---------------- header ---------------- */
  .Ghasedak24Mobile {
    width: 162px;
    height: 47px;
  }

  .headphone {
    display: none !important;
  }

  .whiteHeadphone {
    display: inline;
    margin-right: 1.25rem;
  }

  .header :last-child {
    align-items: center;
    color: #fff;
  }

  .header :last-child > p {
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
    display: block;
  }

  .header :last-child > a {
    font-weight: var(--font-weight-600);
    color: var(--color-gray-800);
    display: none;
  }

  .header :last-child > img {
    width: 28px;
    height: 28px;
  }

  /* ---------------- hero section ---------------- */
  .heroMobile {
    display: none;
  }

  .seeToursOfWC {
    position: absolute;
    display: inline-flex;
    border: none;
    outline: none;
    background: var(--color-gradient);
    color: #fff !important;
    font-family: 'PINAR';
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
    border-radius: 12px;
    height: 54px;
    width: 28rem;
    justify-content: center;
    align-items: center;
    /* margin-top: -15rem !important; */
    cursor: pointer;
    bottom: 4rem;
  }

  .heroDesktop {
    display: block;
    z-index: 100;
    position: relative;
    z-index: 100;
    top: -70px;
  }

  .topVector {
    display: block;
    position: absolute;
    top: -2rem;
    left: -6rem;
    z-index: 99;
  }

  .hero {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    min-height: 70vh;
  }

  .heroRight {
    flex-shrink: 1;
  }

  .heroLeft {
    flex-shrink: 0;
  }

  .qatarWC {
    /* width: 509px;
    height: 647px; */
    height: 100%;
    width: 100%;
    justify-self: end;
  }

  .heroRight :first-child {
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-700);
    text-align: right;
  }

  .heroRight :first-child > strong {
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-900);
  }

  .heroRight :last-child * {
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-500);
    text-align: right;
  }

  .heroRight :last-child {
    max-width: 789px;
  }

  .heroRight :last-child strong {
    font-weight: var(--font-weight-600);
    font-size: var(--font-size-18);
    color: var(--color-gray-900);
  }

  #firstParagraph {
    margin: 0 0;
  }

  #secondParagraph {
    margin: 0 0;
  }

  #thirdParagraph {
    /* max-width: max-content; */
    margin-top: 0;
  }

  /* ---------------- tours section ----------------  */
  .tours {
    margin-top: -5rem;
    max-width: 1280px;
    margin: auto;
  }

  .tourInfoDesktop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }

  .tourInfoMobile {
    display: none;
  }

  .sevenDayTour {
    position: relative;
  }

  .QatarCup {
    display: block;
    position: absolute;
    top: 280px;
    z-index: 99;
  }

  .fourteenDayTour {
    margin-top: 10rem;
    position: relative;
  }

  .TourTitle {
    margin-top: 0;
    margin-bottom: 3rem;
  }

  .TourTitle > p {
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-600);
    word-spacing: 0.5rem;
  }

  .TourTitle > p > span {
    color: var(--color-error-500);
    text-decoration: underline;
  }

  .tourDateAndServices {
    position: relative;
    height: 438px;
    max-height: 438px;
    margin: auto;
    margin-bottom: 11rem;
    z-index: 100;
  }

  .QatarAirways {
    display: block;
    position: absolute;
    bottom: -60px;
  }

  .tourDateAndServices > ul {
    background: var(--color-gradient);
    color: #fff;
    border-radius: 12px;
    padding: 1rem;
    font-size: var(--font-size-16);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .tourDateAndServices > ul :first-child {
    font-weight: var(--font-weight-600);
  }

  .tourDateAndServices > ul * {
    padding: 0.7rem;
    word-spacing: 0.3rem;
    font-weight: var(--font-weight-400);
  }

  .tourBoxes {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin: auto;
    z-index: 100;
  }

  .ball {
    display: block;
    position: absolute;
    z-index: 98;
    bottom: -370px;
    right: 0;
  }

  .tourBoxes :last-child {
    margin-left: 0;
  }

  .tourBox {
    box-shadow: var(--shadow-plan-box);
    background-color: #fff;
    padding: 2rem;
    border-radius: 16px;
    max-width: 260px;
    width: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 1.5rem;
    z-index: 100;
  }

  .goldenTourBox {
    margin-top: -7rem;
    background: var(--color-gradient);
  }

  .tourBoxStars {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid #e4e7ec;
  }

  .smallStar {
    width: 25px;
    height: 25px;
  }

  .mediumStar {
    width: 30px;
    height: 30px;
  }

  .largeStar {
    width: 37px;
    height: 37px;
  }

  .tourBoxTitle {
    color: #000;
    font-weight: var(--font-weight-500);
    font-size: var(--font-size-22);
    margin-top: 1rem;
  }

  .goldenTourBoxTitle {
    color: #fff;
  }

  .tourBoxItems {
    width: 100%;
    margin: 2rem 0;
  }

  .tourBoxRoom {
    margin: 1rem 0;
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-16);
  }

  .tourBoxRoom :first-child {
    font-weight: var(--font-weight-400);
    color: var(--color-gray-700);
    word-spacing: 0.3rem;
  }

  .goldenTourBoxRoom :first-child {
    color: #fff;
  }

  .tourBoxRoom :first-child > span {
    font-weight: var(--font-weight-500);
    color: var(--color-gray-900);
  }

  .goldenTourBoxRoom :first-child > span {
    color: #fff;
  }

  .tourBoxRoom :last-child {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-500);
    word-spacing: 0.3rem;
  }

  .goldenTourBoxRoom :last-child {
    color: #fff;
  }

  .tourBoxRoom :last-child > span {
    font-size: var(--font-size-12);
    color: var(--color-gray-600);
  }

  .goldenTourBoxRoom :last-child > span {
    color: #fff;
  }

  /* ---------------- FAQ ---------------- */
  .faq {
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 10rem;
  }

  .faqTitle {
    position: relative;
    font-size: var(--font-size-28);
    font-weight: var(--font-weight-600);
    margin-bottom: 5rem;
    z-index: 100;
  }

  .faqAccordionHead {
    height: 72px;
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-500);
  }

  .faqAccordionBody {
    background: var(--color-gradient);
    margin-top: -0.5rem;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  .faqAccordionBody > p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 95%;
    margin: auto;
    padding: 1rem;
    list-style: inside;
    font-size: var(--font-size-18);
    font-weight: var(--font-weight-500);
    color: #fff;
    line-height: 2.5;
  }

  .contactText {
    display: none;
  }

  .contactTextDesktop {
    display: block;
    font-size: var(--font-size-18);
    color: var(--color-gray-800);
    font-weight: var(--font-weight-600);
    margin-top: 7rem;
    word-spacing: 0.4rem;
  }

  .contactPhoneNumber {
    display: none;
  }

  .contactPhoneNumberDesktop {
    display: block;
    font-weight: var(--font-weight-700);
    font-size: 4.8rem;
    color: var(--color-gray-800);
  }

  /* ---------------- footer ---------------- */
  .Ghasedak24FooterLogo {
    width: 162px;
    height: 49px;
  }

  .socialMedia {
    justify-content: center;
  }

  .socialMedia * {
    margin: 0 1rem;
  }

  .btn-box {
    padding-top: 20px;
    width: 100%;
  }
  
  .btn-box p {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .heroRight > p {
    font-size: var(--font-size-44) !important;
    font-weight: var(--font-weight-700);
    text-align: right;
  }

  .heroRight > p > strong {
    font-size: var(--font-size-44) !important;
    font-weight: var(--font-weight-600);
  }

  .seeToursOfWC {
    bottom: 7rem;
  }
}