.unSdgPage {
    margin: auto;
    max-width: 50vw;
    padding: 4rem;
}

.sdgLayout {
    display: grid;
    gap: 1rem .5rem;
    grid-template-columns: auto auto auto auto auto
}

.sdgSpacer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    width: 8.25rem
}

.flip-card {
    background-color: transparent;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

.flip-card-inner {
    position: "relative";
    text-align: center;
    -webkit-transition: -webkit-transform .8s;
    transition: -webkit-transform .8s;
    -o-transition: transform .8s;
    transition: transform .8s;
    transition: transform .8s, -webkit-transform .8s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d
}

.flip-card-animate {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

.flip-card-front,
.flip-card-back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.flip-card-front .sdgImg {
    max-width: 8.25rem
}

.flip-card-back {
    position: absolute;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    top: 0;
    background-color: #0c4160;
    color: #fff;
    width: 100%;
    height: 100%
}

.flip-card-back .chapter {
    margin-top: 2.5rem;
    font-size: 1.25rem
}

.flip-card-back .seeMoreChapter {
    position: absolute;
    bottom: .25rem;
    right: .5rem;
    font-size: .825rem;
    text-align: right;
    color: #f0f0f0;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

.flip-card-back .seeMoreChapter:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    cursor: pointer
}

.flip-card-inner .tooltip {
    background-color: red
}

.tooltip-inner {
    -webkit-box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px;
    border: .45rem;
    min-width: 20rem;
    font-size: 1rem;
    color: #000;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.tooltip-inner .english {
    text-align: justify
}

.esgCardImg {
    max-width: 10rem;
    border-radius: .25rem
}

.esgCardImg:hover {
    -webkit-box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px
}

.esgTooltip {
    max-height: 45rem;
    max-width: 45rem;
    background-color: #fff
}

.service-img {
    max-height: 15rem;
    max-width: 15rem
}

.team-designation {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.team-designation .fixedWidth {
    max-width: 10rem
}

.modal-title {
    font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
}

.modal-header,
.modal-content,
.modal-footer {
    background-color: rgba(255, 255, 255, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 3px
}

#sdgGoal {
    font-weight: 500
}

.goalCardContainer {
    display: grid;
    grid-template-columns: auto auto
}

.goalCard {
    padding: 1rem;
    color: #f0f0f0;
    font-size: 1.25rem;
    background-color: #0c4160;
    margin: .35rem;
    -webkit-transition: all ease-out .3s;
    -o-transition: all ease-out .3s;
    transition: all ease-out .3s
}

.goalCard:hover {
    -webkit-box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    background-color: #083149
}

.esgToolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 3vw;
    padding: 1rem 0;
    margin-top: 3.35rem
}

.esgToolbar .tickerSelector {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: .75rem;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.esgToolbar .tickerSelector .picker {
    margin-top: .25rem
}

.quadrantLayout {
    /* height: calc(100vh - 100px); */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 2rem;
    margin-top: 1rem;
    position: fixed;
    bottom: 0;
    top: 8rem;
    right: 0;
    left: 0;
    overflow-y: scroll
}

.quadrant {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px;
    box-shadow: rgba(100, 100, 111, .2) 0px 7px 29px 0px
}

.quadrant .iasImage {
    width: 60%
}

.contact-us-popup {
    bottom: 0;
    position: fixed;
    margin: 1em;
    right: 0;
    z-index: 9;
}

.float-contact-button {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 999;
    /* background-color:#000; */
    width:60px;
	height:60px;
    text-align: center;
    line-height: 1.75rem;
    font-size: .875rem;
    color: #fff;
    border-radius:50px;
    cursor: pointer;
    -webkit-transition: all .1s ease-out;
    transition: all .1s ease-out;
}

.float-contact-button i {
    font-size: 2em;
    line-height: 55px;
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

/* .float-contact-button:not(:last-child) {
    width: 0;
    height: 0;
    margin: 20px auto 0;
    opacity: 0;
    visibility: hidden;
    line-height: 40px;
} */

.float-contact-button:not(:last-child) > i {
    font-size: 1.4em;
    line-height: 40px;
    }

.float-contact-button:not(:last-child).is-visible {
    width:60px;
	height:60px;
    /* margin: 15px auto 10; */
    opacity: 1;
    visibility: visible;
}

.float-contact-button:nth-last-child(1) {
    -webkit-transition-delay: 25ms;
    transition-delay: 25ms;
}

.float-contact-button:not(:last-child):nth-last-child(2) {
    -webkit-transition-delay: 20ms;
    transition-delay: 20ms;
}

.float-contact-button:not(:last-child):nth-last-child(3) {
    -webkit-transition-delay: 40ms;
    transition-delay: 40ms;
}

.float-contact-button:not(:last-child):nth-last-child(4) {
    -webkit-transition-delay: 60ms;
    transition-delay: 60ms;
}

.float-contact-button:not(:last-child):nth-last-child(5) {
    -webkit-transition-delay: 80ms;
    transition-delay: 80ms;
}

/* .float-contact-button(:last-child):active, .float-contact-button(:last-child):focus, .float-contact-button(:last-child):hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
} */

.float-contact-button:hover {
    filter: brightness(95%);
    color: #fff;
}

.float-contact-form {
    width: 400px;
    max-width: 100%;
    bottom: 6.5rem;
    right: 1.5rem;
    position: fixed;
    border-radius: 20px;
    background-color: rgba(7, 7, 7, 0.287);
    backdrop-filter: blur(5px);
    -webkit-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.float-contact-form .is-visible {
    /* opacity: 1; */
    display: block;
    -webkit-animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
    animation: zoomIn .2s cubic-bezier(.42, 0, .58, 1);
}

.is-hide{
    /* opacity: 0 */
    display: none;
}

.float-contact-form .header {
    text-transform: capitalize;
}

.float-contact-button .my-float{
	margin-top:22px;
}


.is-active {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.is-float {
    box-shadow: 0 0 6px rgba(0, 0, 0, .16), 0 6px 12px rgba(0, 0, 0, .32);
}

.is-loading {
    display: block;
    -webkit-animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
    animation: load 1s cubic-bezier(0, .99, 1, 0.6) infinite;
}

/*Animation*/

@-webkit-keyframes zoomIn {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.0;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @keyframes zoomIn {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.0;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
  }
  
  @-webkit-keyframes load {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.0;
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }
  
  @keyframes load {
    0% {
      -webkit-transform: scale(0);
      transform: scale(0);
      opacity: 0.0;
    }
    50% {
      -webkit-transform: scale(1.5);
      transform: scale(1.5);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      opacity: 0;
    }
  }