/*Hero Image*/
.hero-image {
  background-image: url("/-/media/ec14e35daaf24850a4857ee746e49dc1.ashx");
  background-size: cover;
  position: relative;
  height: 72vh;
}
.hero-title {
  font-size: 8rem;
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 0.8rem;
}

.hero-title-small {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.5rem;
}
.hero-button {
  border-radius: 25px;
  background-color: white;
  border-color: white;
  color: black;
}

/*Creating A World Of Creativity Section and top image-collage*/
.text-container {
  padding: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}
.text-title {
font-size: 3rem;
font-weight: 600;
letter-spacing: 0.1rem;
margin-top: 4rem;
}
.text-subtitle {
  font-size: 1.7rem;
  font-weight: 400;
  margin-bottom: 3rem;
}
.image02A {
  grid-area: image02A;
}
.image02B {
  grid-area: image02B;
}
.image02C {
  grid-area: image02C;
}
.image02D {
  grid-area: image02D;
}
.image02E {
  grid-area: image02E;
}
.image02F {
  grid-area: image02F;
}
.image02G {
  grid-area: image02G;
}
.image02H {
  grid-area: image02H;
}

.grid-container-top {
  display: grid;
  grid-template-areas:
    "image02A image02B image02C image02D"
    "image02E image02F image02G image02H";
  gap: 10px;
  background-color: white;
}

/*We Are All Creative Section and bottom image-collage*/

.image03A {
  grid-area: image03A;
}
.image03B {
  grid-area: image03B;
}
.image03C {
  grid-area: image03C;
}
.image03D {
  grid-area: image03D;
}
.image03E {
  grid-area: image03E;
}
.image03F {
  grid-area: image03F;
}
.image03G {
  grid-area: image03G;
}
.image03H {
  grid-area: image03H;
}
.image03I {
  grid-area: image03I;
}
.image03J {
  grid-area: image03J;
}
.image03K {
  grid-area: image03K;
}
.image03L {
  grid-area: image03L;
}
.image03M {
  grid-area: image03M;
}

.grid-container-bottom {
  display: grid;
  grid-template-areas:
    "image03A image03B image03B image03C"
    "image03D image03E image03E image03C"
    "image03G image03E image03E image03F"
    "image03G image03H image03I image03I"
    "image03J image03J image03K image03L"
    "image03J image03J image03K image03M";
  gap: 10px;
  background-color: white;
}

/*Modals*/
.fade {
  background-color: currentColor;
}
.card, .mb-3 {
border: none !important;
margin-bottom: 0 !important;
}
.card-width {
  max-width: 120rem;
  margin: auto;
}
.outer-pad {
padding: 5rem;
}
.img-fix {
  height: 55rem;
  width: 55rem;
  object-fit: cover;
}
.modal-title-text {
  font-size: 3.2rem;
  font-weight: 700;
}

.modal-sub-text {
  font-size: 2rem;
}
.btn-close {
  width: 4rem;
  height: 4rem;
  padding: .5rem;
  position: absolute;
  align-self: flex-end;
}
@media (max-width: 937px) {
  .img-fix {
    height: 75rem;
    width: 100%;
  }
}
@media (max-width: 767px) {
  .img-fix {
    height: auto;
  }
}
@media (max-width: 400px) {
  .outer-pad {
    padding: 3rem;
    }
}
/*Media Queries*/
@media (max-width: 1399px) {
  .hero-image {
    height: 55vh;
  }
}

@media (max-width: 1199px) {
  .hero-image {
    height: 45vh;
  }
  .hero-title {
    font-size: 6rem;
  }

  .hero-title-small {
    font-size: 2rem;
  }
}

@media (max-width: 991px) {
  .hero-image {
    height: 37vh;
  }
  .hero-title {
    font-size: 4.5rem;
  }

  .hero-title-small {
    font-size: 1.5rem;
  }
  .text-container {
    width: 90%;
  }
  .grid-container-top {
    display: grid;
    grid-template-areas:
      "image02A image02B"
      "image02E image02F"
      "image02C image02D"
      "image02G image02H";
    gap: 10px;
    background-color: white;
  }
  .grid-container-bottom {
    display: grid;
    grid-template-areas:
      "image03A image03D"
      "image03B image03B"
      "image03G image03F"
      "image03G image03C"
      "image03H image03C"
      "image03E image03E"
      "image03E image03E"
      "image03I image03I"
      "image03K image03L"
      "image03K image03M"
      "image03J image03J"
      "image03J image03J";
    gap: 10px;
    background-color: white;
  }
}

@media (max-width: 767px) {
  .proper-width {
    width: 90%;
  }
  .hero-image {
    height: 30vh;
  }
  .hero-title {
    font-size: 4.5rem;
  }

  .hero-title-small {
    font-size: 1.5rem;
  }
}
@media (max-width: 575px) {
  .hero-button {
    margin: auto;
    width: 50%;
  }
}

@media (max-width: 500px) {
  
  .hero-title {
    font-size: 2.8rem;
  }

  .hero-title-small {
    font-size: 1.2rem;
  }
  .text-title {
    font-size: 2.2rem;
    margin-top: 2rem;
    }
    .text-subtitle {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
}

@media (max-width: 470px) {
  .hero-button {
    width: 70%;
  }
}

@media (max-width: 370px) {
  .hero-button {
    width: 80%;
  }
}

@media (min-width: 2200px) {
  .container {
    max-width: 1650px;
  }
  .text-title {
  font-size: 4rem;
  margin-top: 4rem;
  }
  .text-subtitle {
    font-size: 2.2rem;
    margin-bottom: 3rem;
  }
  .hero-title {
    font-size: 10rem;
  }

  .hero-title-small {
    font-size: 4rem;
  }
}