@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/* FOR LOGO FONT */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&display=swap');



:root {

  --font1: 'Montserrat', sans-serif;

  --font2: 'Poppins', sans-serif;

}



body {

  font-family: 'Montserrat', sans-serif;

  overflow-x: hidden;

  font-weight: 400;

  font-size: 16px;

  line-height: 26px;

  color: #fff;

}







.padtb80 {

  padding-top: 80px;

  padding-bottom: 80px;

}



a {

  color: white !important;

  text-decoration: none !important;

}



a:hover {

  color: red;

  text-decoration: none;

}



.btn-primary {

  margin-left: 25px;

  background: #2F91FF;

  color: #fff;

  border-radius: 4px;

  padding: 13px;

  white-space: nowrap;

  transition: 0.3s;

  font-size: 18px;

  display: inline-block;

  font-weight: 600;

  box-shadow: 0px 9px 15px rgba(3, 118, 254, 0.22);

}



.btn-primary:hover {

  background-color: #2F91FF;

  padding: 13px;

  border: none;

}





ul {

  padding: 0;

  margin: 0;

}



ul li {

  padding: 0;

  margin: 0;

  list-style: none;

}



.h-100 {

  height: 100%;

}





/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

#header {

  z-index: 10;

  padding: 50px;

  position: fixed;

  width: 100%;

  top: 0;

  display: flex;

  justify-content: space-between;

}



#header .logo {

  text-align: center;

}



#header .logo h1 {

  font-size: 26px;

  margin: 0;

  padding: 0;

  line-height: 1;

  font-weight: 900;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #caad8b;

  margin-top: 20px;

  font-family: 'Playfair Display', serif;

}



#header .logo img {

  width: 150px;

  transition: all 0.5s ease;

}



#header .logo img+img {

  margin-top: 20px;

  min-width: 180px;

  display: block;

}



#header .logo h1 a,

#header .logo h1 a:hover {

  color: #caad8b;

  text-decoration: none;

}



#header.sticky {

  padding: 20px 50px;

  background: rgba(0, 0, 0, 0.8);

}



#header.sticky .logo img {

  width: 80px;

}



@media (max-width: 768px) {

  #header .logo h1 {

    font-size: 28px;

    padding: 8px 0;

  }

}



.col.header-image {

  padding: 0px;

}



.row.header-image-row {

  margin: 0px;

  margin-top: -120px !important;

}



.row.text {

  display: initial !important;

}



.digitally-driven {

  margin-top: 300px;

}





.full-page-color {

  background-color: black;

}



h2.digitally-font {

  font-size: 90px;

  color: #ff0000;

  font-weight: 600;

}



h2.human-text {

  font-size: 90px;

  color: white;

  font-weight: 600;

  margin-left: 30%;

  line-height: 100px;

}



.digitally-driven-text p {

  margin-bottom: 0px;

}



p.short-text {

  color: white;

  margin: 10px 0px 10px 0px;

  font-size: 18px;

  font-weight: 300;
  text-transform:uppercase;

}



P.unlocked-text {

  color: white;

  font-size: 40px;

  font-weight: bold;

  margin-top: 0;

  margin-bottom: 0px;

}



img.img-fluid.bigimage {

  filter: brightness(1.5);

}



.container-fluid {

  padding: 0px;

}



.relative {

  position: relative;

}



.home-film-content {

  display: flex;

  color: white;

  gap: 2%;

}



.segment-name {

  background-color: red;

  padding: 5px 15px;

  font-family: var(--font2);

}



.movie-rating {

  border: 2px solid rgba(255, 255, 255, 0.5);

  padding: 5px 10px;

  font-family: var(--font2);

}



.film-heading {

  color: white;

  font-size: 76px;

  font-weight: bold;

  font-family: var(--font2);

  line-height: 86px;

}



.film-duration {

  padding: 5px;

  font-family: var(--font2);

}



.film-crew {

  font-size: 15px;

  font-weight: 300;

  color: white;

  font-family: var(--font2);

  margin-top: 30px;

}



.cast {

  margin-top: 30px;

}



.film-crew label {

  display: block;

}





.cast-image {

  display: flex;

  gap: 20px;

  margin: 30px 0px 0px 0;

}



.cast-image>div {

  text-align: center;

}



.actor {

  font-size: 11PX;

  font-weight: 300;

  text-align: center;

  color: white;

  margin: 5px 0 0 0;

  line-height: 14px;

}



.actor-name {

  font-size: 13px;

  font-weight: 600;

  text-align: center;

  color: white;

  line-height: 16px;

  margin-bottom: 0;

  text-transform: uppercase;

}





.col.image1,

.col.image3 {

  margin-top: 125px;

}



.col.image2 {

  margin-top: 75px;

}





.row.row-first {

  margin: 0px 90px 0px 60px;

  gap: 3%;

}



.row.row-second {

  margin: 10px 90px 70px 210px;

}



.col.image4 {

  margin-top: 45px;

}



.col.image5 {

  margin-top: 90px;

}



.work-test h5 {

  text-align: left;

  font-size: 62px;

  color: white;

}



/* footer css */





.footer {

  margin-top: 65px;

}



.f-left-text {

  padding-left: 30px;

  margin-top: 20px;

}



.container.footer-align {

  border-top: 1px solid;

  border-bottom: 1px solid;

}



.f-left-text .bigcol {

  margin-top: 70px;

  display: flex;

  padding-bottom: 70px;

  gap: 100px;

}



.f-left-text .bigcol p {

  color: white;

  font-size: 15px;

  font-weight: 500;

  margin: 0;

}





footer .col-sm-8 {

  border-right: 1px solid;

}



.footersmallcol {

  display: flex;

  padding-left: 28px;

  justify-content: space-between;

  flex-wrap: wrap;

  padding-bottom:25px;

}



.footersmallcol h6 {

  font-size: 12px;

  font-weight: 600;

  color: white;

  margin: 25px 0px 25px 0;

  text-transform: uppercase;

}



.footersmallcol ul {

  margin: 0;

  padding: 0;

}



.footersmallcol ul li {

  list-style: none;

  margin-bottom: 5px;

}



.footersmallcol ul li a {

  font-size: 12px;

  font-weight: 400;

  color: white;

  margin: 7px 0px 7px 0;

}



.footersmallcol .follow {

  width: 100%;

}





.footer-smallcol-service {

  margin-left: 100px;

}





.follow-icon ul {

  display: flex;

  gap: 3%;

}



.policy-text {

  color: white;

  font-weight: 300;

  font-size: 12px;

  padding: 20px;

}







img.img-fluid.d3-animate {

  animation-name: float_down_up;

  animation-duration: 10s;

  animation-iteration-count: infinite;

  animation-timing-function: linear;

  -webkit-animation-name: float_down_up;

  -webkit-animation-duration: 10s;

  -webkit-animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear;

  -moz-animation-name: float_down_up;

  -moz-animation-duration: 10s;

  -moz-animation-iteration-count: infinite;

  -moz-animation-timing-function: linear;

  -ms-animation-name: float_down_up;

  -ms-animation-duration: 10s;

  -ms-animation-iteration-count: infinite;

  -ms-animation-timing-function: linear;

  -o-animation-name: float_left_right;

  -o-animation-duration: 10s;

  -o-animation-iteration-count: infinite;

  -o-animation-timing-function: linear;

}





@keyframes float_down_up {

  0% {

    transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }



  50% {

    transform: translateY(-40px);

    transform: translateY(-40px);

    opacity: 1

  }



  100% {

    transform: translateY(0);

    transform: translateY(0);

    opacity: 1

  }

}



.mfp-iframe {

  width: 854px !important;

  top: 50% !important;

  left: 50% !important;

  transform: translate(-50%, -50%) !important;

}





@media (max-width: 767px) {

  .mfp-iframe {

    width: 100% !important;

    top: 50% !important;

    left: 50% !important;

    transform: translate(-50%, -50%) !important;

  }



}



#video-popup-container {

  display: none;

  position: fixed;

  z-index: 996;

  width: 60%;

  left: 50%;

  margin-left: -30%;

  top: 20%;

  background-color: #fff;

}



#video-popup-close {

  cursor: pointer;

  position: absolute;

  right: -10px;

  top: -10px;

  z-index: 998;

  width: 25px;

  height: 25px;

  border-radius: 25px;

  text-align: center;

  font-size: 12px;

  background-color: #000;

  line-height: 25px;

  color: #fff;

}



#video-popup-iframe-container {

  position: absolute;

  z-index: 997;

  width: 100%;

  padding-bottom: 56.25%;

  border: 2px solid #000;

  border-radius: 2px;

  background-color: #000;

}



#video-popup-iframe {

  z-index: 999;

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  top: 0;

  background-color: #000;

}



#video-popup-overlay {

  display: none;

  position: fixed;

  z-index: 995;

  top: 0;

  background-color: #000;

  opacity: 0.8;

  width: 100%;

  height: 100%;

}



#video-popup-close:hover {

  color: #DE0023;

}





/* details page  */



.films-banner {

  height: 100vh;

  position: relative;

  display: flex;

  align-items: flex-end;

}



.films-banner>img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

}



.films-banner::before {

  content: '';

  background: #000;

  opacity: 0.5;

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

}



.films-banner .container {

  z-index: 1;

}



.films-top-details {

  color: #fff;

}



.films-top-details {

  padding-bottom: 100px;

  text-align: center;

}



.films-top-details h1 {

  font-weight: 700;

  font-size: 52px;

  text-transform: uppercase;

}



.films-top-details h2 {

  font-weight: 500;

  font-size: 24px;

}



.site-m-head {

  color: #fff;

  font-weight: 600;

  font-size: 36px;

  margin-bottom: 30px;

}



.trailer video {

  width: 100%;

}





.col.maroc-image h4 {

  font-size: 40px;

  color: white;

  font-weight: 200;

  padding-top: 650px;

}



.col.maroc-image h6 {

  font-size: 18px;

  color: white;

  font-weight: 200;

  margin-top: 15px;

}



.booking-btn {

  display: flex;

  padding: 15px 0px 90px 0px;

}



.btn1 {

  background-color: #f20000;

  width: auto;

  padding: 10px 21px 10px 7px;

  color: white;

  border-radius: 50px;

  margin-right: 18px;

}



.btn1 img {

  margin-right: 10px;

  margin-left: 10px;

}



span.bookingtext {

  font-size: 12px;

}



.col-8.content {

  color: white;

}



.col-8.content p {

  font-weight: 400;

}



.download-btn {

  margin-top: 20px;

}



.download-btn a {

  background: red;

  color: #fff;

  display: inline-flex;

  border-radius: 6px;

  padding: 10px 20px;

  align-items: center;

}



.download-btn a svg {

  width: 24px;

  fill: #fff;

  margin-left: 5px;

}



h1 span {

  transition: 0.5s ease-out;

}



h1:hover span:nth-child(1) {

  margin-right: 5px;

}



h1:hover span:nth-child(1):after {

  content: " ";

}



h1:hover span:nth-child(2) {

  margin-left: 10px;

}



h1:hover span {

  color: #fff;

  text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff;

}





.content p:nth-of-type(1) {

  margin-top: 30px;

}



.content p:nth-of-type(2) {

  margin-top: 30px;

}



.content p:nth-of-type(3) {

  margin-top: 30px;

}



.content p:nth-of-type(4) {

  margin-top: 30px;

  margin-bottom: 5px;

}



.content p:nth-of-type(5) {

  margin-bottom: 5px;

}



.content p:nth-of-type(7) {

  font-size: 30px;

  margin-top: 50px;

  font-weight: 500 !important;

}



.content p:nth-of-type(9) {

  font-size: 30px;

  font-weight: 500 !important;

}



.content p:nth-of-type(10) {

  margin-bottom: 8px;

}



.content p:nth-of-type(11) {

  margin-bottom: 8px;

}



.content p:nth-of-type(13) {

  margin-bottom: 8px;

  margin-top: 38px;

  font-size: 14px;

  font-weight: 500;

}



img.sharebutton {

  margin-right: 16px;

}



.col-4.marocimage {

  margin-top: 59px;

}



.nextfilms {

  height: 100vh;

  overflow: hidden;

  display: flex;

  align-items: center;

}



.nextfilms:before {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  background: #000;

  opacity: 0.5;

}



.bigimage-text {

  color: white;

  margin-top: 35px;

  padding: 215px 0px 290px 40px;

}



.bigimage-text p:nth-of-type(1) {

  font-size: 20px;

  margin-right: 20px;

}



.bigimage-text p:nth-of-type(2) {

  font-size: 40px;

  line-height: 30px;

  font-weight: 200;

}



.bigimage-text img {

  margin-left: 10px;

}



.btn-two {

  color: #FFF;

  transition: all 0.5s;

  position: relative;

}



.btn-two span {

  z-index: 2;

  display: contents;



  width: 100%;

  height: 100%;

}



.btn-two:hover::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  transition: all 0.5s;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.btn-two:hover::after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

  transition: all 0.5s;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



/* .btn-two:hover::before {

  transform: rotate(-45deg);

  background-color: rgba(255,255,255,0);

}

.btn-two:hover::after {

  transform: rotate(45deg);

  background-color: rgba(255,255,255,0);

} */



h4.animate__fadeInUp {

  animation-duration: 5s;

}





/* new navigation */





.menu {

  width: 40px;

  height: 33px;

  display: flex;

  cursor: pointer;

  z-index: 1;

  margin-top: 30px;

  flex-wrap: wrap;

  justify-content: flex-end;

}



.menu span {

  cursor: pointer;

  height: 2px;

  width: 40px;

  margin-bottom: 8px;

  background: #fff;

  position: relative;

  right: 0;

  display: block;

  transform: rotate(0deg);

  transition: .7s ease;

}



.menu span:nth-child(2) {

  width: 29px;

}



.hidden {

  opacity: 0;

  transition-delay: .5s;

  pointer-events: none;

  cursor: default;

}



.visible {

  opacity: 1;

}



.menu.open span:nth-child(1) {

  top: 10px;

  transform: rotate(135deg);

  transition: .7s ease;

  background: #fff;

}



.menu.open span:nth-child(2) {

  opacity: 0;

  right: 100px;

  background: #fff;

}



.menu.open span:nth-child(3) {

  top: -10px;

  transform: rotate(-135deg);

  transition: .7s ease;

  background: #fff;

}



#navigation {

  background: #000;

  color: #fff;

  font-weight: 400;

  font-size: 40px;

  width: 100vw;

  height: 100vh;

  position: absolute;

  left: 0;

  top: 0;

}



.nav {

  display: flex;

  justify-content: center;

  height: 100vh;

  align-items: center;

}





.nav li {

  width: 100%;

  padding: 20px;

}



.nav li a {

  font-weight: 700;

}



.animated {

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both

}



.animated.infinite {

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite

}



.animated.hinge {

  -webkit-animation-duration: 2s;

  animation-duration: 2s

}



.animated.bounceIn,

.animated.bounceOut,

.animated.flipOutX,

.animated.flipOutY {

  -webkit-animation-duration: .75s;

  animation-duration: .75s

}



.slideInLeft {

  animation-duration: .5s;

}



.slideOutLeft {

  animation-duration: .5s;

}





@-webkit-keyframes slideInLeft {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

    visibility: visible

  }



  to {

    -webkit-transform: translateZ(0);

    transform: translateZ(0)

  }

}



@keyframes slideInLeft {

  0% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

    visibility: visible

  }



  to {

    -webkit-transform: translateZ(0);

    transform: translateZ(0)

  }

}



.slideInLeft {

  -webkit-animation-name: slideInLeft;

  animation-name: slideInLeft

}



@-webkit-keyframes slideOutLeft {

  0% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0)

  }



  to {

    visibility: hidden;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

  }

}



@keyframes slideOutLeft {

  0% {

    -webkit-transform: translateZ(0);

    transform: translateZ(0)

  }



  to {

    visibility: hidden;

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0)

  }

}



.slideOutLeft {

  -webkit-animation-name: slideOutLeft;

  animation-name: slideOutLeft

}



.nav li {

  opacity: 0;

  transform: translateX(20px);

  transition: all 0.3s;

}



.nav li:nth-child(5) {

  transition-delay: 0.1s;

}



.nav li:nth-child(5) span {

  transition-delay: 0.1s;

}



.nav li:nth-child(4) {

  transition-delay: 0.2s;

}



.nav li:nth-child(4) span {

  transition-delay: 0.2s;

}



.nav li:nth-child(3) {

  transition-delay: 0.3s;

}



.nav li:nth-child(3) span {

  transition-delay: 0.3s;

}



.nav li:nth-child(2) {

  transition-delay: 0.4s;

}



.nav li:nth-child(2) span {

  transition-delay: 0.4s;

}



.nav li:nth-child(1) {

  transition-delay: 0.5s;

}



.nav li:nth-child(1) span {

  transition-delay: 0.5s;

}



.visible .nav li {

  opacity: 1;

  transform: translateX(0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}



.visible .nav li:nth-child(1) {

  transition-delay: 0.5s;

}



.visible .nav li:nth-child(1) span {

  transition-delay: 0.5s;

}



.visible .nav li:nth-child(2) {

  transition-delay: 0.6s;

}



.visible .menavnu li:nth-child(2) span {

  transition-delay: 0.6s;

}



.visible .nav li:nth-child(3) {

  transition-delay: 0.7s;

}



.visible .nav li:nth-child(3) span {

  transition-delay: 0.7s;

}



.visible .nav li:nth-child(4) {

  transition-delay: 0.8s;

}



.visible .nav li:nth-child(4) span {

  transition-delay: 0.8s;

}



.visible .nav li:nth-child(5) {

  transition-delay: 0.9s;

}



.visible .nav li:nth-child(5) span {

  transition-delay: 0.9s;

}



.visible .nav li:nth-child(6) {

  transition-delay: 1s;

}



.visible .nav li:nth-child(6) span {

  transition-delay: 1s;

}



.visible .nav li:nth-child(7) {

  transition-delay: 1.1s;

}



.visible .nav li:nth-child(7) span {

  transition-delay: 1.1s;

}



.visible .nav li:nth-child(8) {

  transition-delay: 1.2s;

}



.visible .nav li:nth-child(8) span {

  transition-delay: 1.2s;

}



.visible .nav li:nth-child(9) {

  transition-delay: 1.3s;

}



.visible .nav li:nth-child(9) span {

  transition-delay: 1.3s;

}











/* loader */



.loader-black-2 {

  position: fixed;

  left: 0%;

  top: 0%;

  right: 0%;

  bottom: 0%;

  z-index: 101;

  display: none;

  overflow: hidden;

  height: 100vh;

  background-color: #fff;

  color: #fff;

}



.loader-blue {

  position: fixed;

  left: 0%;

  top: 0%;

  right: 0%;

  bottom: 0%;

  z-index: 100;

  display: none;

  overflow: hidden;

  width: 100%;

  height: 100vh;

  background-color: #000;

  color: #000;

}



.loader-black {

  position: fixed;

  left: 0%;

  top: 0%;

  right: 0%;

  bottom: 0%;

  z-index: 99;

  display: none;

  overflow: hidden;

  height: 100vh;

  background-color: red;

  color: red;

}



/* slider js */



.slider-top .slides li {

  transition: opacity 0.5s ease;

  opacity: 0.5;

}



.slider-top .slide-text li {

  opacity: 0;

  transition: opacity 0.5s ease;

}



.slider-top .slides li.active {

  opacity: 1;

}



.slider-top .slide-text li.active {

  opacity: 1;

}



.slider-top ul.slides {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

}



.slider-top ul.slides li {

  width: 25%;

}



.slider-top ul.slides li img {

  width: 100%;

}



.slider-top ul.slide-text {

  position: relative;

}



.slider-top ul.slide-text li {

  text-align: center;

  position: absolute;

  top: 0;

  width: 100%;

  text-align: center;

}



.slider-top ul.slide-text li h2 {

  color: #fff;

  font-weight: 700;

  font-size: 180px;

  line-height: 160px;

  text-transform: uppercase;

}







.home-film {

  height: 650px;

  overflow: hidden;

  position: relative;

  display: flex;

  align-items: center;

}



.home-film>img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

}



.home-film::before {

  content: '';

  opacity: 0.5;

  background: #000;

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

}



.home-film .container {

  z-index: 1;

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between;

  align-items: center;

}



/* popup */



.playbutton img {

  cursor: pointer;

}



.pop-up {

  height: 100vh;

  width: 100%;

  background: rgba(0, 0, 0, 0.7);

  position: fixed;

  z-index: 9999;

  border-radius: 5px;

  box-shadow: 0 0 20px #000;

  top: 0;

  bottom: 0;

  display: flex;

  align-items: center;

  left: 0;

  right: 0;

  justify-content: center;

}



.popup-outer {

  max-width: 1000px;

  position: relative;

}



.popup-outer video {

  width: 100%;

}



.popup-outer span {

  color: #fff;

  border: 2px solid red;

  width: 30px;

  height: 30px;

  display: inline-block;

  text-align: center;

  border-radius: 36px;

  position: absolute;

  right: -16px;

  top: -15px;

  cursor: pointer;

}



#cursor {

  position: absolute;

  width: 20px;

  height: 20px;

  background: red;

  border-radius: 50%;

  mix-blend-mode: difference;

  pointer-events: none;

  transition: transform .15s ease-in-out;

  z-index: 999;

}





.zoomIn img {

  -webkit-transform: scale(1);

  transform: scale(1);

  -webkit-transition: .3s ease-in-out;

  transition: .3s ease-in-out;

}



.zoomIn:hover img {

  -webkit-transform: scale(1.3);

  transform: scale(1.3);

}



/* gallery css */



.gallery {

  position: relative;

  display: block;

  max-width: 100%;

  margin: auto;

  overflow: hidden;

  height: 600px;

}



.gallery .slick-list {

  overflow: hidden;

  height: 100%;

}



.slick-track,

.gallery-img-holder {

  height: 100%;

}



.gallery .slick-slide {

  outline: none !important;

}



.gallery-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 40px;

  height: 40px;

  font-size: 14px;

  font-family: Helvetica, sans-serif;

  line-height: 40px;

  text-align: center;

  background-color: #E6E6E6;

  z-index: 10;

  cursor: pointer;

  transition: background 0.3s ease;

}



.gallery-arrow:hover {

  background: #D0DFE6;

}



.gallery-arrow.mod-prev {

  left: 0;

  border-radius: 0 4px 4px 0;

}



.gallery-arrow.mod-next {

  right: 0;

  border-radius: 4px 0 0 4px;

}



.gallery-item {

  position: relative;

  float: left;

  vertical-align: middle;

  text-align: center;

}



.gallery-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.slick-lightbox .slick-arrow {

  z-index: 10;

}



.slick-lightbox-slick .slick-prev.slick-arrow {

  display: none !important;

}



/* cast cres */



.cast-crew ul {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 2%;

  margin-top: 50px;

}



.cast-crew ul li {

  width: 32%;

  margin-bottom: 40px;

}



.cast-crew ul li img {

  max-width: 250px;

  border-radius: 100%;

}



.cast-crew ul li h4 {

  color: #fff;

  font-size: 16px;

  text-transform: uppercase;

  margin-top: 10px;

}







/* team page css start here */

.team-banner {

  height: 40vh !important;

}



.team-banner::before {

  content: "";

  display: none;

}



section.users {

  padding-bottom: 50px;

}



.wrapper {

  width: 100%;

  margin: 0 auto;

  background-color: #fff;

}



.wrapper h2 {

  font-weight: 700;

  font-size: 2.5em;

  color: #000;

  position: relative;

  text-align: center;

  padding-top: 50px;

}



.users-container {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  padding-bottom: 50px;

  gap:2rem;

  margin-top:2rem;

}



.user {

  position: relative;

  border: 1px solid #000;

  margin: 0;

  width: 280px;

  height: 280px;

  font-size: 0px;

  transition: 200ms ease-in-out;

}



.user__avatar {

  width: 100%;

  height: 100%;

  display: block;

  clear: both;

  overflow: hidden;

  transition: 200ms ease-in-out;

}



.user__img {

  width: 100%;

  -o-object-fit: cover;

  object-fit: cover;

  -o-object-position: 50% 50%;

  object-position: 50% 50%;

  transition: 200ms ease-in-out;

  height: 100%;

}



.user__info,

.user__emojis {

  opacity: 0;

  pointer-events: none;

}



.user__info {

  position: absolute;

  top: 0;

  bottom: 0;

  right: 0;

  left: 0;

  font-size: 1rem;

  background-color: rgba(0, 0, 0, 0.45);

  display: flex;

  flex-direction: column;

  justify-content: center;

  text-align: center;

  padding: 1em;

  transition: 200ms ease-in-out;

}



.user__name {

  font-size: 23px;

  color: #fff;

  line-height: 1.35;

  padding-bottom: 0.35em;

}



.user__title {

  color: rgba(255, 255, 255, 0.75);

}



.user__emojis svg {

  height: 100%;

}



.user:hover {

  border-radius: 100%;

}



.user:hover .user__avatar,

.user:hover .user__img,

.user:hover .user__info {

  border-radius: 100%;

}



.user:hover .user__info,

.user:hover .user__emojis {

  opacity: 1;

  pointer-events: all;

}



.user:hover .user__info {

  z-index: 3;

}



.sub-headings {

  font-size: 17px;

  color: #000;

  line-height: 25px;

  margin: 10px 0px;

  font-weight: initial;

}



.modal-title {

  color: #000;

}



html.modal-active,

body.modal-active {

  overflow: hidden;

}



.modal-container {

  position: fixed;

  display: flex;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  transform: scale(0);

  z-index: 1;

}



.modal-container.one {

  transform: scaleY(0.01) scaleX(0);

  animation: unfoldIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

  z-index: 99;

  width: 100%;

}



.modal-container.one .modal-background .modal {

  transform: scale(0);

  animation: zoomIn 0.5s 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;



}



.modal-container.one.out {

  transform: scale(1);

  animation: unfoldOut 1s 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}



.modal-container.one.out .modal-background .modal {

  animation: zoomOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;

}





.modal-container .modal-background {

  display: table-cell;

  background: rgba(0, 0, 0, 0.8);

  vertical-align: middle;

  width: 100%;

}



.modal-container .modal-background .modal {

  background: #fff;

  padding: 30px 30px;

  border-radius: 3px;

  font-weight: 300;

  position: relative;

  width: 70%;

  margin: auto;

  display: block;

  height: 80vh;

  overflow-y: auto;

  top: 90px;

}



.modal-container .modal-background .modal h2 {

  font-size: 25px;

  line-height: 25px;

  margin-bottom: 15px;

}



@keyframes unfoldIn {

  0% {

    transform: scaleY(0.005) scaleX(0);

  }



  50% {

    transform: scaleY(0.005) scaleX(1);

  }



  100% {

    transform: scaleY(1) scaleX(1);

  }

}



@keyframes unfoldOut {

  0% {

    transform: scaleY(1) scaleX(1);

  }



  50% {

    transform: scaleY(0.005) scaleX(1);

  }



  100% {

    transform: scaleY(0.005) scaleX(0);

  }

}



@keyframes zoomIn {

  0% {

    transform: scale(0);

  }



  100% {

    transform: scale(1);

  }

}





.form-control{padding:15px 0;}



/* contact page */











.btn-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 16px 0 0;

}



.btn-wrap button {

  padding: 0 32px;

  font-size: 18px;

  line-height: 48px;

  border: 1px solid transparent;

  font-weight: 600;

  border-radius: 6px;

  transition: all 0.5s ease;

  cursor: pointer;

  box-shadow: 0 0 5px 5px #00000020;

}



.btn-wrap button:hover {

  border: 1px solid #000;

  background: transparent;



}





.btn-wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  padding: 16px 0 0;

}



.btn-wrap button {

  padding: 0 32px;

  font-size: 18px;

  line-height: 48px;

  border: 1px solid transparent;

  font-weight: 600;

  border-radius: 6px;

  transition: all 0.5s ease;

  cursor: pointer;

  box-shadow: 0 0 5px 5px #00000020;

}



.btn-wrap button:hover {

  border: 1px solid #000;

  background: transparent;



}



.leftpart {

  padding-top: 80px;

}



.address {

  background-color: #ffffff85;

  border-radius: 10px;

  box-shadow: 0 0 3px 3px #ffffff;

  margin-bottom: 40px;

  color: black;

  transition: transform 1s;

}



.address:hover {

  background-color: #bba9a4;

  border-radius: 10px;

  transform: scale(1.1);

}



.address h4 {

  padding: 30px 10px;

}



.address i {

  font-size: 30px;

}



.address p {

  padding-bottom: 30px;

}



.address a {

  color: black;

}



.main-wrapper:hover {

  background-color: #bba9a4;

}



.border-image {

  margin-top: -10px;

}







.border-image img {

  width: 100%;

}



.imagescroll {

  align-items: center;

  background: url(../images/Body-Seoul-banner.jpg)no-repeat center / cover;

  bottom: 0;

  display: flex;

  justify-content: center;

  height: 100vh;

  padding: 1rem;

  position: sticky;

  width: 100%;

  z-index: -111;

}



.imagescroll:nth-child(5) {

  background-image: url(../images/The-Invisible-banner.jpg);

  z-index: -112;

}



.imagescroll:nth-child(6) {

  background-image: url(../images/maroc-banner.png);

  z-index: -113;

}



.imagescroll:nth-child(7) {

  background-image: url(../images/deep-echo-banner.jpg);

  z-index: -114;

}



.imagescroll:nth-child(8) {

  background-image: url(../images/PSYCHWARD-banner.jpg);

  z-index: -115;

}





@supports not (-webkit-text-stroke: 1px #000) {

  .title {

    text-shadow:

      3px 3px 0 #000,

      -1px -1px 0 #000,

      1px -1px 0 #000,

      -1px 1px 0 #000,

      1px 1px 0 #000;

  }

}





h2.textscroll {

  font-size: 150px;

  color: white;

}



.privacy-content {

  color: white;

  margin-top: 50px;

}



.w-container {

  width: 800px !important;

}



.privacy-content h5 {

  font-size: 27px;

  font-weight: 400;

  margin-bottom: 10px;

  margin-top: 20px;

}



.privacy-content p {

  font-weight: 200;

  line-height: 25px;

}







/* contact second css */



.right_conatct_social_icon {

  background:red;

}



.contact_us {

  background-color: #f1f1f1;

  padding: 120px 0px;

}



.contact_inner {

  background-color: #fff;

  position: relative;

  box-shadow: 20px 22px 44px #cccc;

  border-radius: 25px;

}



.contact_field {

  padding: 60px 340px 90px 100px;

}



.right_conatct_social_icon {

  height: 100%;

}



.contact_field h3 {

  color: #000;

  font-size: 40px;

  letter-spacing: 1px;

  font-weight: 600;

  margin-bottom: 10px

}



.contact_field p {

  color: #000;

  font-size: 13px;

  font-weight: 400;

  letter-spacing: 1px;

  margin-bottom: 35px;

}



.contact_field .form-control {

  border-radius: 0px;

  border: none;

  border-bottom: 1px solid #ccc;
  color: #000;

}



.contact_field .form-control:focus {

  box-shadow: none;

  outline: none;

  border-bottom: 2px solid #1325e8;

}



.contact_field .form-control::placeholder {

  font-size: 13px;

  letter-spacing: 1px;

}



.contact_info_sec {

  position: absolute;

  background-color: #2d2d2d;

  right: 1px;

  top: 18%;

  height: 340px;

  width: 340px;

  padding: 40px;

  border-radius: 25px 0 0 25px;

}



.contact_info_sec h4 {

  letter-spacing: 1px;

  padding-bottom: 15px;

}



.info_single {

  margin: 30px 0px;

}



.info_single i {

  margin-right: 15px;

}



.info_single span {

  font-size: 14px;

  letter-spacing: 1px;

}



button.contact_form_submit {

  background: red;

  border: none;

  color: #fff;

  padding: 10px 15px;

  width: 100%;

  margin-top: 25px;

  border-radius: 35px;

  cursor: pointer;

  font-size: 14px;

  letter-spacing: 2px;

}



.socil_item_inner li {

  list-style: none;

}



.socil_item_inner li a {

  color: #fff;

  margin: 0px 15px;

  font-size: 14px;

}



.socil_item_inner {

  padding-bottom: 10px;

}



.map_sec {

  padding: 50px 0px;

}



.map_inner h4,

.map_inner p {

  color: #000;

  text-align: center

}



.map_inner p {

  font-size: 13px;

}



.map_bind {

  margin-top: 50px;

  border-radius: 30px;

  overflow: hidden;

}









/* third contact css */

#contact {

  width: 100%;

  height: 100%;

}



.section-header {

  text-align: center;

  margin: 0 auto;

  padding: 40px 0;

  font: 300 60px 'Oswald', sans-serif;

  color: #fff;

  text-transform: uppercase;

  letter-spacing: 6px;

}



.contact-wrapper {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  margin: 0 auto;

  padding: 20px;

  position: relative;

  max-width: 840px;

}



/* Left contact page */

.form-horizontal {

  /*float: left;*/

  max-width: 400px;

  font-weight: 400;

}



.form-control,

textarea {

  max-width: 400px;

  background-color: #fff;

  color: #fff;

  letter-spacing: 1px;

}



.send-button {

  margin-top: 15px;

  height: 34px;

  width: 400px;

  overflow: hidden;

  transition: all .2s ease-in-out;

}



.alt-send-button {

  width: 400px;

  height: 34px;

  transition: all .2s ease-in-out;

}



.send-text {

  display: block;

  /* margin-top: 10px; */

  font: 700 12px 'Lato', sans-serif;

  letter-spacing: 2px;

}



.alt-send-button:hover {

  transform: translate3d(0px, -29px, 0px);

}



/* Begin Right Contact Page */

.direct-contact-container {

  max-width: 400px;

}



/* Location, Phone, Email Section */

.contact-list {

  list-style-type: none;

  margin-left: -30px;

  padding-right: 20px;

}



.list-item {

  line-height: 4;

  color: #aaa;

}



.contact-text {

  font: 300 18px 'Lato', sans-serif;

  letter-spacing: 1.9px;

  color: #bbb;

}



.place {

  margin-left: 22px;

}



.phone {

  margin-left: 22px;

}



.gmail {

  margin-left: 22px;

}



.contact-text a {

  color: #bbb;

  text-decoration: none;

  transition-duration: 0.2s;

}



.contact-text a:hover {

  color: #fff;

  text-decoration: none;

}





/* Social Media Icons */

.social-media-list {

  position: relative;

  font-size: 22px;

  text-align: center;

  width: 100%;

  margin: 0 auto;

  padding: 0;

}



.social-media-list li a {

  color: #fff;

}



.social-media-list li {

  position: relative;

  display: inline-block;

  height: 60px;

  width: 60px;

  margin: 10px 3px;

  line-height: 60px;

  border-radius: 50%;

  color: #fff;

  background-color: rgb(27, 27, 27);

  cursor: pointer;

  transition: all .2s ease-in-out;

}



.social-media-list li:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 60px;

  height: 60px;

  line-height: 60px;

  border-radius: 50%;

  opacity: 0;

  box-shadow: 0 0 0 1px #fff;

  transition: all .2s ease-in-out;

}



.social-media-list li:hover {

  background-color: #fff;

}



.social-media-list li:hover:after {

  opacity: 1;

  transform: scale(1.12);

  transition-timing-function: cubic-bezier(0.37, 0.74, 0.15, 1.65);

}



.social-media-list li:hover a {

  color: #000;

}



.copyright {

  font: 200 14px 'Oswald', sans-serif;

  color: #555;

  letter-spacing: 1px;

  text-align: center;

}



hr {

  border-color: rgba(255, 255, 255, .6);

}



button#submit {

  margin-left: 1px;

  background: #2F91FF;

  color: #fff;

  border-radius: 4px;

  padding: 13px;

  white-space: nowrap;

  transition: 0.3s;

  font-size: 18px;

  display: inline-block;

  font-weight: 600;

  box-shadow: 0px 9px 15px rgba(3, 118, 254, 0.22);

}



::-webkit-input-placeholder {

  color: red;

}





/* home page services section */

.services-wrapper {

  background: url(../images/services-bg2.jpg) no-repeat center top;

  background-size: cover;

  position: relative;

  padding: 60px 0;

}



.services-wrapper::before {

  content: '';

  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0.5));

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

}



.services-wrapper h2 {

  font-size: 40px;

  font-weight: 300;

  margin-bottom: 60px;

  margin-left:0 !important;

  text-align:center;

}



.services-wrapper .container {

  position: relative;

  z-index: 2;

}



.service-block-wrap {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  max-width: 80%;

  margin: auto;

  gap: 60px;

}



.serivce-block {

  text-align: center;

}



.serivce-block h3 {

  margin-top: 20px;

}



.serivce-block svg {

  width: 120px;

  height: 120px;

  fill: #caad8b;

  stroke: #caad8b;

}





/* contact page */

.form-wrapper textarea {

  max-width: 100%;

}



#navigation ul {

  padding: 0;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 25px;

}



.privacy-content ul li {

  list-style: conic-gradient;

  margin-bottom: 15px;

}

.privacy-content ul {

  padding: 0;

}



#google_translate_element {

  position: fixed;

  bottom: 10px;

  background: rgba(0,0,0,0.9);

  padding: 5px;

  z-index: 9;

}

.splash-logo-wrapper {
  text-align: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.splash-logo-wrapper img.img-fluid {
  display: inline-block;
  max-width: 300px;
}
.splash-logo-wrapper .logo {
  display: inline-block;
}

.enter-website-btn {
  display: inline-block;
  border: 1px solid #ccaf8d;
  padding: 8px 15px;
  color: #ccaf8d;
  text-transform: uppercase;
}
.enter-website-btn:hover{
  color: #fff;
  border: 1px solid #ccaf8d;
  background:#ccaf8d;
}

#header.splash-header {
  justify-content: flex-end;
}