/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


 /* page4 */
 #page4 {
  min-height: 100vh;
  width: 100%;
  position: relative;
  padding-top:20vw;
}

#page4-content {
  width: 72vw;
  margin-left: 28%;
  position: relative;
  
}

#page4-content h1 {
  font-size: 7.4vw;
  text-transform: uppercase;
  position: relative;

}
#page4-content h1:before{
  content: "03";
  position: absolute;
  font-size: 3.4vw;
  font-family: "silk serif";
  font-weight: 500;
  left: -10%;
  top: 5%;
}
#page4-content .underline {
  height: 0.05vw;
  width: 80%;
  background-color: #e2e2e2;
  margin: 2vw 0;
  position: relative;
}

#page4-content > p {
  font-size: 2.5vw;
  width: 50%;
  margin-bottom: 5.5vw;
  margin-top: 4vw;
  color: #ffffffe2;
}

#page4-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#page4-flex img {
  width: 46.5%;
}
#page4-flex p {
  font-size: 1.3vw;
  width: 32.5%;
  margin-left: 2.5vw;
  top: 0%;
}

#page4-blue-div {
  background-color: #3f7df4;
  width: 42vw;
  padding: 4vw 3vw;
  position: relative;
  margin-top: -26vh;
  margin-left: 24vw;
}

#blue-div-elem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 2vw 0;
  border-bottom: 1px solid #ffffffcb;
  color: #ffffffc6;
}
#blue-div-elem h4 {
  font-size: 2vw;
  color: #ffffffc6;
}
#blue-div-elem p {
  width: 50%;
}

#page4-content .underline {
  height: 0.1vh; /* Increase thickness */
  width: 93%;
  background-color: #e2e2e2;
  margin: 2vw 0; /* Ensure spacing */
  /* position: relative; */
  /* z-index: 10; Ensure it's above other elements */
}

/* MAKING IT RESPONSIVE... */

@media(max-width:600px){
  
/* page4 */
#page4 {
min-height: 100vh;
width: 100%;
position: relative;
margin-left: 2vw;
/* padding-top:10vw; */
}

#page4-content {
width: 100%;
margin-left: 0.1%;
position: relative;

}

#page4-content h1 {
font-size: 9.4vw;
text-transform: uppercase;
position: relative;

}
#page4-content h1:before{
content: "03";
position: absolute;
font-size: 5.4vw;
font-family: "silk serif";
font-weight: 500;
left: 2%;
top: -65%;
}
#page4-content .underline {
height: 0.05vw;
width: 80%;
background-color: #e2e2e2;
margin: 4vw 0;
position: relative;
}

#page4-content > p {
font-size: 5.5vw;
width: 100%;
margin-bottom: 5.5vw;
margin-top: 4vw;
color: #ffffffe2;
}

#page4-flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
overflow-x: hidden;
}

#page4-flex img {
width: 98%;
}
#page4-flex p {
font-size: 3.3vw;
width: 70%;
margin-left: 1vw;
top: 0%;
line-height: 5.3vw;
/* height: 50vh/; */
}

#page4-blue-div {
background-color: #3f7df4;
width: 98%;
padding: 4vw 3vw;
position: relative;
margin-top: 0.01vh;
margin-left: 0.1vw;
height: 100%;
}

#blue-div-elem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
    -ms-flex-align: start;
        align-items: flex-start;
-webkit-box-pack: justify;
    -ms-flex-pack: justify;
        justify-content: space-between;
padding: 8vw 0;
border-bottom: 1px solid #ffffffcb;
color: #ffffffc6;
}
#blue-div-elem h4 {
font-size: 4vw;
color: #ffffffc6;
width: 50%;
}
#blue-div-elem p {
width: 70%;
}

#page4-content .underline {
height: 0.1vh; /* Increase thickness */
width: 100%;
background-color: #e2e2e2;
margin: 5vw 0; /* Ensure spacing */
/* position: relative; */
/* z-index: 10; Ensure it's above other elements */
}
}