@import url("https://use.typekit.net/xjp7rtu.css");
/*
Let's get the font minimum and preferred font-sizes and screen widths in pixels
We know that we want the font size at the root level to be 10px for the design screen size of 430px.
We will use rem units in the individual elements to scale this size.
By trial and error, we find that for the minimum supported screen size (320px) to be 7.6px
*/
/*
Consider a graph with screen size as the x axis, and the font size as the y axis.
We can plot a line with the two points (min-screen-width, min-font-size), (preferred-screen-width, preferred-font-size)
Note that formula for a line is:
y = mx + b
where
m is the slope of the line
    m = (y2 - y1)/(x2 - x1)
b is the y intercept
    y - y1 = m(x - x1)
    at the y intercept, x = 0, y = b
    b - y1 = m(0 - x1)
    b = -m(x1) + y1
Calculate those values
*/
:root {
  /*
  First, we clamp the font size by making sure it never goes below the minimum (47.5% of 16px)
  and above the maximum (72.5% of 16px)
  Next, we calculate the font size - note that we have calculated the slope and intercept of the graph above
  As specified, the graph takes the screen width on the x axis, and font size for the y axis. Solving for y
  y = mx + b
  = (slope * screen width) + intercept
  = (slope * 100vw) + intercept
  Finally, plugging in this final equation into the clamp preferred option
  */
  font-size: clamp(47.5%, 2.1818181818vw + 0.6181818182px, 72.5%);
}

body {
  background: black;
}

body::-webkit-scrollbar {
  width: 0px;
  background-color: transparent;
}

@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"), url("https://use.typekit.net/af/2cd6bf/00000000000000000001008f/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "futura";
  src: url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"), url("https://use.typekit.net/af/053fc9/00000000000000003b9af1e4/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Regular.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Medium.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}
@font-face {
  font-family: "Open Sans";
  src: url("../../common/fonts/Open_Sans/static/OpenSans-Bold.ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}
header,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "futura", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}

.case-study:nth-child(odd) .circle:nth-child(1) {
  top: 0;
  left: 0;
  background-color: #E8E8E8;
}
.case-study:nth-child(odd) .circle:nth-child(2) {
  bottom: 0;
  right: -11.626vw;
  background-color: #F2F2F2;
}
.case-study:nth-child(odd) .circle:nth-child(3) {
  bottom: 4.8441666667vw;
  left: -12.9177777778vw;
  background-color: rgba(160, 109, 150, 0.2431372549);
}
.case-study:nth-child(odd) .circle:nth-child(4) {
  display: none;
}
.case-study:nth-child(odd) .circle:nth-child(5) {
  bottom: -1.6147222222vw;
  left: 0;
  background-color: rgba(110, 167, 53, 0.2431372549);
}
@media screen and (min-width: 1024px) {
  .case-study:nth-child(odd) .circle:nth-child(2) {
    bottom: 0;
    right: -4vw;
  }
  .case-study:nth-child(odd) .circle:nth-child(3) {
    bottom: 1.6666666667vw;
    left: -4.4444444444vw;
  }
  .case-study:nth-child(odd) .circle:nth-child(5) {
    bottom: -0.5555555556vw;
    left: 0;
  }
}

.case-study:nth-child(even) .circle:nth-child(1) {
  top: 0;
  left: 0;
  background-color: #E8E8E8;
}
.case-study:nth-child(even) .circle:nth-child(2) {
  bottom: 3.2294444444vw;
  left: -11.626vw;
  background-color: #F2F2F2;
}
.case-study:nth-child(even) .circle:nth-child(3) {
  top: -1.6147222222vw;
  right: -6.4588888889vw;
  background-color: rgba(113, 160, 109, 0.2431372549);
}
.case-study:nth-child(even) .circle:nth-child(4) {
  bottom: 3.2294444444vw;
  right: -10.899375vw;
  background-color: #F2F2F2;
}
.case-study:nth-child(even) .circle:nth-child(5) {
  bottom: 38.7533333333vw;
  right: -11.3030555556vw;
  background-color: rgba(128, 141, 115, 0.2431372549);
}
@media screen and (min-width: 1024px) {
  .case-study:nth-child(even) .circle:nth-child(2) {
    bottom: 1.1111111111vw;
    left: -4vw;
  }
  .case-study:nth-child(even) .circle:nth-child(3) {
    top: -0.5555555556vw;
    right: -2.2222222222vw;
  }
  .case-study:nth-child(even) .circle:nth-child(4) {
    bottom: 1.1111111111vw;
    right: -3.75vw;
  }
  .case-study:nth-child(even) .circle:nth-child(5) {
    bottom: 13.3333333333vw;
    right: -3.8888888889vw;
  }
}

.case-study .images-container {
  position: relative;
  width: 58.13vw;
  height: 58.13vw;
  margin: 0 auto 5.7rem;
}
.case-study .images-container .circle {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.case-study .images-container .circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-study .images-container .circle:nth-child(1) {
  position: absolute;
  width: 58.13vw;
  height: 58.13vw;
  border-radius: 50%;
  z-index: 1;
}
.case-study .images-container .circle:nth-child(2) {
  position: absolute;
  width: 29.065vw;
  height: 29.065vw;
  border-radius: 50%;
  z-index: 2;
}
.case-study .images-container .circle:nth-child(3) {
  position: absolute;
  width: 19.3766666667vw;
  height: 19.3766666667vw;
  border-radius: 50%;
  z-index: 0;
}
.case-study .images-container .circle:nth-child(4) {
  position: absolute;
  width: 14.5325vw;
  height: 14.5325vw;
  border-radius: 50%;
  z-index: 0;
}
.case-study .images-container .circle:nth-child(5) {
  position: absolute;
  width: 6.4588888889vw;
  height: 6.4588888889vw;
  border-radius: 50%;
  z-index: 0;
}
@media screen and (min-width: 1024px) {
  .case-study .images-container {
    width: 20vw;
    height: 20vw;
  }
  .case-study .images-container .circle:nth-child(1) {
    position: absolute;
    width: 20vw;
    height: 20vw;
    border-radius: 50%;
    z-index: 1;
  }
  .case-study .images-container .circle:nth-child(2) {
    position: absolute;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    z-index: 2;
  }
  .case-study .images-container .circle:nth-child(3) {
    position: absolute;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-radius: 50%;
    z-index: 0;
  }
  .case-study .images-container .circle:nth-child(4) {
    position: absolute;
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    z-index: 0;
  }
  .case-study .images-container .circle:nth-child(5) {
    position: absolute;
    width: 2.2222222222vw;
    height: 2.2222222222vw;
    border-radius: 50%;
    z-index: 0;
  }
}
@media screen and (min-width: 1023px) {
  .case-study .text-container {
    width: 30vw;
    margin: 0 10vw 0;
  }
  .case-study .text-container .title {
    text-align: left;
  }
}
.case-study .text-container .title {
  font-family: "futura";
  text-align: center;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 4.5rem;
  color: #3C3C3C;
  margin-bottom: 5rem;
}
.case-study .text-container .description {
  text-align: center;
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.0045rem;
  color: #3C3C3C;
  margin-bottom: 5rem;
}
.case-study .text-container .know-more-button {
  display: block;
  width: fit-content;
  height: 4.5rem;
  line-height: 4.5rem;
  padding: 0 2.4rem;
  margin: 1.9rem auto 11.4rem;
  color: white;
  text-align: center;
  font-family: "futura";
  font-size: 1.8rem;
  font-weight: 500;
  background-color: #00B7A2;
  border-radius: 2.25rem;
  border: none;
  outline: none;
  cursor: pointer;
}

body {
  background-color: #F5F5F5;
}

.nav-header {
  display: none;
}

.page {
  position: relative;
  margin: 0;
}

.case_study_upfold {
  background-color: #1a1a1a;
  padding-bottom: 8rem;
}

.page-back-button {
  position: absolute;
  top: 2rem;
  left: 2rem;
  width: 5rem;
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: rgba(60, 60, 60, 0.7);
  border: none;
}
.page-back-button svg {
  display: block;
  width: 2rem;
  height: 2rem;
}

h5.page-heading {
  color: #21BBD0;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  margin: 3rem auto;
  margin: 0;
  padding: 4rem 0 0 0;
}
@media screen and (min-width: 1024px) {
  h5.page-heading {
    padding: 5rem 0 0 0;
  }
}

h2.page-section-heading {
  color: #3C3C3C;
  font-size: 3.3rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: center;
  margin: 6.5rem auto 3.5rem;
  color: #F5F5F5;
}

h3.page-section-sub-heading {
  color: #3C3C3C;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 4.5rem;
  text-align: left;
  margin: 4rem auto;
}

p.page-section-text {
  font-size: 1.8rem;
  line-height: 4rem;
  letter-spacing: 0.045rem;
  color: #3C3C3C;
  font-weight: 400;
  text-align: center;
  color: #999;
  margin: 0 2rem;
}
@media screen and (min-width: 1024px) {
  p.page-section-text {
    width: 50vw;
    margin: 0 0 0 25vw;
  }
}

.case-study {
  display: flex;
  flex-direction: column;
  margin: 10vh 0 0 0;
}
@media screen and (min-width: 1023px) {
  .case-study {
    flex-direction: row;
    margin: 15vh 0 0 0;
  }
  .case-study:last-child {
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1023px) {
  .case-study:nth-child(even) .images-container {
    order: 2;
  }
  .case-study:nth-child(even) .text-containter {
    margin-right: 10vw;
    order: 1;
  }
}

/*# sourceMappingURL=style.css.map */