/* ===============================
   STORY HEADING
================================ */

.stroy-head-sec {
  padding: 80px 0;
}

.stroy-head-sec h2 {
  color: #314F6B;
  text-align: center;
  margin-bottom: 25px;
}

.stroy-head-sec p {
  font-family: "Exo 2", sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #000;
  text-align: center;
}


/* ===============================
   MAIN SCROLL SECTION
================================ */

.scroll-sec {
  position: relative;
  overflow: hidden;
}

.scroll-sec h2 {
  font-family: "eras-book", sans-serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: capitalize;
  text-shadow: 0 4px 0 rgba(0,0,0,.3);
}

.scroll-sec p {
  color: #000;
  line-height: 1.7;
}


/* ===============================
   STORY SECTION
================================ */

.story-sec {
  position: relative;
  padding: 120px 0 80px;
}


/* ===============================
   IMAGE AREA
================================ */

.story-sec .head-img {
  position: relative;
  overflow: hidden;
}

.story-sec .head-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0),
    rgba(0,0,0,.6)
  );
  z-index: 1;
}

.story-sec .head-img img {
  width: 100%;
  display: block;
}


/* ===============================
   CONTENT WRAPPER
================================ */

.story-sec .content-div {
  position: relative;
  margin-top: -280px;
  z-index: 5;
}

.story-sec .inside-container {
  max-width: 70%;
  margin: auto;
  padding: 0 80px;
}


/* ===============================
   TITLE
================================ */

.story-sec h2 {
  color: #fff;
  padding-bottom: 50px;
}


/* ===============================
   CONTENT BOX
================================ */

.story-sec .content-wrap {
  background: #fff;
  padding: 50px;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 20px 40px rgba(0,0,0,.15);
}


/* ===============================
   LAYOUT VARIATIONS
================================ */

/* Left (default) */
.story-sec.left .content-div {
  text-align: left;
}

/* Right */
.story-sec.right .content-div {
  text-align: right;
}

.story-sec.right .content-wrap {
  margin-left: auto;
}

/* Center */
.story-sec.center .content-div {
  text-align: center;
}

.story-sec.center .content-wrap {
  margin: auto;
}


/* ===============================
   SPECIAL LAST SECTION
================================ */

.story-sec:last-child .content-wrap {
  display: flex;
  gap: 40px;
}

.story-sec:last-child .left {
  width: 60%;
}

.story-sec:last-child .right {
  width: 40%;
}

.story-sec:last-child .right p {
  font-size: 26px;
  font-weight: 700;
}


/* ===============================
   RESPONSIVE
================================ */

@media(max-width:1400px){

  .scroll-sec h2{
    font-size:60px;
  }

  .story-sec .inside-container{
    max-width:80%;
    padding:0 50px;
  }

  .story-sec .content-div{
    margin-top:-240px;
  }
}


@media(max-width:1024px){

  .scroll-sec h2{
    font-size:50px;
  }

  .story-sec{
    padding:90px 0 60px;
  }

  .story-sec .inside-container{
    max-width:90%;
    padding:0 30px;
  }

  .story-sec .content-div{
    margin-top:-200px;
  }

  .story-sec .content-wrap{
    padding:35px;
  }
}


@media(max-width:767px){

  .stroy-head-sec{
    padding:50px 0;
  }

  .stroy-head-sec p{
    font-size:18px;
  }

  .scroll-sec h2{
    font-size:34px;
    text-shadow:0 2px 0 rgba(0,0,0,.3);
  }

  .story-sec{
    padding:60px 0 40px;
  }

  .story-sec .inside-container{
    max-width:95%;
    padding:0 15px;
  }

  .story-sec .content-div{
    margin-top:-120px;
  }

  .story-sec .content-wrap{
    padding:25px;
  }

  /* Last section mobile */
  .story-sec:last-child .content-wrap{
    flex-direction:column;
  }

  .story-sec:last-child .left,
  .story-sec:last-child .right{
    width:100%;
  }

  .story-sec:last-child .right p{
    font-size:18px;
    margin-top:15px;
  }

}