* {
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  font-family: 'Montserrat', sans-serif;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
     }
}

.bg {
    background-image: url("../assets/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

#top {
  /* flex: 2; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 40vh;

  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#bottom {
  /* flex: 1; */
  display: flex;
  flex-direction: column;
  justify-content: center;

  animation: fadeInAnimation ease 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

#bottom-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  overflow-y: auto;
  transition: 0.2;
}

#image-container {
  display: flex;
  flex: 1;
  justify-content: center;
  flex-direction: column;
  height: 30vh;
  min-width: 400px;
  overflow-y: auto;
  padding: 16px;
  transition: 0.2;
}

#image_left {
  overflow: hidden;
  background-image: url("../assets/kids.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  transition: all 350ms ease-out;
}

#image_center {
  overflow: hidden;
  background-image: url("../assets/permies.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  transition: all 350ms ease-out;
}

#image_right {
  overflow: hidden;
  background-image: url("../assets/baloch.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  transition: all 350ms ease-out;
}


#image_left:hover ,#image_right:hover, #image_center:hover {
  -ms-transform: scale(1.02); /* IE 9 */
  -webkit-transform: scale(1.02); /* Safari 3-8 */
  transform: scale(1.02);
  transition: all 350ms ease-in;
}

#s_main_title {
  color: white;
  font-size: calc(20px + (26 - 20) * ((100vw - 500px) / (1600 - 300)));
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.2em;
  padding-top: 2em;
  padding-bottom: 1em;
}

#main_title {
  color: white;
  font-size: calc(70px + (150 - 70) * ((100vw - 300px) / (1600 - 300)));
  text-align: center;
  font-weight: 800;
}

#sub_h {
  font-weight: 400;
  font-size: calc(15 + (30 - 15) * ((100vw - 300px) / (1600 - 300)));
}

#sub_h2 {
  font-weight: 200;
  font-size: calc(8 + (30 - 8) * ((100vw - 300px) / (1600 - 300)));
  padding-top: 3em;
}

p {
  color: white;
  text-align: center;
  font-weight: bold;
}

#button_title {
  font-weight: 600;
  font-size: 1.5rem;
  padding-bottom: 0.2em;
  letter-spacing: 0.2em;
}