:root {
  --theme-color: #153d42;
  --hover-cyan: cyan;
  --hover-color2: brown;
  --hover-red: rgba(255, 0, 0, 0.664);
  --hover-yellow: yellow;
  --font-roboto: "Roboto", sans-serif;
  --font-ubuntu: "Ubuntu", sans-serif;
  --font-openSans: "Open Sans", sans-serif;
    --marquee-width: 100vw;
  --marquee-height: auto;
  /* --marquee-elements: 12; */  /* defined with JavaScript */
  --marquee-elements-displayed: 4;
  --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
  --marquee-animation-duration: calc(var(--marquee-elements) * 5s);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  /* outline: 2px solid red; */
}

body {
  background: #fcfff5;
  font-family: var(--font-roboto);
  overflow-x: hidden;
}
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
@media (min-width: 1920px) {
  html {
    font-size: 95%;
  }
}
@media (max-width: 1920px) {
  html {
    font-size: 95%;
  }
}

@media (max-width: 1500px) {
  html {
    font-size: 75%;
  }
}

@media (max-width: 1200px) {
  html {
    font-size: 70%;
  }
}

@media (max-width: 980px) {
  html {
    font-size: 65%;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 60%;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 50%;
  }
}
@media (max-width: 400px) {
  html {
    font-size: 42%;
  }
}
h1 {
  font-size: 1.8rem;
}
h2 {
  font-size: 1.6rem;
}
h3 {
  font-size: 1.5rem;
}
p {
  font-family: var(--font-openSans);
  font-size: 1.5rem;
  font-weight: 400;
}
.fab {
  font-size: 1.3rem;
}
a {
  height: inherit;
  color: inherit;
  text-decoration: none;
}
.paddingLR {
  padding: 0 3vw;
}


/* nav-bar  */

.header {
  height: 2.5rem;
  width: 100vw;
  display: grid;
  background-color: black;
  grid-template-columns:
    repeat(2, minmax(12rem, 11vw)) repeat(auto-fill, minmax(11rem, 41%))
    repeat(4, minmax(2.5rem, 2vw));
  justify-content: center;
  z-index: 20;
  position: fixed;
  top: 0;
}
.header-box a {
  color: white;
  font-family: var(--font-roboto);
  font-size: 0.8rem;
  transition: all 0.2s ease-in;
  line-height: 2.5rem;
}
.header-box a:hover {
  color: var(--hover-cyan);
  line-height: 3rem;
}
#nav-logo {
  position: fixed;
  top: 2.5rem;
  left: 3vw;
  height: 6.3rem;
  width: 8rem;
  background-image: url("images/logoTrnsp.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 11;
}
.nav-logo-text {
  position: relative;
  right: -102%;
  top: 0.7rem;
  font-size: 2.4rem;
  font-weight: 600;
  color: black;
  font-family: "emoji";
  font-style: italic;
}

.recruitment {
  color: #1d75bd;
}

.nav-bar {
  width: 100vw;
  display: grid;
  grid-template-columns: minmax(32rem, auto) 10% 15% 15% 13% 18%;
  grid-template-rows: 1fr;
  align-content: center;
  font-family: "Ubuntu";
  font-size: 1.3rem;
  font-weight: 500;
  position: fixed;
  z-index: 20;
  top: 2.5rem;
  height: 6.5rem;
  background-color: #fafafa;
  box-shadow: 0 0 18px 2px black;
}

.navBox {
  height: 6.5rem;
  color: black;
  text-align: center;
  line-height: 6.5rem;
  transition: all 0.3s ease-in;
  cursor: pointer;
  position: relative;
}
.navBox:hover {
  color: white;
  background-color: var(--hover-color2);
}
/* nav-services box*/

.navBox-i-container {
  background-color: var(--hover-color2);
  color: white;
  position: absolute;
  height: 60.5vmin;
  line-height: 10.05vmin;
  top: 6.5rem;
  width: 150%;
  display: flex;
  flex-direction: column;
  display: none;
  animation: 0.4s ease-in 1 forwards;
}
.navBox-i-Box {
  width: 100%;
  position: relative;
  font-weight: 400;
  transition: all 0.3s ease-in;
}
.navBox-i-Box:hover {
  font-size: 1.5rem;
  background-color: var(--theme-color);
}



/* ham Button */

.menuButton {
  background-color: var(--theme-color);
  height: 5.5rem;
  width: 10vw;
  position: fixed;
  top: 3rem;
  right: 3vw;
  /* border: 2px solid black; */
  z-index: 100;
  font-size: 1.3rem;
  font-family: var(--font-openSans);
  display: none;
  transition: 0.7s;
}

.menuButton #myLinks {
  height: auto;
  display: none;
}


.menuButton a.icon {
  height: 6rem;
  width: 100%;
  background: #fafafa;
  color: black;
  display: block;
  position: absolute;
  text-align: end;
  padding-right: 4vw;
  right: 0;
  top: 0;
  line-height: 6rem;
}

.menu-box{
  color: white;
  text-decoration: none;
  display: block;
  font-family: var(--font-ubuntu);
  text-align: left;
  font-size: 2rem;
  padding: 2rem 0 0 5vw;
  height: 6rem;
  cursor: pointer;
}
.menu-box:hover{
  background-color: var(--hover-color2);
  color: #fafafa;
}

#activeMenuWidth {
  background-color: transparent;
}
.activeMenu {
  background-color: var(--theme-color);
  color: white;
}

/* menu inner box */

.menu-i-container{
  position: absolute;
  top: 0;
  right: 50vw;
  width: 46vw;
  background-color: var(--hover-color2);
  display: none;
  transition: 0.5s;
  animation: menuSlide 0.2s ease-in 1 forwards;
}
@keyframes menuSlide {
  from{
    right: 45vw;
  }
  to{
    right : 50vw;
  }
}
.menuInnnerBox:hover{
  background-color: var(--theme-color);
}
/* media frames for nav-bar*/

@media (max-width: 1355px) {
  .navBox {
    display: none;
  }
  .menuButton {
    display: block;
  }
}


/*  message us */

.floating-icons {
  display: none;
  padding: 1rem;
  position: fixed;
  bottom: 7vmin;
  right: 4vw;
  z-index: 8;
  border: 2px solid black;
  background-color: #54c7cb;
  padding: 1rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease-in;
}
.floating-icons:hover {
  box-shadow: 0 0 10px 2px black;
}

#phone-icon {
  /* color: white; */
  padding: 1rem;
  /* background-color: green; */
  z-index: 100;
  margin-bottom: 7vmin;
  display: block;
}
#whatsapp-icon {
  color: white;
  font-size: 2rem;
  padding: 1rem;
  background-color: green;
  z-index: 100; /* margin-right: 88vw; */
  bottom: 1vmin;
  display: block;
}
#message-form {
  position: fixed;
  bottom: 1vmin;
  right: 3vw;
  border: 2px solid black;
  z-index: 7;
  background-color: rgb(10 10 20);
  /* backdrop-filter: blur(37px); */
  animation: 0.3s ease-in 1 forwards forwards;
  opacity: 0;
  display: none;
}

@keyframes message {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#survey-form1 {
  display: flex;
  flex-direction: column;
}
.form-group1 {
  margin: 5vmin 3rem 2vmin 2rem;
  width: 28vw;
  text-align: center;
}
.form-control1 {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 1vmin 8% 1vmin 3%;
  width: 88%;
}
.input-textarea1 {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 3vmin 8% 6vmin 3%;
  width: 90%;
}

/* contact Us section */
#contactUs {
  margin-top: 6rem;
  height: auto;
  width: 100vw;
  background-color: #fafafa;
}
.contacts-themeColor {
  height: auto;
  width: 100vw;
  margin-top: 2vmin;
  padding: 0vmin 0 10vmin 0;
  position: relative;
}
.contacts-container {
  height: auto;
  width: 100vw;
  /* background-color: black; */
  background-image: radial-gradient(#3c3434, #201f1f, #222222);
  color: white;
  padding: 10vmin 0 0 0;
  display: grid;
  grid-template-columns: 0.5fr 0.8fr 1fr;
  grid-template-rows: auto auto auto;
  position: relative;
  align-content: center;
}

#qrCode {
  grid-area: 1/1/2/2;
  height: auto;
  width: 110%;
  margin-left: -5%;
  background-image: url("images/qrCode.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
  transition: all 0.3s ease-in;
}

#qrCode:hover {
  background-size: 70%;
}
#googleMaps {
  grid-area: 2/1/3/2;
}
#contacts-contacts {
  grid-area: 1/2/2/3;
  padding-left: 3vw;
}
#contacts-location {
  grid-area: 2/2/3/3;
  padding: 0 3vw;
}
#contacts-location p {
  font-size: 1.2rem;
}
#contacts-form {
  grid-area: 1/3/3/4;
  align-items: center;
}
#contacts-hireYou {
  grid-area: 3/1/4/4;
}

#contacts-contacts a {
  color: white;
  font-size: 1.2rem;
  transition: all 0.25s ease-in;
}
#contacts-contacts a:hover {
  color: cyan;
  font-size: 1.5rem;
}
#survey-form {
  color: red;
  display: flex;
  flex-direction: column;
  margin-left: -8%;
}
.form-group {
  margin-top: 4rem;
  width: 100%;
  text-align: center;
}
.form-control {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 1vmin 8% 1vmin 3%;
  width: 85%;
}
.input-textarea {
  height: auto;
  font-size: 1.5rem;
  font-family: var(--font-roboto);
  padding: 3vmin 8% 6vmin 3%;
  width: 85%;
}
.submit-button {
  font-family: var(--font-roboto);
  color: white;
  background-color: green;
  border: 2px solid seashell;
  padding: 1vmin 10%;
  border-radius: 9px;
  cursor: pointer;
  font-size: 1.4rem;
  transition: all 0.3s ease-in;
}
.submit-button:hover {
  color: black;
  background-color: var(--hover-yellow);
  font-size: 1.6rem;
}

.contactUsBOx4-pic {
  height: 50vmin;
  width: 100%;
  margin: 14vmin 0;
  background-image: linear-gradient(
      115deg,
      rgb(5, 2, 2),
      rgba(22, 22, 24, 0.404)
    ),
    url("images/contactUsBox4.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.contactUsBOx4-text {
  height: 30%;
  width: auto;
  position: relative;
  top: 13vmin;
  left: 2vw;
}
.hireYouText {
  color: red;
  /* text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white; */
}
#contacts-logo {
  display: flex;
  margin-top: 7vmin;
  justify-self: center;
}
.contacts-logo-pic {
  height: 25vmin;
  width: 25vmin;
  border: 2px solid white;
  border-radius: 50%;
  background-image: url("images/logoTrnsp.png");
  background-size: 81%;
  background-color: aliceblue;
  background-repeat: no-repeat;
  margin: 0px 2rem;
  background-position: center;
  background-position-y: 30%;
}

.contacts-logo-link {
  height: 25vmin;
  display: flex;
  flex-direction: column;
  justify-content: end;
}
.contacts-logo-link a {
  color: white;
  transition: all 0.3s ease-in;
  outline: 2px solid black;
  padding: 2vmin;
}
.contacts-logo-link a:hover {
  font-size: 1.8rem;
}
footer {
  height: auto;
  width: 100vw;
  display: flex;
  justify-content: space-between;
  color: white;
  padding: 4vmin 3vw;
  position: absolute;
  bottom: 0;
  background-color: var(--theme-color);
}
@media (max-width: 768px) {
  footer {
    display: flex;
    flex-direction: column;
    margin-bottom: 2vmin;
  }
}
.contacts-logo {
  position: relative;
  top: 100%;
  width: auto;
  font-size: 2rem;
  font-weight: 600;
  color: white;
  /* text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; */
  font-family: var(--font-openSans);
}
.myDetails {
  font-size: 1.2rem;
  font-weight: 500;
}
.myDetailsLinks {
  cursor: pointer;
  transition: all 0.25s ease-in;
}
.myDetailsLinks:hover {
  font-size: 1.5rem;
  color: cyan;
}

/* For Submit Confirmation Box */
#submitConfirmation {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  background-color: rgb(80 80 210 / 10%);
  backdrop-filter: blur(6px);
  z-index: 9;
  display: none;
  animation: submitConfirmationBox 0.4s ease-in-out 1 forwards;
}
@keyframes submitConfirmationBox {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#submitConfirmationBox {
  height: 40vmin;
  width: 50vw;
  position: absolute;
  top: 35vmin;
  left: 25vw;
  background-color: #7bb7c3;
  box-shadow: 0 0 10px 1px black;
  padding-top: 6%;
  text-align: center;
}

#close {
  font-size: 2rem;
  position: absolute;
  top: 0.5vmin;
  right: 1vw;
  cursor: pointer;
  transition: all 0.2s ease-in;
  padding: 0 0.5em;
}
#close:hover {
  background-color: var(--hover-cyan);
}

/* paddingT between sections */

.paddingT {
  margin-top: 6rem;
}























/* untill here general setting for all sub-domains */

/* home section carousal */

.carousel-container {
  border-radius: 20px;
  height: 70vmin;
  width: 97vw;
  background: black;
  position: relative;
  border: 2px solid #00000066;
  /* box-shadow: 0 0 5px 2px black; */
  margin: auto;
  z-index: 0;
  font-family: var(--font-roboto);
  overflow: hidden;
  margin-top: 11rem;
}

/* Hide the images by default */
.mySlides {
  height: 70vmin;
  width: inherit;
  background-size: cover;
}
.mySlides img {
  height: inherit;
  width: inherit;
  background-size: cover;
  background-position: center;
  display: block;
}

#homeSlidePic1 {
  background-image: url("images/slides/slide1.jpg");
  background-position-y: 19%;
}
#homeSlidePic2 {
  background-image: url("images/slides/slide2.jpg");
  background-position-y: 47%;
}
#homeSlidePic3 {
  background-image: url("images/slides/slide3.png");
  background-position-y: 30%;
}
#homeSlidePic4 {
  background-image: url("images/slides/slide4.png");
  background-position-y: 100%;
}
#homeSlidePic5 {
  background-image: url("images/slides/slide52.jpg");
}
/* Next & previous buttons */
.prev,
.next {
  height: 100%;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 7vw;
  text-align: center;
  padding-top: 35vmin;
  color: white;
  font-weight: bold;
  font-size: 2.5rem;
  border-radius: 0 8px 8px 0;
  user-select: none;
  transition: all 0.5s;
  z-index: 3;
}
.next {
  right: 0;
  border-radius: 8px 0 0 8px;
}
.prev:hover,
.next:hover {
  background-color: rgba(32, 34, 34, 0.3);
}

.dots-container {
  width: 10vw;
  display: flex;
  justify-content: space-around;
  position: absolute;
  bottom: 5%;
  right: 50%;
  transform: translate(50%);
}

/* The dots/bullets/indicators */
.dots {
  cursor: pointer;
  height: 1vw;
  width: 1vw;
  outline: 0.2vw solid black;
  border-radius: 10px;
  transition: all 0.3s ease;
  justify-self: center;
  background-color: #fafafa;
}
.active,
.dots:hover {
  color: white;
  background-color: yellow;
  width: 2vw;
}

.dots:hover {
  border: 0.15rem solid black;
  color: black;
  background-color: yellow;
}

/* Fading animation */
.animate {
  animation: animate 9s;
}

@keyframes animate {
  from {
    transform: scale(1.2) rotateY(10deg);
    opacity: 0.8;
  }
  to {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

/* Caption text */
.upper-slider-text {
  border: 2px solid #fafafa;
  font-size: 2rem;
  padding: 0.5rem 1rem;
}

.text {
  width: 100vw;
  padding: 1vw 4vw;
  background-color: #00000082;
  color: white;
  position: absolute;
  top: 3vmin;
  backdrop-filter: blur(1px);
  font-size: 2.5rem;
  text-shadow: 5px 5px 8px black;
  z-index: 1;
  font-family: var(--font-ubuntu);
  font-weight: bolder;
  line-height: 5rem;
  animation-name: nextSlide;
  animation-duration: 9s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
}
@keyframes nextSlide {
  0% {
    color: var(--hover-yellow);
    margin-top: 6vmin;
  }
  20% {
    color: white;
    margin-top: 0;
  }
  100% {
    color: white;
    margin-top: 0;
  }
}

.slider-location {
  font-size: 3.5rem;
}
.call-us-now-text {
  margin-top: 1rem;
  text-align: center;
  font-size: 1.7rem;
  z-index: 1;
  padding: 1vmin 2vw;
  border-radius: 10px;
  background-color: var(--hover-yellow);
  border: 2px solid black;
  backdrop-filter: blur(6px);
  font-weight: bolder;
}
#call-us-now {
  width: 26rem;
  margin-left: 50%;
  transform: translate(-50%);
  background-color: var(--theme-color);
  color: white;
  background-image: none;
  font-size: 1.6rem;
  cursor: pointer;
  transition: all 0.5s;
}

#call-us-now:hover {
  color: black;
  background-color: yellow;
  border: 2px solid black;
}

/* section 2 */

#section2 {
  display: grid;
  grid-template-columns: 2fr 0px 1fr;
  margin-top: 11rem;
}

.theory li {
  margin-top: 5rem;
  list-style: none;
  position: relative;
}
.bullet-point i{
  font-size: 2.2rem;
}
.hrLine{
  margin: 1rem 0;
}
.hrLine2{
  display: none;
}
.theory-points{
  display: grid;
  grid-template-columns: 4rem auto;
}
.contact-us-3 {
  /* background-color: cadetblue; */
  text-align: center;
  padding: 2rem 0;
}
.contact-us-3-box {
  background-color: var(--theme-color);
  padding: 1rem 1vw;
  margin: 1rem 3vw;
  box-shadow: 0 0 0.7rem 0.1rem black;
  border: 1px solid black;
  /* border-radius: 10px; */
}
.contact-us-3-box h2 {
  font-weight: 500;
}
.or {
  /* color: white; */
  padding: 1rem 0;
}

.appointment-form-input {
  width: 100%;
  font-size: 1.5rem;
  margin-top: 1rem;
  padding: 1rem;
}

@media (max-width: 1355px) {
  #section2 {
    grid-template-columns: 1fr;
    grid-template-rows: auto 2px 1fr;
  }
  .hrLine2{
    display: block;
  }
}
/* section locations */

#locations {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem 2vw;
  margin-top: 2rem;
}
.container {
  display: grid;
  grid-template-columns: 1fr 2fr 0.5fr;
  grid-gap: 0 1rem;
  border: 2px solid black;
  border-radius: 15px;
  padding: 1rem 0.5rem;
  background-image: linear-gradient(45deg, #0000003d, transparent);
  /* background-color: #fafafa; */
}
.flag {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
#kuwaitFlag {
  background-image: url("images/kuwaitFlag.jpg");
}
#omanFlag {
  background-image: url("images/omanFlag.jpg");
}
#qatarFlag {
  background-image: url("images/qatarFlag.jpg");
}
#saudiFlag {
  background-image: url("images/saudiFlag.jpg");
}
#uaeFlag {
  background-image: url("images/uaeFlag.jpg");
}
.country-text {
  color: red;
  font-size: 1.7rem;
}

.click-here {
  background-color: var(--theme-color);
  color: white;
  padding: 2rem 0.5rem 2rem;
  border-radius: 10px;
  text-align: center;
  font-size: 1.2rem;
  transition: all 0.3s ease-in;
  cursor: pointer;
}
.click-here:hover {
  font-size: 1.4rem;
  background-color: var(--hover-color2);
  box-shadow: 0 0 8px 4px black;
}

@media (max-width: 1355px) {
  #locations {
    grid-template-columns: 1fr;
  } 
}

/* why-us section */

#why-us {
  display: grid;
  grid-template-columns: 3fr 2fr;
  padding: 0 0 0 3vw;
  grid-gap: 4rem 0;
}
#company-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem 2vw;
  margin-top: 2rem;
}
.stats-box {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  padding: 1rem 1vw 1.5rem;
  display: none;
}
.stats-box i {
  font-size: 3.5rem;
  margin: 1rem 1rem 2rem 2rem;
}
.stats-box p {
  font-size: 1.5rem;
}
.plane {
  background-image: url(images/plane.gif);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-position-y: 55%;
  height: 25vw;
}
/* ratings */

.ratingsGrid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem 2vw;
  margin-top: 2rem;
}
#bar-graph-reviews {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 2rem;
  align-items: center;
}
.bar-graph-container {
  background-color: grey;
  border: 1px solid black;
  height: 3rem;
  border-radius: 7px;
  overflow: hidden;
}
.bar-graph {
  background-color: var(--theme-color);
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 1.5rem;
  font-weight: 500;
}
.rating {
  font-size: 1.7rem;
  font-weight: 500;
  font-family: system-ui;
  padding: 1rem 1vw 1rem 4vw;
}
.stars {
  color: gold;
}
#ratingsPhone{
  display: none;
}

@media (max-width: 1355px) {
  #bar-graph-reviews{
    grid-area: 3/1/5/3;
    padding-right: 3vw;
  } 
  .ratings-container{
    grid-area: 5/1/6/3;
  }
  #ratingsDesktop{
    display: none;
  }
  #ratingsPhone{
    display: block;
  }
}

/* find -us section */

.map {
  height: 35rem;
}

/* helpline */
.helpline {
  background-color: forestgreen;
  color: white;
  position: relative;
  padding: 5rem 4vw;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}
.helpline2 {
  background-color: darkslategrey;
}
.helpline-btn {
  border-radius: 0;
  background-color: #2b2727;
  border: 1px solid white;
}
#helpLine2Phone{
  display: none;
}

@media (max-width: 1355px) {
  #helpLine2Desktop{
    display: none;
  }
  #helpLine2Phone{
    display: flex;
  }
}



.marquee {
  width: var(--marquee-width);
  height: var(--marquee-height);
  background-color: #111;
  color: #eee;
  overflow: hidden;
  position: relative;
}
.marquee:before, .marquee:after {
  position: absolute;
  top: 0;
  width: 10rem;
  height: 100%;
  content: "";
  z-index: 1;
}
.marquee:before {
  left: 3vw;
}
.marquee:after {
  right: 1rem;
}








.marquee-content {
  list-style: none;
  height: auto;
  display: flex;
  animation: scrolling var(--marquee-animation-duration) linear infinite;
}
 .marquee-content:hover {
  animation-play-state: paused;
  cursor: pointer; 
} 
@keyframes scrolling {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements))); }
}
.marquee-content li {
  position: relative;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  padding: 2rem 2rem 15rem;
  flex-shrink: 0;
  width: var(--marquee-element-width);
  max-height: 100%;
  /* font-size: calc(var(--marquee-height)*3/4); */ /* 5rem; */
  /* white-space: nowrap; */
  outline: 2px solid black;
  border: 1vw solid white;
}

@media (max-width: 1355px) {
  :root {
    --marquee-elements-displayed: 3;
  }
}


.person {
  height: 5rem;
  width: 5rem;
  position: absolute;
  bottom: 20%;
  left: 10%;
  border-radius: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 3px solid seashell;
}
.person figcaption{
  position: relative;
  top: 5rem;
  font-size: 1.6rem;
}
#person1 {
  background-image: url("images/people/person1.jpg");
}
#person2 {
  background-image: url("images/people/person2.jpg");
  background-position-x: 51%;
}
#person3 {
  background-image: url("images/people/person3.jpg");
  background-position-x: 95%;
}

#person4 {
  background-image: url("images/people/person4.jpeg");
}

#person5 {
  background-image: url("images/people/person5.jpg");
}

#person6 {
  background-image: url("images/people/person6.jpeg");
}

.quote {
  font-size: 3rem;
  color: white;
}
.quoteClose{
  text-align: right;
}