:root {
  --main: #aa78a6;
  --submain: #a26e9e;
  --main2: #b632a0;
  --color1: #ff00d4;
  --color2: #f49cbb;
  --color3: #f49cbbac;
  --color4: #ffe2ea;
  --text: #ffffff;
  --textLightGrey: rgb(160, 160, 160);
  --textLighterGrey: rgb(225, 225, 225);
  --textLighterGrey2: rgb(233, 233, 233);
  --textDarkGrey: rgb(114, 114, 114);
  --textDarkerGrey: rgb(89, 89, 89);
}

/* --main: #9b5de5; */
/* a594f9 */
/* aa78a6 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  font-size: large;
  text-decoration: none;
}

html {
  overflow-x: hidden;
  font-family: sans-serif;
}

ul {
  list-style-type: none;
}

h1 {
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}

.navbar {
  display: flex;
  justify-content: left;
  height: 3rem;
  background-color: var(--main);
  position: relative;
}

.navbar--toggle-btn {
  position: absolute;
  padding: 0.65rem 1.2rem 5rem;
  right: 0;
  top: 0.1rem;
  cursor: pointer;
}

.burger-lines {
  border: 1px solid var(--text);
  display: block;
  width: 32px;
  margin-bottom: 9px;
  transition: all 0.3s ease-out;
}

.navbar--logo {
  height: 3rem;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.navbar--list {
  background-color: var(--main);
  align-items: left;
  list-style-type: none;
  position: absolute;
  top: 100%;
  left: -101%;
  z-index: 10;
  height: 100vh;
  width: 101%;
  transition: all 0.4s ease-in-out;
}

.show {
  left: 0%;
}

.navbar--list--link--a {
  display: block;
  border-bottom: 1px rgba(255, 255, 255, 0.442) solid;
  color: var(--textLighterGrey);
  padding: 0.9rem 1.65rem;
  opacity: 0;
  transition: opacity 0.4s 0.25s;
  transition: 0.3s linear;
}

.navbar--list--link--a:hover,
.navbar--list--link--a-active {
  text-shadow: 0.1rem 0.1rem 0.2rem rgb(0, 0, 0);
  color: var(--text);
}

.fade {
  opacity: 1;
}

.burgerA {
  transform: rotateZ(-45deg);
  transform-origin: right;
}

.burgerB {
  opacity: 0;
}

.burgerC {
  transform: rotateZ(45deg) translate(1px, 1px);
  transform-origin: right;
}

.has-subMenu {
  position: relative;
}

.has-subMenu i::before {
  text-shadow: none;
}

.arrowIcon {
  position: relative;
  margin-left: 0.1rem;
  transform: translateY(-0.1rem) rotate(180deg);
  transition: all 250ms linear;
}

.arrowRotate {
  transform: translateY(0.15rem) rotate(0deg);
}

.subMenu-list {
  border-bottom: 1px rgba(255, 255, 255, 0.442) solid;
  background-color: var(--submain);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease;
  /* pick a proportional duration */
}

.showSubMenu {
  max-height: 13rem;
  height: auto;
}

.subMenu-list li {
  display: block;
  border-bottom: 0.5px rgba(255, 255, 255, 0.2) solid;
}

.subMenu-list li:last-child {
  border-bottom: 0;
}

.subMenu-list li a {
  display: block;
  color: white;
  font-size: 1.1rem;
  padding: 0.6rem 0rem 0.6rem 2rem;
}

.subMenu-list li:hover {
  text-shadow: 0.1rem 0.1rem 0.2rem rgb(0, 0, 0);
}

/* -------------------------------------HERO---------------------------------- */
.hero {
  position: relative;
  background-image: url(../images/hero.webp);
  background-size: 90rem 29rem;
  background-repeat: no-repeat;
  background-position: -1rem 0;
  background-attachment: fixed;
  height: 26rem;
  z-index: 0;
  box-shadow: -0.1rem -0.1rem 1rem rgba(0, 0, 0, 0.653);
}

.hero-container {
  background-color: #1f01218d;
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  z-index: 10;
  box-shadow: 0.1rem 0.1rem 0.8rem rgb(0, 0, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero-container-h1 {
  color: var(--text);
  font-size: 2.1rem;
  font-family: "Times New Roman", Times, serif;
  text-shadow: 0.1rem 0.1rem 0.1rem black;
  margin-bottom: 0.5rem;
  animation-name: heroText1;
  animation-duration: 800ms;
}

.hero-container-p {
  color: var(--textLighterGrey);
  text-shadow: 0.1rem 0.1rem 0.1rem rgb(0, 0, 0);
  animation-name: heroText2;
  animation-duration: 800ms;
}

.hero-container-btn {
  color: var(--text);
  border: 0.1rem var(--color2);
  background-color: var(--color3);

  font-size: 1.3rem;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-weight: 400;
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  text-shadow: 0.05rem 0.05rem 0.05rem black;
  box-shadow: 0.1rem 0.1rem 0.5rem rgb(0, 0, 0);
  cursor: pointer;
  transition: all 150ms ease-out;
  animation-name: btnContact;
  animation-duration: 950ms;
}

.hero-container-btn:hover {
  color: var(--text);
  background-color: #ff8eb7b6;
  transform: scale(1.02);
  text-shadow: 0.1rem 0.1rem 0.1rem black;
  box-shadow: 0.2rem 0.2rem 0.8rem rgb(0, 0, 0);
}

@keyframes btnContact {
  from {
    transform: rotateZ(-720deg);
  }

  to {
    transform: rotateZ(0deg);
  }
}

@keyframes heroText1 {
  from {
    transform: translateX(60rem);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes heroText2 {
  from {
    transform: translateX(-60rem);
  }

  to {
    transform: translateX(0);
  }
}

/* The element to apply the animation to */

/* -----------------------------WHY-US----------------------------------------- */
/* #07beb8, #3dccc7, #68d8d6, #9ceaef, #c4fff9 */

.why-us-cnr {
  margin: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.1rem 0.5rem black;
}

.why-us-cnr__header {
  color: var(--main2);
  text-align: center;
  padding-top: 4rem;
  padding-bottom: 0.2rem;
  width: 60%;
  margin: 0 auto;
  border-bottom: 0.05rem solid var(--main2);
}

.why-us-cnr__row {
  display: flex;
  flex-direction: column;
  margin-top: 4rem;
}

.why-us-cnr__row__box {
  text-align: center;
  padding: 3rem 1rem;
}

.why-us-cnr__row__box__icon {
  margin: 0.5rem auto;
  border-radius: 100%;
  font-size: 2rem;
  color: var(--text);
  background-color: var(--color2);
  width: 4rem;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.why-us-cnr__row__box__h1 {
  color: var(--main2);
  font-size: 1.1rem;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.why-us-cnr__row__box__p {
  font-size: 1.05rem;
  color: var(--main);
}

/* -----------             main  TILES               -------------------- */
.header-gallery {
  font-family: "Times New Roman", Times, serif;
  color: var(--main2);
  border-bottom: 0.05rem solid var(--main2);
  padding: 0.5rem 0;
  margin: 4rem auto 0;
  width: 20rem;
  text-align: center;
  line-height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-gallery i {
  color: var(--main2);
  font-size: 1.2rem;
  margin-left: 0.3rem;
}

.body-container__h1 {
  text-align: center;
  color: var(--main2);
  margin: 4rem auto;
  width: 70%;
  padding-bottom: 0.5rem;
  border-bottom: 0.1rem solid var(--main2);
}

.body-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 5rem 3rem;
  gap: 4.5rem 0;
}

.body-link {
  background-color: #eeeeee;
  flex-basis: 100%;
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 0.747);
  transition: all 0.7s;
  transition: transform 700ms ease-out, opacity 1s;

  opacity: 1;
}

.body-link-load {
  transform: scale(0.1);
  opacity: 0;

}

.body-image {
  overflow: hidden;
}

.body-image img {
  display: block;
  max-width: 100%;
  height: auto;
  transition: 0.4s;
}

.body-desc {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--main);
}

.body-desc h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  transition: 0.3s;
  font-size: 1.2rem;
  padding: 1rem 0.5rem;
  color: var(--text);
  font-weight: 600;
  text-shadow: 0.05rem 0.05rem 0.05rem rgb(0, 0, 0);
}

.body-link:hover .body-col .body-image img {
  transform: scale(1.1);
}

.body-link:hover .body-desc {
  background-color: var(--main2);
}

.body-link:hover .body-desc h1 {
  color: var(--text);
  transform: scale(1.03);
  text-shadow: 0.1rem 0.1rem 0.05rem black;
}

/* ----------------------------------N0s------------------------------------ */

.no-jambotron-cnr {
  width: 100%;
  margin: 1.5rem 0;
  background-color: rgb(229, 229, 229);
  padding: 2rem 1rem;
  text-align: center;
  color: #7b7b7b;
  font-size: 0.8rem;
}

.no-jambotron-cnr__h3 {
  text-align: left;
  margin: 3rem 0;
  padding-left: 1.5rem;
}

.no-jambotron-cnr__span {
  color: var(--main2);
}

/* -------------------------------------2nd-jambotron--------------------------------------------- */
.big-jambotron-cnr {
  height: 15rem;
  padding: 2rem 1rem;
  margin: 3rem 0;
  background-color: var(--color2);
  color: var(--text);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0.1rem 0.1rem 1rem rgb(184, 184, 184);
  box-shadow: -0.1rem -0.1rem 0.7rem rgb(130, 130, 130);
}

.big-jambotron-cnr_h1 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
}

.big-jambotron-cnr_p {
  font-size: 1.1rem;
}

/* ==========================footer============================== */
footer {
  box-shadow: 0.2rem -0.1rem 1rem rgba(153, 153, 153, 0.576);
  margin-top: 0rem;
  padding-top: 3rem;
  z-index: 5;
  position: relative;
  background-color: white;
}

.row-footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 95%;
  margin: 0 auto;
}

.footer-links-list {
  flex-basis: 40%;
}

.footer-links-list__header {
  text-align: center;
  color: var(--main2);
  width: 80%;
  padding-bottom: 0.2rem;
  margin: -0.1rem auto 0.7rem auto;
  font-size: 1rem;
  border-bottom: 0.05rem solid var(--main2);
}

.footer-link-item a {
  font-size: 1.1rem;
  color: grey;
}

.footer-link-item {
  text-align: center;
  margin-top: 0.5rem;
}

.footer-contact-list {
  align-items: center;
  margin: 3rem auto 0 auto;
  padding: 1rem 1.8rem 0 1.8rem;
}

.footer-contact-item {
  margin-left: 2rem;
}

.footer-link-item a:hover,
.footer-contact-item a:hover {
  color: var(--main2);
}

.footer-contact-item a {
  margin-bottom: 0.7rem;
  font-size: 1.1rem;
  display: inline-block;
  color: grey;
}

.row-socials {
  padding-top: 3rem;
}

.row-socials h1 {
  width: 60%;
  color: var(--main2);
  font-size: 1.3rem;
  margin: 0 auto 1.5rem auto;
  padding-top: 0.5rem;
  text-align: center;
  border-top: 0.05rem solid var(--main2);
}

.social-list {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.social-item {
  cursor: pointer;
}

.social-item .fab {
  transition: 0.2s;
  color: #7b7b7b;
}

.social-item .fab:hover {
  transform: scale(1.2);
  color: var(--main2);
}

.social-item i {
  font-size: 2.5rem;
}

.footer-container img {
  margin-top: 1rem;
  width: 100%;
  height: auto;
}

.footer-copyright {
  margin-top: -0.3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.8rem;
  padding: 0.5rem;
  font-size: 0.9rem;
  background-color: var(--main);
}

.footer-copyright p {
  color: var(--textDarkerGrey);
}

.footer-copyright a {
  font-size: inherit;
  color: var(--text);
}

/* ---------------------------ABOUT US PAGE---------------------------- */

.aboutCtnr__imgCntr img {
  max-width: 100%;
  display: block;
}

.aboutCtnr__imgCntr {
  z-index: -1;
}

.aboutCtnr__txtCtnr {
  text-align: center;
  background-color: var(--color4);
  padding: 3rem 10%;
  color: rgb(79, 79, 79);
}

.aboutCtnr__txtCtnr p {
  text-align: left;
  margin-top: 1rem;
}

/* @@@@@@@@@@@     contact us page        @@@@@@@@@@@@ */
.contact-us-body-cntr {
  margin-bottom: 5rem;
}

.contact-us-header-cntr {
  text-align: center;
  margin-top: 2rem;
}

.contact-us-header-cntr h1 {
  color: var(--main2);
  margin-bottom: 1rem;
}

.contact-us-header-cntr p {
  color: var(--textDarkGrey);
  padding: 0 1.2rem;
  line-height: 1.4rem;
}

.contact-us-header-cntr span {
  color: var(--main2);
}

.contact-us-bg {
  position: absolute;
  height: 120vh;
  width: 100%;
  z-index: -1;
  background: var(--color3);
  clip-path: polygon(100% 5%, 100% 100%, 0 100%, 0 30%);
}

.contact-us-body-ctnr__formCtnr {
  margin: 3rem 0;
}

.contact-us-form {
  display: block;
  border-radius: 0.1rem;
  width: 80%;
  margin: 0 auto;
  background-color: var(--text);
  padding: 2rem 2rem;
  box-shadow: 0.1rem 0.1rem 0.4rem rgba(0, 0, 0, 0.537);
  box-shadow: -0.1rem -0.1rem 0.6rem rgba(0, 0, 0, 0.537);
}

.contact-us-form__username,
.contact-us-form__email,
.contact-us-form__textArea {
  width: 100%;
  display: block;
  border: 0.1rem solid rgb(214, 214, 214);
  border-radius: 0.1rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0;
  outline: none;
}

.contact-us-form__textArea {
  resize: none;
}

.contact-us-form__submit {
  color: var(--text);
  border-radius: .2rem;
  border: 0;
  padding: 0.5rem 1rem;
  background: var(--main2);
  cursor: pointer;
 

}
.contact-us-form__submit:hover {
 
 box-shadow: .05rem .1rem .1rem rgba(0, 0, 0, 0.505);
 transform: scale(1.01);

}

.contact-us-body-ctnr__contacts {
  margin-bottom: 1.5rem;
}

.contact-us-body-ctnr__contacts h1 {
  font-size: 1.4rem;
  width: 15rem;
  margin: 0 auto;
  padding-bottom: 0.5rem;
  color: var(--main2);
  text-align: center;
  border-bottom: 0.1rem solid var(--main2);
}

.contact-us-body-ctnr__list {
  width: 285px;
  margin: 2rem auto;
}

.contact-us-body-ctnr__list li {
  margin-top: 1rem;
}

.contact-us-body-ctnr__list li a {
  font-size: 1rem;
  color: var(--main2);

}

.contact-us-body-ctnr__socials {
  width: 60%;
  margin: 4rem auto 0 auto;
  padding-top: 1.2rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  border-top: 0.05rem solid var(--main2);
}

.contact-us-body-ctnr__socials i {
  color: var(--main2);
  font-size: 1.5rem;
}

/* @@@@@@@@@@@@@@@@@@@@    includes     @@@@@@@@@@@@@@@@@@@@@@@@ */
.includes-cnr {
  margin: 4rem 10%;
  border-radius: 2rem;
  box-shadow: 0.1rem 0.2rem 1rem black;
}

.includes-cnr-header {
  font-size: 1.4rem;
  text-align: center;
  width: 80%;
  color: var(--main2);
  border-bottom: 0.05rem solid var(--main2);
  margin: 0 auto 2rem;
  padding-top: 3rem;
  padding-bottom: 0.5rem;
}

.includes-cnr__row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-bottom: 2rem;
}

.includes-cnr__row__box {
  text-align: center;
  width: 45%;
  padding: 2rem 0;
}

.includes-cnr__row__box__icon {
  font-size: 1.5rem;
  background-color: var(--color2);
  color: white;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.includes-cnr__row__box__h3 {
  margin-top: 1rem;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--textDarkGrey);
}

/* ----------------   transportation page   ---------------------- */
.transport-main__header {
  font-size: 1.2rem;
  text-align: center;
  width: 80%;
  margin: 5rem auto 1rem auto;
  padding-bottom: 0.2rem;
  color: var(--main2);
  border-bottom: 0.1rem solid var(--main);
}

.transport-main__row {
  display: flex;
  flex-direction: column;
}

.transport-main__row__box {
  display: block;
  transition: all 0.4s ease-in-out;
  margin: 4rem 2rem;
  text-align: center;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0.1rem 0.1rem .8rem rgb(107, 107, 107);
}

.transport-main__row__box:hover {
  box-shadow: 0.1rem 0.1rem 1.5rem black;
}

.transport-main__row__box:hover img {
  transform: scale(1.03);
}
.transport-main__row__box:hover .transport-main__row__box__header {
 background-color: var(--main2);
}

.transport-main__row__box:hover .transport-main__row__box__btn {
  color: var(--text);
  background-color: var(--main2);
}

.transport-main__row__box__icon img {
  max-width: 100%;
  height: auto;
  transition: all 0.2s ease-in-out;
  display: block;
  position: relative;
  z-index: -1;
}

.transport-main__row__box__header {
  font-size: 1.3rem;
  color: white;
  background-color: var(--color2);
  padding: 1rem 0;
}

.transport-main__row__box__p {
  color: var(--textDarkGrey);
  margin: 2rem 1.5rem 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.transport-main__row__box__btn {
  color: var(--main2);
  margin: 0.8rem 0 2.5rem 0;
  padding: 0.5rem 2rem;
  border-radius: 0.5rem;
  border: 0.05rem solid var(--main2);
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.4s;
  background-color: var(--color4);
}

.transport-main__row__box__btn .fa-chevron-circle-right::before {
  font-size: 1rem;
  vertical-align: bottom;
}

/* ----------------------------- Day Tours page ------------------------------ */
.dayTour-cnr__header {
  color: var(--main);
  text-align: center;
  width: 70%;
  margin: 3rem auto;
  padding-bottom: 0.9rem;
  border-bottom: 0.1rem solid var(--textDarkGrey);
}

.dayTour-cnr__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin: 3rem auto 5rem;
}

.dayTour-cnr__row__box {
  box-shadow: 0.1rem 0.1rem 0.5rem rgba(0, 0, 0, 0.49);
  display: flex;
  padding: 0;
  justify-content: start;
  align-items: center;
  border-radius: 2%;
  height: 4rem;
  width: 70%;
  max-width: 272px;
  background-color: var(--textLighterGrey);
  gap: 1rem;
}

.dayTour-cnr__row__box__img {
  display: block;
  width: 4rem;
  height: 4rem;
  border-radius: 5%;
  background-color: var(--color2);
}

.dayTour-cnr__row__box__h1 {
  font-size: 1.1rem;
  color: var(--textDarkerGrey);
}

/* --------------        custom page          ------------------ */
.custom-head2-cnr {
  max-width: 85%;
  padding: 2rem 2rem;
  background-color: var(--textLighterGrey2);
  margin: 4rem auto 4rem;
  box-shadow: 0.1rem 0.1rem 1rem black;
  border-radius: 1rem;
}

.custom__cnr__h4 {
  color: var(--main2);
  margin-bottom: 0.5rem;
}

.custom__cnr__p1 {
  color: var(--textDarkerGrey);
  line-height: 1.4rem;
}

.intro__cnr {
  background: var(--color4);
  margin: 5rem auto;
  max-width: 85%;
  padding: 3rem 0 8rem;
  border-radius: 1rem;
  box-shadow: 0.1rem 0.2rem 0.9rem black;
}

.intro__cnr__header {
  width: 80%;
  margin: 0 auto 3rem;
  padding-bottom: 0.5rem;
  text-align: center;
  color: var(--main2);
  border-bottom: 0.05rem solid var(--main);
}

.intro__cnr__row {
  display: flex;
  flex-direction: column;
  gap: 5rem 0;
}

.intro__cnr__row__box__logo {
  margin: 0 35%;
}

.how-to-logo {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

.intro__cnr__row__box__h1 {
  color: var(--textDarkGrey);
  text-align: center;
  font-size: 1.3rem;
  padding: 0 2rem 0;
}

.custom-part2-cnr {
  color: var(--textDarkerGrey);
  padding: 4rem 10%;
  background-color: var(--textLighterGrey);
}

.custom-part2-cnr__header {
  color: var(--main2);
  margin: 1rem auto 4rem;
  font-size: 2rem;
}

.custom-part2-cnr__list__item {
  margin-bottom: 2rem;
}

.custom-part2-cnr__list__item__h4 {
  color: var(--main2);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.custom-part2-cnr__list__item__p {
  line-height: 1.3rem;
}

/* ----------------------    START MediaQueries START    ------------------------ */
/* ----------------------        MediaQueries 576    ------------------------ */
@media only screen and (min-width: 576px) {
  .hero {
    background-size: 100rem 29rem;
  }

  .why-us-cnr {
    margin: 2rem 4rem;
  }

  .body-container {
    margin: 03rem;
  }

  .body-container__h1 {
    margin: 8rem auto;
    width: 60%;
  }

  .no-jambotron-cnr {
    padding: 2rem 3rem;
  }

  /* =========AboutPage 576px======== */

  .aboutCtnr__txtCtnr {
    text-align: center;
    background-color: var(--color4);
    padding: 3rem 20%;
    color: rgb(79, 79, 79);
  }

  .aboutCtnr__txtCtnr h1 {
    margin: 1rem 0 3rem;
  }

  .aboutCtnr__txtCtnr p {
    text-align: left;
    margin-top: 1rem;
    line-height: 1.5rem;
  }

  /* @@@@@@@ contact us page 576px @@@@@@ */

  .contact-us-header-cntr {
    margin-top: 3rem;
  }

  .contact-us-header-cntr h1 {
    margin-bottom: 1.5rem;
  }

  .contact-us-header-cntr p {
    padding: 0 5rem;
  }

  .contact-us-body-ctnr__formCtnr {
    margin: 3rem 0;
  }

  .contact-us-form {
    width: 75%;
    padding: 3rem 4rem;
  }

  .contact-us-form__username,
  .contact-us-form__email,
  .contact-us-form__textArea {
    margin: 0.7rem 0;
    outline: none;
  }

  .contact-us-form__textArea {
    resize: none;
  }

  .contact-us-body-ctnr__contacts h1 {
    font-size: 1.3rem;
  }

  .contact-us-body-ctnr__list {
    width: 50%;
  }

  .contact-us-body-ctnr__socials {
    gap: 3rem;
  }

  .contact-us-body-ctnr__socials i {
    font-size: 2rem;
  }

  /* ------ categories pages 576px  ------- */

  .includes-cnr {
    margin: 4rem 17%;
  }

  /* ----------------   transportation page 576px  ---------------------- */
  .transport-main__header {
    width: 20rem;
  }

  .transport-main__row__box {
    margin: 4rem auto;
    width: 70%;
  }

  /* -------------- Day Tours page 576px -----------------  */

  .dayTour-cnr__header {
    width: 20rem;
  }

  .dayTour-cnr__row {
    padding: 0 1rem;
  }

  .dayTour-cnr__row__box {
    width: 45%;
  }

  /* -----------  custom page 576px  --------- */
  .custom-head2-cnr {
    max-width: 70%;
  }

  .intro__cnr {
    max-width: 70%;
  }

  .intro__cnr__header {
    width: 70%;
  }

  .custom-part2-cnr {
    padding: 4rem 20%;
  }

  .custom-part2-cnr__list__item__p {
    line-height: 1.4rem;
  }
}

/* ----------------------MediaQueries 768------------------------ */

@media only screen and (min-width: 768px) {
  .navbar--toggle-btn {
    display: none;
  }

  .navbar {
    justify-content: space-between;
  }

  .navbar--list {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static;
    z-index: 1;
    width: auto;
    margin-right: 0rem;
    background-color: transparent;
  }

  .navbar--list--link {
    position: relative;
  }

  .navbar--list--link--a {
    font-size: 1rem;
    border-bottom: 0;
    opacity: 1;
    margin: 0;
    padding: 0.2rem 1.5rem;
  }

  .has-subMenu {
    padding: 0.7rem 1.5rem;
  }

  .arrowIcon {
    margin: 0 0 0 0.1rem;
    z-index: -1;
    vertical-align: bottom;
  }

  .subMenu-list {
    background-color: var(--main);
    position: absolute;
    z-index: 2;
    height: 0;
    opacity: 0;
    margin-left: 0.9rem;
    margin-top: 0.2rem;
    box-shadow: 0.1rem 0.1rem 0.5rem rgb(75, 75, 75);
    border-radius: 0.2rem;
  }

  .subMenu-list li {
    padding: 0;
    border-bottom: 0.01rem solid ghostwhite;
    margin: 0;
    width: auto;
  }

  .subMenu-list li a {
    font-size: 1rem;
    padding: 0.6rem 1rem 0.6rem 0.5rem;
  }

  .showSubMenu {
    height: auto;
    opacity: 1;
  }

  .hero {
    background-size: 110rem 35rem;
    height: 32rem;
  }

  .why-us-cnr {
    margin: 2rem 3rem;
  }

  .why-us-cnr__row {
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 4rem;
  }

  .why-us-cnr__row__box {
    width: 45%;
  }

  .header-gallery {
    margin-bottom: -2.5rem;
  }

  .body-row {
    margin: 8rem 2%;
    justify-content: center;
    gap: 6rem 5rem;
  }

  .body-link {
    flex-basis: 40%;
    margin-top: 0;
  }

  .body-desc h1 {
    padding: 1.2rem 0;
  }

  .big-jambotron-cnr_h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
  }

  .row-footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 95%;
    margin: 0 auto;
  }

  .footer-links-list {
    flex-basis: 30%;
  }

  .footer-contact-list {
    width: 30%;
    margin: auto;
    padding: 0;
  }

  /* ===============About Page 768px =========== */
  .aboutCtnr {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }

  .aboutCtnr__imgCntr {
    flex-basis: 50%;
  }

  .aboutCtnr__imgCntr img {
    max-width: 100%;
    display: block;
  }

  .aboutCtnr__txtCtnr {
    overflow-y: auto;
    height: 22rem;
    flex-basis: 50%;
    text-align: center;
    background-color: var(--text);
    padding: 1rem 1rem;
    color: rgb(79, 79, 79);
  }

  .aboutCtnr__txtCtnr h1 {
    margin: 1rem 0;
  }

  .aboutCtnr__txtCtnr p {
    text-align: left;
    margin: 1rem 1rem;
  }

  /* @@@@@@@@@@@ contact us 768px @@@@@@@@@ */

  .contact-us-header-cntr {
    margin-top: 4rem;
  }

  .contact-us-header-cntr h1 {
    margin-bottom: 1rem;
  }

  .contact-us-header-cntr p {
    padding: 0 11rem;
    line-height: 1.5rem;
  }

  .contact-us-body-ctnr__formCtnr {
    margin: 3rem 0;
  }

  .contact-us-form {
    width: 65%;
    padding: 2rem 3rem;
  }

  .contact-us-form__username,
  .contact-us-form__email,
  .contact-us-form__textArea {
    width: 100%;
    margin: 1rem 0;
    padding: 0.6rem 0.3rem;
  }

  .contact-us-form__submit {
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
  }

  .contact-us-body-ctnr__contacts h1 {
    width: 20rem;
  }

  .contact-us-body-ctnr__list {
    width: 50%;
  }

  .contact-us-body-ctnr__list li {
    margin-top: 1.3rem;
  }

  .contact-us-body-ctnr__list li a {
    font-size: 1.2rem;
  }

  .contact-us-body-ctnr__socials {
    width: 55%;
    padding-top: 2rem;
    gap: 3.5rem;
    margin-top: 4rem;
  }

  .contact-us-body-ctnr__socials i {
    font-size: 2.1rem;
  }

  /* ------ categories pages 768px  ------- */
  .includes-cnr {
    margin: 2rem 10% 8rem;
  }

  .includes-cnr-header {
    width: 55%;
    padding-top: 4rem;
    color: var(--main);
  }

  .includes-cnr__row {
    padding-bottom: 4rem;
  }

  .includes-cnr__row__box {
    width: 32%;
  }

  /* ----------------   transportation page 768px  ---------------------- */
  .transport-main__row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6%;
  }

  .transport-main__row__box {
    margin: 3rem 0;
    width: 40%;
  }

  /* -------------- Day Tours page 768px -----------------  */

  .dayTour-cnr__row {
    gap: 2rem;
    padding: 0 8%;
  }

  .dayTour-cnr__row__box {
    width: 40%;
    max-width: 377px;

    gap: 7%;
  }

  /* ------    custom page 768px    ------- */

  .custom-head2-cnr {
    max-width: 65%;
    padding: 3rem 2rem;
    box-shadow: 0.1rem 0.1rem 1.5rem black;
  }

  .custom__cnr__p1 {
    line-height: 1.5rem;
  }

  .intro__cnr {
    margin: 5rem auto;
    max-width: 65%;
  }

  .intro__cnr__header {
    width: 55%;
  }

  .intro__cnr__row__box__logo {
    margin: 0 40%;
  }

  .custom-part2-cnr {
    padding: 4rem 15%;
  }

  .custom-part2-cnr__list {
    max-width: 600px;
    margin: 0 auto;
  }

  .custom-part2-cnr__header {
    max-width: 600px;
    font-size: 2.5rem;
  }
}

/* ----------------------MediaQueries 992------------------------ */

@media only screen and (min-width: 992px) {
  .navbar--list {
    margin-right: 5rem;
  }

  .navbar--list--link {
    margin-right: 1rem;
  }

  .subMenu-list {
    width: max-content;
  }

  .hero {
    background-size: 74rem 35rem;
    background-position: left top;
    height: 32rem;
    margin-bottom: 10rem;
  }

  .hero-container-h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .hero-container-p {
    font-size: 1.8rem;
  }

  .why-us-cnr {
    margin: 2rem 3rem;
  }

  .why-us-cnr__row {
    margin-top: 4rem;
    padding: 1rem 0 5rem 0;
  }

  .why-us-cnr__row__box {
    width: 30%;
  }

  .body-container__h1 {
    margin: 10rem auto;
    width: 50%;
  }

  .body-row {
    margin: 10rem 5%;
    gap: 7rem 5rem;
  }

  .body-link {
    flex-basis: 40%;
  }

  .no-jambotron-cnr {
    padding: 2rem 10rem;
  }

  .big-jambotron-cnr_h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
  }

  /* =======About Us 992px====== */

  .aboutCtnr__txtCtnr {
    height: 29rem;
  }

  /* @@@@@@@@@@@ contact us 992px @@@@@@@@@ */
  .contact-us-body-cntr {
    margin-bottom: 5rem;
    display: flex;
    justify-content: center;
  }

  .contact-us-header-cntr {
    margin-top: 5rem;
  }

  .contact-us-header-cntr h1 {
    margin-bottom: 1.5rem;
  }

  .contact-us-header-cntr p {
    padding: 0 17rem;
  }


  .contact-us-body-ctnr__formCtnr {
    text-align: right;
    width: 42%;
    margin: 5rem 0;
  }

  .contact-us-form {
    width: 85%;
    margin: 0 0 0 auto;
    padding: 3rem 2rem;
  }

  .contact-us-form__username,
  .contact-us-form__email,
  .contact-us-form__textArea {
    width: 100%;
    margin: 1rem 0;
    padding: 0.8rem 0.3rem;
  }

  .contact-us-form__submit {
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 0.1rem;
  }

  .contact-us-body-ctnr__contacts {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: -3rem;
  }

  .contact-us-body-ctnr__contacts h1 {
    margin-top: 4rem;
    font-size: 1.4rem;
    width: 15rem;
  }

  .contact-us-body-ctnr__list {
    width: 70%;
    margin: 2rem auto;
    padding-left: 5rem;
  }

  .contact-us-body-ctnr__list li a {
    font-size: 1rem;
  }

  .contact-us-body-ctnr__socials {
    margin-top: 2rem;
    width: 50%;
    padding-top: 1.5rem;
    gap: 1.5rem;
  }

  .contact-us-body-ctnr__socials i {
    font-size: 1.7rem;
  }

  /* ------ categories pages 992px  ------- */
  .includes-cnr {
    margin-top: 8rem;
  }

  .includes-cnr-header {
    width: 35%;
    margin: 0 auto 2rem;
    padding-top: 4.5rem;
    padding-bottom: 0.5rem;
  }

  .includes-cnr__row {
    padding-bottom: 4rem;
  }

  .includes-cnr__row__box {
    width: 30%;
    padding: 3rem 0;
  }

  /* ----------------   transportation page 992px  ---------------------- */
  .transport-main__row {
    gap: 6%;
    margin: 3rem 10%;
  }

  .transport-main__row__box {
    margin: 3rem 0;
    width: 40%;
  }

  /* -------------- Day Tours page 992px -----------------  */

  .dayTour-cnr__row {
    gap: 2.1rem;
    padding: 0 8%;
  }

  .dayTour-cnr__row__box {
    width: 40%;
    max-width: 245px;

    gap: 10%;
  }

  /* --------  custom page   992px    ------- */

  .custom-head2-cnr {
    max-width: 50%;
    padding: 3rem 3rem;
  }

  .custom__cnr__p1 {
    line-height: 1.5rem;
  }

  .intro__cnr {
    background: white;
    margin: 6rem auto 8rem;
    max-width: 80%;
    padding: 3rem 0 8rem;
    border-radius: 1rem;
    box-shadow: 0.1rem 0.2rem 0.9rem black;
  }

  .intro__cnr__header {
    width: 50%;
    margin: 0 auto 4rem;
  }

  .intro__cnr__row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 13%;
  }

  .intro__cnr__row__box {
    max-width: 258px;
  }

  .intro__cnr__row__box__logo {
    margin: 0;
  }

  .how-to-logo {
    margin: 0 auto;
    display: block;
    width: 150px;
  }

  .intro__cnr__row__box__h1 {
    color: var(--textDarkGrey);
    text-align: center;
    font-size: 1.3rem;
    padding: 0;
    width: 180px;
  }

  .custom-part2-cnr {
    color: var(--textDarkerGrey);
    padding: 4rem 10%;
    background-color: var(--textLighterGrey);
  }

  .custom-part2-cnr__header {
    color: var(--main);
    margin: 1rem auto 4rem;
    font-size: 2rem;
  }

  .custom-part2-cnr__list__item {
    margin-bottom: 2rem;
  }

  .custom-part2-cnr__list__item__h4 {
    color: var(--main);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
  }

  .custom-part2-cnr__list__item__p {
    line-height: 1.3rem;
  }
}

/* ----------------------MediaQueries 1200------------------------ */

@media only screen and (min-width: 1200px) {
  .navbar--list {
    margin-right: 10rem;
  }

  .navbar--list--link {
    margin-right: 3rem;
  }

  .hero {
    background-size: 130rem 45rem;
    height: 42rem;
  }

  .hero-container-h1 {
    font-size: 5rem;
    margin-bottom: 1rem;
  }

  .hero-container-p {
    font-size: 2rem;
  }

  .hero-container-btn {
    font-size: 1.6rem;
  }

  .no-jambotron-cnr {
    padding: 2rem 20rem;
  }

  .social-list {
    width: 40%;
    margin: 3rem auto;
    justify-content: space-evenly;
    align-items: center;
  }

  .body-row {
    margin: 10rem 15%;
  }

  /* =======About Us 1200px====== */

  .aboutCtnr__txtCtnr {
    margin: 0 5rem;
    height: auto;
  }

  /* @@@@@@@@@@@ contact us 1200px @@@@@@@@@ */

  .contact-us-body-ctnr__contacts {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: -3rem;
  }

  .contact-us-body-ctnr__list {
    padding-left: 15%;
  }

  /* ------ categories pages 1200px  ------- */
  .includes-cnr {
    width: 70%;
    margin: 8rem auto;
  }

  .includes-cnr-header {
    width: 20rem;
    padding-top: 5rem;
    padding-bottom: 0.5rem;
  }

  .includes-cnr__row__box {
    width: 30%;
    padding: 3rem 0;
  }

  /* ----------------   transportation page 1200px  ---------------------- */
  .transport-main__row {
    gap: 2.5%;
    margin: 0;
  }

  .transport-main__row__box {
    width: 22%;
  }

  /* -------------- Day Tours page 1200px -----------------  */

  .dayTour-cnr__row {
    gap: 2rem;
    padding: 0 8%;
  }

  .dayTour-cnr__row__box {
    max-width: 220px;

    gap: 8%;
  }

  /* -------     custom page  1200px  ------------ */
  .custom-head2-cnr {
    max-width: 50%;
    padding: 5rem 4rem;
    margin: 4rem auto 4rem;
  }

  .custom__cnr__h4 {
    color: var(--main);
    margin-bottom: 0.5rem;
    font-size: 1.8rem;
  }

  .custom__cnr__p1 {
    color: var(--textDarkerGrey);
    line-height: 1.6rem;
    font-size: 1.2rem;
  }

  .intro__cnr {
    margin: 7rem auto;
    max-width: 90%;
    padding: 5rem 0 8rem;
  }

  .intro__cnr__header {
    width: 40%;
  }

  .intro__cnr__row {
    display: flex;
    flex-direction: row;
    gap: 7%;
  }

  .intro__cnr__row__box {
    width: 33%;
  }

  .intro__cnr__row__box__logo {
    margin: 0;
  }

  .how-to-logo {
    margin: 0 auto;
    display: block;
    max-width: 100%;
  }

  .intro__cnr__row__box__h1 {
    margin: 0 auto;
    max-width: 260px;
  }

  .custom-part2-cnr {
    padding: 4rem 15%;
    background-color: var(--textLighterGrey);
  }

  .custom-part2-cnr__header {
    max-width: 780px;
    font-size: 2.8rem;
  }

  .custom-part2-cnr__list {
    max-width: 780px;
  }

  .custom-part2-cnr__list__item {
    margin-bottom: 2rem;
  }

  .custom-part2-cnr__list__item__h4 {
    color: var(--main);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
  }

  .custom-part2-cnr__list__item__p {
    line-height: 1.5rem;
    font-size: 1.1rem;
  }
}

/* ----------------------MediaQueries 1400------------------------ */

@media only screen and (min-width: 1400px) {
  .hero {
    background-size: 137.5rem 48rem;
    height: 45rem;
    margin: 0 auto 5rem;
  }

  .why-us-cnr {
    margin: 5rem auto;
    max-width: 1200px;
  }

  .body-container__h1 {
    margin: 10rem auto;
    max-width: 700px;
  }

  .body-row {
    max-width: 1200px;
    margin: 10rem auto;
    gap: 5rem 5rem;
  }

  .body-link {
    background-color: #eeeeee;
    flex-basis: 25%;
  }

  .no-jambotron-cnr {
    padding: 2rem 35%;
  }

  /* =======About Us 1400px====== */

  .aboutCtnr__txtCtnr {
    margin: 0 10%;
    height: auto;
  }

  /* @@@@@@@@@   contact us 1400px @@@@@@@ */
  .contact-us-header-cntr {
    max-width: 1200px;
    margin: 4rem auto 0 auto;
  }

  .contact-us-bg {
    clip-path: polygon(100% 0%, 100% 100%, 0 100%, 0 22%);
    max-width: 100%;
  }

  .contact-us-body-cntr {
    max-width: 1400px;
    margin: 2rem auto;
    justify-content: space-evenly;
  }

  /* ------ categories pages 1400px  ------- */
  .includes-cnr {
    width: 85%;
    margin: 8rem auto;
  }

  .includes-cnr-header {
    width: 20rem;
    padding-top: 5rem;
    padding-bottom: 0.5rem;
  }

  .includes-cnr__row__box {
    width: 15%;
    padding: 3rem 0;
  }

  /* ----------------   transportation page 1400px  ---------------------- */
  .transport-main__row {
    gap: 3%;
    margin: 0;
  }

  .transport-main__row__box {
    width: 18%;
    max-width: 600px;
  }

  /* -------------- Day Tours page 1400px -----------------  */

  .dayTour-cnr__row {
    max-width: 1400px;
    margin: 4rem auto 5rem;
    gap: 2rem;
    padding: 0;
  }

  .dayTour-cnr__row__box {
    max-width: 220px;

    gap: 8%;
  }

  /* ----   custom page  1400px  --------- */
  .custom-head2-cnr {
    max-width: 30%;
    padding: 5rem 5rem;
    margin: 6rem auto 4rem;
  }

  .custom__cnr__p1 {
    line-height: 1.8rem;
  }

  .intro__cnr {
    max-width: 1500px;
  }

  .intro__cnr__header {
    width: 30rem;
  }

  .intro__cnr__row {
    gap: 10rem;
  }

  .custom-part2-cnr__list__item {
    margin-top: 5rem;
  }

  .custom-part2-cnr__list__item__p {
    line-height: 1.9rem;
    font-size: 1.1rem;
  }
}

@media only screen and (min-width: 2200px) {
  .hero {
    background-size: cover;
    background-position: 0 center;
    height: 52rem;
    margin: 0 auto 5rem;
  }
}

@media only screen and (min-width: 3840px) {
  .hero {
    background-size: 200rem 78rem;
    background-position: 73rem -10rem;
  }

  html {
    max-width: 1500px;
    margin: 0 auto;
  }

  .contact-us-bg {
    max-width: 1500px;
  }
}