@charset "UTF-8";
/* CSS Document */

/* https://codepen.io/DuskoStamenic/pen/ZEvBKdw */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Raleway", sans-serif; /* Apply Raleway to the whole body */
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth; /* optional for nice effect */
  overflow-y: scroll;

}


.parallax-container {
  display: flex;
  min-height: 100vh; /* Ensure each container is at least the viewport height */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-attachment: fixed;
  background-image: url("images/bg_image_jay.jpg");
  background-position: center;
  background-size: cover;
  color: var(--color);
  row-gap: 4rem;
  text-align: center;
}

.buffer {
  width: 100%;
  min-height: 60vh;
  background-color: rgba (0, 0, 0, 0.0);
  display: flex;              /* Enable Flexbox on the container */
  justify-content: center;  /* Center horizontally */
  align-items: center;      /* Center vertically */
  height: 100vh;             /* Make the container the full viewport height (optional, if you want to center on the whole page) */
  scroll-snap-align: start; /* ADD THIS LINE */

}

/* so final section doesn't have snap to section code */
.final-section {
  /* No scroll-snap-align here */
  height: auto;
  padding-bottom: 80px;
}

#fine {
  padding: 120px 40px;
  min-height: 80vh;
}


.parallax-container2 {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 6rem 0;
  background-image: url("images/identities/identities-bg.jpg");
  gap: 1.6em;
  scroll-snap-align: start; /* ADD THIS LINE */
}

/* slider code */

.sliderMain {
    display: flex;
    overflow: hidden;
    width: 100%;
	margin: 0;
}
.slider {
    -webkit-animation: continousSlider 160s linear infinite;
    animation: continousSlider 160s linear infinite;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 0; /* Remove top margin */
    margin-bottom: 0; /* Remove bottom margin */
}

/* Pause the animation on hover */
/*.slider:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}*/

.slider div {
    padding: 250px  5px;
	}


@-webkit-keyframes continousSlider {
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

@keyframes continousSlider {
    to {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}

.slider div img {
    max-width: 300px;
    max-height: 250px;
    display: inline-block;
    object-fit: contain;
	padding: 10px;
	background-color: rgba(0,0,0,0.50);
	border-radius: 10px;
	position: relative;
	z-index: 10;
}

/* end slider code */


.parallax-container3 {
  display: flex;
  background-image: url("images/bg_image_ads.jpg");
  gap: 1.6em;
	  scroll-snap-align: start; /* ADD THIS LINE */


}



/* END OF - here's the additional Parallax scrolling code for the ad section*/

.parallax-container4 {
  flex-direction: row;
  flex-wrap: wrap;

  padding: 6rem 0;
  background-image: url("images/case_studies/bg_case_studies.jpg");
  gap: 1.6em;
	  scroll-snap-align: start; /* ADD THIS LINE */

}

/* This is going to be the footer info... or perhaps a contact form */

.parallax-container5 {
  flex-direction: row;
  flex-wrap: wrap;

  padding: 6rem 0;
  background-image: url("images/footer/footer-bg.jpeg");
  gap: 1.6em;
	  scroll-snap-align: start; /* ADD THIS LINE */

}

#important-text {
  font-size: 15vw; /* The font size will be 50% of the viewport width */
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
padding-bottom: -100px;
}

#subtext  {
  font-size: 3vw; /* The font size will be 50% of the viewport width */
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-top: -60px; /* Adjust the value to move it higher */
}

.important-text2 {
  font-size: 15vw; /* The font size will be 15% of the viewport width */
  font-weight: 700;
  color: rgba(63, 63, 63, 1);
  padding-bottom: -100px;
}

.stacked-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}

.big-text {
  font-size: 13vw;
  font-weight: 700;
  color: rgba(63, 63, 63, 1);
  margin: 0;
}

.sub-text {
  font-size: 3vw;
  font-weight: 400;
  color: rgba(63, 63, 63, 1);
  margin-top: -10px;
}



h1{
	font-size: 3vw;
	font-weight: 400;
	color: rgb(63 63 63);

}

p {
  max-width: 52ch;
  padding: 1em;
  line-height: 1.5;
}

a {
  display: inline-block;
  padding: 1em 3.5em;
  border-radius: 0.3em;
  background-color: var(--color);
  color: white;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
}

h3 {
  margin-top: 1em;
  font-size: 1.6rem;
  font-weight: 700;
}

h4 {
  margin-top: -.5em;
  margin-bottom: -.5em;

  font-size: 1.6rem;
  font-weight: 700;
}

p2 {
  max-width: 52ch;
  padding: 1em;
  line-height: 1.5;
}

/*  footer code.  */

/* snap scrolling */

.parallax-container,
.parallax-container2,
.parallax-container3,
.parallax-container4,
.parallax-container5 {
  scroll-snap-align: start;
}