@font-face {
  font-family: 'FeministFont';
  src: url('/assets/fonts/FeministFont.ttf') format('truetype');
}

html{
  scroll-behavior: smooth;
  overflow-y: scroll; 
}

body {
  min-height: 100vh;
  /* min-width: 100vh; */
  background-color: black;
  color: white;
  font-family: 'FeministFont';
}

a {
  text-decoration: none;
  cursor: pointer;
  color: white;
}

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

a {
  text-decoration: none;
  cursor: pointer;
}

li {
  list-style: none;
}

/* @font-face {
  font-family: "FeministFont", sans-serif;
  src: url(../assets/fonts/FeministFont.ttf) !important
}

@font-face {
  font-family: "bebas-neue-pro", sans-serif;
  src: url(https://use.typekit.net/lmm2bbk.css) !important
} */

/* -------------------------------------------------------------------------------- MEDIA QUERIES ------------------------------------------------------------------------------- */

/* -------Desktop large----------- */
@media only screen and (min-width: 112.5em) {
  h1 {
    font-size: 3vw !important;
  } 
  h2 {
    font-size: 2.5vw !important;
  }
  h3 {
    font-size: 0.9vw !important;
  }
  p {
      font-size: 1.5vw !important;
  }

  }
         
/* -------tablet Landscape-----------  */
@media only screen and (max-width: 75em) {
  h1 {
    font-size: 4.5vw !important;
  } 
  h2 {
    font-size: 5vw !important;
  }
  h3 {
    font-size: 1.5vw !important;
  }
  p {
      font-size: 2.2vw !important;
  }
 
  }
     
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  h1 {
    font-size: 5vw !important;
  } 
  h2 {
    font-size: 5vw !important;
  }
  h3 {
    font-size: 2vw !important;
  }
  p {
      font-size: 3vw !important;
  }

  }
    
 /* -------mobile-----------   */
@media only screen and (max-width: 37.5em) {
  h1 {
    font-size: 8vw !important;
  } 
  h2 {
    font-size: 4.2vw !important;
  }
  h3 {
    font-size: 3vw !important;
  }
  p {
      font-size: 4.5vw !important;
  }

 
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  h1 {
    font-size: 8vw !important;
  } 
  h2 {
    font-size: 5.2vw !important;
  }
  h3 {
    font-size: 5vw !important;
  }
  p {
      font-size: 5vw !important;
  }

  }

  h1 {
      font-family: "FeministFont";
      text-align: center;
      font-weight: 700;
      font-size: 4vw;
      /* line-height: 100px; */
  }
  
  h2 {
    font-family: "FeministFont", sans-serif;
    text-align: center;
    font-weight: 700;
    font-size: 2.4vw;
  }
  
  h3 {
    font-family: "FeministFont", sans-serif;
    text-align: center;
    font-weight: 700;
    font-size: 1vw;
    color: #000000;
  }
  
  p {
    font-family: "bebas-neue-pro", sans-serif;
      text-align: center;
      font-size: 1.7vw;
      font-weight: light;
      text-align: left;
  }
  
  @font-face {
    font-family: "FeministFont", sans-serif;
    src: url(../assets/fonts/FeministFont.ttf)
  }
  
  @font-face {
    font-family: "bebas-neue-pro", sans-serif;
    src: url(https://use.typekit.net/lmm2bbk.css)
  }
/* ----------------------------------------------------------------------HOME SECTION---------------------------------------------------------------------- */

.home_section_1 {
  position: relative;
  background-color: black;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.logo_container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

.logo {
  margin: 0;
  position: absolute;
  width: 20%;
  height: auto;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  
}

.arrow_container {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 10%;
}

.arrow {
  margin: 0;
  position: absolute;
  width: 5%;
  height: auto;
  top: 90%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); 
}
 
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .logo_container {
    width: 50%;
  }
  
  .logo {
    width: 50%;
    height: auto;
  }

  .arrow_container {
    width: 10%;
  }
  
  .arrow {
    width: 10%;
    top: 85%;
  }
  }

 /* -------mobile-----------   */
 @media only screen and (max-width: 37.5em) {
  .logo_container {
    width: 60%;
  }
  
  .logo {
    width: 60%;
    height: auto;
  }

  .arrow_container {
    width: 20%;
  }
  
  .arrow {
    width: 20%;
    top: 85%;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .logo_container {
    width: 60%;
  }
  
  .logo {
    width: 60%;
    height: auto;
  }

  .arrow_container {
    width: 20%;
  }
  
  .arrow {
    width: 20%;
    top: 80%;
  }
  }

/* ----------------------------------------------------------------------ABOUT SECTION---------------------------------------------------------------------- */

.about_section {
  position: relative;
  background-color: black;
  /* width: 100vw; */
  /* height: 300vh; */
}

.about_grid_1 img,
.about_grid_2 img,
.about_grid_3 img {
    width: auto;
    height: auto;
 /* Optional, to maintain aspect ratio and fill the cell */
}

.about_grid_1 { 
  display: grid;
  grid-template-columns: 0.4fr 1.6fr 0.4fr 1.6fr;
  grid-template-rows: 0.4fr 0.4fr 1fr;
  grid-auto-columns: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "about_1 about_1 about_1 about_1"
    "about_2 about_3 about_4 about_5"
    "about_6 about_6 about_6 about_6";
  width: 80vw;
  height: auto;
}

.about_1 { grid-area: about_1;}

.about_2 { grid-area: about_2; }

.about_3 { grid-area: about_3; }

.about_4 { grid-area: about_4; }

.about_5 { grid-area: about_5; }

.about_6 { grid-area: about_6; }

.about_grid_2 {  display: grid;
  grid-template-columns: 0.5fr 0.5fr;
  grid-template-rows: 1fr 0.6fr 1.6fr 0.6fr 0.7fr 0.6fr 1.3fr;
  grid-auto-columns: 1fr;
  gap: 0% 0%;
  grid-auto-flow: row;
  grid-template-areas:
    "about_7 about_7"
    "about_8 about_8"
    "about_9 about_9"
    "about_10 about_10"
    "about_11 about_14"
    "about_12 about_14"
    "about_13 about_14";
  width: 80vw;
  height: auto;
}

.about_7 { grid-area: about_7; }

.about_8 { grid-area: about_8; }

.about_9 { grid-area: about_9; }

.about_10 { grid-area: about_10; }

.about_11 { grid-area: about_11; }

.about_12 { grid-area: about_12; }

.about_13 { grid-area: about_13; }

.about_14 { grid-area: about_14; }


.about_grid_3 {  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2.4fr 0.5fr 0.6fr 0.5fr;
  grid-auto-columns: 1fr;
  gap: 0% 0%;
  grid-auto-flow: row;
  grid-template-areas:
    "about_15"
    "about_16"
    "about_17"
    "about_18";
  width: 80%;
  height: auto;
}

.about_15 { grid-area: about_15; }

.about_16 { grid-area: about_16; }

.about_17 { grid-area: about_17; }

.about_18 { grid-area: about_18; }


/* ----------------------------------------------------------------------JOURNEY SECTION---------------------------------------------------------------------- */

.journey_section {
  position: relative;
  background-color: black;
  width: 100vw;
  height: 100vh;
}

.square-container {
  position: absolute;
  top: 20%;
  width: 40%; /* Width of the square */
  height: 40%; /* Height of the square */
  margin: 0; 
  padding: 0;
  animation: square-container  4s linear 0s infinite normal none;
}

.square-container span {
  display: block; /* makes each span a block element */
  margin: 0;
  padding: 0;
}

/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .journey_section {
    height: 80vh;
  }
  }

 /* -------mobile-----------   */
 @media only screen and (max-width: 37.5em) {
  .journey_section {
    height: 50vh;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .journey_section {
    height: 30vh;
  }
  }


@keyframes square-container  {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.line1, .line2, .line3 {
  margin: 0;
  /* line-height: 1,1; */
  white-space: nowrap; /* Prevents the text from breaking into multiple lines */
}

.line1 {
  font-size: 6vw; /* Adjust to make the width fit your desired width */
}

.line2 {
  font-size: 5.5vw; /* Adjust to make the width fit your desired width */
}

.line3 {
  font-size: 8.5vw; /* Adjust to make the width fit your desired width */
}

/* ----------------------------------------------------------------------BUTTONS---------------------------------------------------------------------- */

.actions {
    display: flex;
    justify-content: center;
}

.actions button {
  width: 210px;
  height: 130px;
    background-image: url('./assets/png/Button2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: none;
    border: none;
}

/* ----------------------------------------------------------------------CARDS---------------------------------------------------------------------- */

/* Base styles for .grid-container and .card */
.grid-container {
  display: grid;
  justify-content: center;
  position: relative;
}

.card {
  border-radius: 10px;
  background-color: white;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s ease-in-out;
}

/* Desktop styles */
@media screen and (min-width: 1024px) {
  .grid-container {
    grid-gap: 16px;
    grid-template-columns: repeat(6, 140px);
    grid-template-rows: repeat(2, calc(140px / 2 * 3));
  }

  .card {
    height: calc(140px / 2 * 3);
    width: 140px;
  }
}

/* Mobile styles */
@media screen and (max-width: 1023px) {
  .grid-container {
    grid-gap: 8px;
    grid-template-columns: repeat(3, 120px);
    grid-template-rows: repeat(4, calc(120px / 2 * 3));
  }

  .card {
    height: calc(120px / 2 * 3);
    width: 120px;
  }
}

.front-image {
  width: 103%;
  height: auto;
}

.card.flipped {
  transform: rotateY(180deg);
}

.front, .back {
  backface-visibility: hidden;
  position: absolute;
  border-radius: 10px;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

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

.card .back {
  background-image: url(./assets/png/Back_Card.png);
  background-position: center center;
  background-size: cover;
  backface-visibility: hidden;
}

.card .front {
  transform: rotateY(180deg);
}


.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
  background-color: black;
}

.btn {
  width: 210px;
  height: 130px;
  background-image: url('./assets/png/Button2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: none;
  border: none;
  --bs-btn-color: #000000;
  -webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
}

/* -------Desktop large-----------  */
@media only screen and (min-width: 112.5em) {
  .btn {
    width: 307.75px;
    height: 190.6px;
  }
  }
         
/* -------tablet Landscape-----------  */
@media only screen and (max-width: 75em) {
  .btn {
    width: 246.2px;
    height: 152.5px;
  }
  }
     
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .btn {
    width: 197px;
   height: 122px;
  }
  }
    
 /* -------mobile-----------   */
@media only screen and (max-width: 37.5em) {
  .btn {
    width: 78px;
   height: 48px;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .btn {
    width: 78px;
   height: 48px;
  }
  }

.btn:hover {
  background-image: url('./assets/png/Button2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: none;
  border: none;
  color: #000000;
  -webkit-transform: scale(1.3);
	        transform: scale(1.3);
}

.btn-secondary {
  width: 200px;
  height: 70px;
  background: none;
  background-image: url('./assets/png/SecondaryButton.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: none;
  border: none;
  --bs-btn-color: #000000;
  -webkit-transition: -webkit-transform 0.2s;
	transition: -webkit-transform 0.2s;
	transition: transform 0.2s;
	transition: transform 0.2s, -webkit-transform 0.2s;
  
}

.btn-secondary:hover {
  background-image: url('./assets/png/SecondaryButton.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: none;
  border: none;
  color: #000000;
  -webkit-transform: scale(1.2);
	        transform: scale(1.2);
}

/* -------Desktop large-----------  */
@media only screen and (min-width: 112.5em) {
  .btn-secondary {
    width: 250px;
    height: 87.5px;
  }
  }
         
/* -------tablet Landscape-----------  */
@media only screen and (max-width: 75em) {
  .btn-secondary {
    width: 200px;
    height: 70px;
  }
  }
     
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .btn-secondary {
    width: 200px;
    height: 70px;
  }
  }
    
 /* -------mobile-----------   */
@media only screen and (max-width: 37.5em) {
  .btn-secondary {
    width: 150px;
    height: 52.5px;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .btn-secondary {
    width: 150px;
    height: 52.5px;
  }
  }
  .btn-false {
    width: 200px;
    height: 70px;
    background: none;
    background-image: url('./assets/png/SecondaryButton.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: none;
    border: none;
   cursor: default;
    
  }
  /* -------Desktop large-----------  */
@media only screen and (min-width: 112.5em) {
  .btn-false {
    width: 250px;
    height: 87.5px;
  }
  }
         
/* -------tablet Landscape-----------  */
@media only screen and (max-width: 75em) {
  .btn-false {
    width: 200px;
    height: 70px;
  }
  }
     
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .btn-false {
    width: 200px;
    height: 70px;
  }
  }
    
 /* -------mobile-----------   */
@media only screen and (max-width: 37.5em) {
  .btn-false {
    width: 150px;
    height: 52.5px;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .btn-false {
    width: 150px;
    height: 52.5px;
  }
}
/* ----------------------------------------------------------------------TRANSITIONS---------------------------------------------------------------------- */

.my-hidden{
  opacity: 0;
  transform: translateY(100%);
  transition: all 1s;
}

.my-show{
  opacity: 1;
  transform: translateY(0);
  z-index: 3;
}


.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: none;
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
  background-color: var(--bs-modal-footer-bg);
  border-top: none;
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}


/* ----------------------------------------------------------------------MAP---------------------------------------------------------------------- */
.map-section {
  position: relative;
  background-color: black;
  width: 100vw;
  height: 700vh;
  overflow: hidden;
}

.map_container {
  position: absolute;
}


.map_boarder {
  position: absolute;
  width: 120vw;
  height: auto;
}

.map_start {
  position: absolute;
  width: 100vw;
  height: 50vh;
}

.start_animation {
  position: absolute;
  width: 50vw;
  height: auto;
  top: 10%;
  z-index: -1;
}

.sea_dragon{
  position: absolute;
  width: 50vw;
  height: auto;
  top: 10%;
  z-index: -1;
}

.stigmas{
  position: absolute;
  width: 50vw;
  height: auto;
  top: 10%;
  z-index: -1;
}



.about_section .para{
  margin-bottom: 100px !important;
}
/* BS END OVERWRITE */
.end-115 {
  right: 115%!important;
}
.end-110 {
  right: 110%!important;
}
.end-105 {
  right: 105%!important;
}
.end-95 {
  right: 95%!important;
}
.end-90 {
  right: 90%!important;
}
.end-85 {
  right: 85%!important;
}
.end-80 {
  right: 80%!important;
}
.end-75 {
  right: 75%!important;
}
.end-70 {
  right: 70%!important;
}
.end-65 {
  right: 65%!important;
}
.end-60 {
  right: 60%!important;
}
.end-55 {
  right: 55%!important;
}
.end-50 {
  right: 50%!important;
}
.end-47 {
  right: 47%!important;
}
.end-45 {
  right: 45%!important;
}
.end-42 {
  right: 42%!important;
}
.end-40 {
  right: 40%!important;
}
.end-35 {
  right: 35%!important;
}
.end-30 {
  right: 30%!important;
}
.end-25 {
  right: 25%!important;
}
.end-20 {
  right: 20%!important;
}
.end-15 {
  right: 15%!important;
}
.end-10 {
  right: 10%!important;
}
.end-5 {
  right: 5%!important;
}
.end-n-5 {
  right: -5%!important;
}

/* BS TOP OVERWRITE */
.top-135 {
  top: 135%!important;
}
.top-130 {
  top: 130%!important;
}
.top-125 {
  top: 125%!important;
}
.top-120 {
  top: 120%!important;
}
.top-115 {
  top: 115%!important;
}
.top-110 {
  top: 110%!important;
}
.top-105 {
  top: 105%!important;
}
.top-95 {
  top: 95%!important;
}
.top-85 {
  top: 85%!important;
}
.top-80 {
  top: 80%!important;
}
.top-75 {
  top: 75%!important;
}
.top-70 {
  top: 70%!important;
}
.top-65 {
  top: 65%!important;
}
.top-60 {
  top: 60%!important;
}
.top-55 {
  top: 55%!important;
}
.top-50 {
  top: 50%!important;
}
.top-45 {
  top: 45%!important;
}
.top-40 {
  top: 40%!important;
}
.top-35 {
  top: 35%!important;
}
.top-30 {
  top: 30%!important;
}
.top-25 {
  top: 25%!important;
}
.top-20 {
  top: 20%!important;
}
.top-15 {
  top: 15%!important;
}
.top-10 {
  top: 10%!important;
}
.top-n-10{
  top: -10%!important;
}
.top-n-15{
  top: -15%!important;
}
.top-n-20{
  top: -20%!important;
}
.top-n-25{
  top: -25%!important;
}
.top-n-30{
  top: -30%!important;
}
.top-n-35{
  top: -35%!important;
}

.map-line{
  z-index: 99 !important;
}


/* .video-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:100%;
  width:100%;

  }
.video-responsive iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
} */

.video-responsive {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
}

.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* STEP NINE MODAL */
.resources_grid {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1200px; /* Adjust this as needed */
  margin: 0 auto;
  overflow: hidden;
}

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

/* The following positions are based on the visual you provided. 
You may need to tweak these values to get the exact position and size. */
/* .overlap-row {
  margin-top: -2rem;
  z-index: 1; 
}

.overlap-row-inner {
  margin-top: -6rem;
  z-index: 1; 
}

.overlap-row-inner-last{
  margin-top: -14rem; 
  z-index: 1;
} */

/* Default styles (for small screens) */
.overlap-row {
  margin-top: -2rem;
  z-index: 1;
}

.overlap-row-inner {
  margin-top: -3rem;
  z-index: 1;
}

.overlap-row-inner-last {
  margin-top: -6rem;
  z-index: 1;
  height: 300px;
}

@media screen and (min-width: 300px) {
  .overlap-row {
    margin-top: -2rem;
  }
  .overlap-row-inner-last {
    margin-top: -2rem;
    height: 60px !important;
  }
  .overlap-row-inner {
    margin-top: -1.5rem;
    z-index: 1;
  }
  .nine-p-test{
    padding: 0rem !important;
  }
}

@media screen and (min-width: 600px) {
  .overlap-row {
    margin-top: -2rem;
  }
  .overlap-row-inner-last {
    margin-top: -7rem;
    height: 180px !important;
  }
}

@media screen and (min-width: 900px) {
  .overlap-row {
    margin-top: -2rem;
  }
  .overlap-row-inner {
    margin-top: -6rem;
  }
  .overlap-row-inner-last {
    margin-top: -10rem;
    height: 220px !important;
  }
}

@media screen and (min-width: 1200px) {
  .overlap-row {
    margin-top: -2rem;
  }
  .overlap-row-inner {
    margin-top: -6rem;
  }
  .overlap-row-inner-last {
    margin-top: -14rem;
    height: 320px !important;
  }
}


.flex-grow-row {
  flex-grow: 1;
}

.step-9-modal-img:hover{
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
  border-radius: 10%;
}
/* Continue this pattern for the other divs (R4 to R14) 
by defining their absolute position and size. */


.footer{
  position: relative;
  width: 100vw;
  height: 30vh;
  background-color: black;
}

.collaboration {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);  
}


.credits {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 15%;
  padding-bottom: 2%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.credits:hover {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


.cloud1{
  animation: cloud1 3s ease-in-out 0s infinite alternate none;
}

@keyframes cloud2 {
  0% {
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: translateY(10px);
    }
  
    100% {
      animation-timing-function: ease-in-out;
      opacity: 1;
      transform: translateY(-10px);
    }
}

.cloud2{
  animation: cloud2 3s ease-in-out 0s infinite alternate none;
}

@keyframes cloud1 {
0% {
  animation-timing-function: ease-in-out;
  opacity: 1;
  transform: translateY(-10px);
  }

  100% {
    animation-timing-function: ease-in-out;
    opacity: 1;
    transform: translateY(10px);
  }
}

/* _______________________________________FOOTER_______________________________________ */

.boarder-bottom {
  position: relative;
  width: 100vw;
  height: auto;
}

.footer {
  position: relative;
  width: 100vw;
  height: 30vh;
  background-color: black;
}

.collaboration {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.credits {
  width: 20%;
  height: auto;
}


#journeyStepSeven .video-responsive {
  height: 28em; /* Default height */
}

#journeyStepSeven .video-responsive iframe {
  height: 100%;
  width: 100%;
}

/* Mobile Devices */
@media (max-width: 768px) {
  #journeyStepSeven .video-responsive {
      height: 12em; /* Height on mobile */
  }
}

.modal-5-col{
  max-height: 270px;
}


.modal_center_align {
  text-align: center;
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center;
}


/* _______________________________________MODAL_______________________________________ */

.Start_Animation {
  width: 30%;
}

.modal_text {
  text-align: center;
  padding: 0 20% 0 20%;
  width: 100%;
}

.modal_heading {
  text-align: center;
  width: 100%;
  padding-top: 0;
}

.video_spacing {
  padding-top: 0;
}

.image_spacing {
  padding: 0 20vw 0 20vw;
}

.map-text {
  height: auto; 
  width: 40vw; 
  top: 20vh; 
  padding: 0 10vw 0 5vw;
}

/* -------Desktop large-----------  */
@media only screen and (min-width: 112.5em) {
  .Start_Animation {
    width: 30%;
  }
  .image_spacing {
    padding: 0 15% 0 15%;
  }

  .modal_heading {
    padding-top: 2%;
  }
  }
         
/* -------tablet Landscape-----------  */
@media only screen and (max-width: 75em) {
  .Start_Animation {
    width: 40%;
  }
  }
  
     
/* -------tablet portriat-----------      */
@media only screen and (max-width: 56.25em) {
  .Start_Animation {
    width: 50%;
  }
  .modal_text {
    padding: 0 7% 0 7%;
  }
  .image_spacing {
    padding: 10% 10% 0 10%;
  }

  .map-text {
    top: 20vh; 
    padding: 0;
  }
  }
    
 /* -------mobile-----------   */
@media only screen and (max-width: 37.5em) {
  .Start_Animation {
    width: 80%;
  }
  .modal_text {
    padding: 0 5% 0 5%;
  }
  .video_spacing {
    padding-top: 30%;
  }

  .image_spacing {
    padding: 20% 5% 0 5%;
  }

  .modal_heading {
    padding-top: 5%;
  }

  .map-text {
    top: 4vh; 
    padding: 0;
  }
  }
    
/* -------mobile small-----------  */
@media only screen and (max-width: 18.5em) {
  .Start_Animation {
    width: 90%;
  }
  .modal_text {
    padding: 0 5% 0 5%;
  }
  .video_spacing {
    padding-top: 50%;
  }

  .image_spacing {
    padding: 30% 5% 0 5%;
  }

  .modal_heading {
    padding-top: 7%;
  }

  .map-text {
    top: 4vh; 
    padding: 0;
  }
  }


/* _________________ STIGMA CAROSOUL ________________ */
  
.main-carousel {
  position: absolute;
  bottom: 35%;
  width: 100%;
  height: 70%;
  box-sizing: border-box;
  padding: 5% 0 0 0;
}

.carousel-cell {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* _________________ share ________________ */

#shareModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: black;
  padding: 50px; /* Increase padding for a larger size */
  border-radius: 20px;
  z-index: 1000;
  text-align: center; /* Center-align the content */
}

#shareModal .modal-body {
  text-align: center; /* Center-align the contents within the modal body */
}

#shareModal button {
  display: block;
  margin: 20px auto; /* Increase the margin between buttons and space at top/bottom */
  padding: 2%;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 1024px) {
  .swiper-slide .img-fluid {
      width: 80% !important; /* 20% smaller than the original size */
      height: auto;
  }
}

.quick-class{
  position: relative;
  height: 90vh;
  width: 90vw;
  overflow: hidden;
}

.clouds-quick{
  height: 50vh;
}

.clouds-quick-one{
  position: relative;
  height: 30vh; 
  width: 40vw; 
  z-index: 1;
}

@media screen and (max-width: 768px) {
  .quick-class {
      height: 30vh; /* Adjusted height for mobile screens */
  }
  .clouds-quick{
    height: 30vh;
  }
  .clouds-quick-one {
    height: 10vh; /* Adjusted height for mobile screens */
  }
}