@font-face {
  font-family: ml;
  src: url(./ManifaV2-Light.ttf);
}
@font-face {
  font-family: mr;
  src: url(./ManifaV2-Regular.ttf);
}
@font-face {
  font-family: mt;
  src: url(./ManifaV2-Thin.ttf);
}
@font-face {
  font-family: ManifaPro2-2-2-223-SemiBold;
  src: url(./ManifaPro2_2.223-SemiBold.otf);
}
@font-face{font-family:sa-icons;src:url(../fonts/sa-icons-webfont.eot?#iefix) format("embedded-opentype"), url(../fonts/sa-icons-webfont.woff?e0a6e0ecbca356e177e9069da5d3141e) format("woff"), url(../fonts/sa-icons-webfont.ttf?e0a6e0ecbca356e177e9069da5d3141e) format("truetype"), url(../fonts/sa-icons-webfont.svg?e0a6e0ecbca356e177e9069da5d3141e#sa-webfont) format("svg");font-weight:400;font-style:normal;font-display:swap} 
@font-face{font-family:Ghawar-Light;src:url(../fonts/ghawar-light.woff2) format("woff2"),url(../fonts/ghawar-light.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}  
@font-face{font-family:Ghawar-LightItalic;src:url(../fonts/ghawar-lightitalic.woff2) format("woff2"),url(../fonts/ghawar-lightitalic.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ghawar-Regular;src:url(../fonts/ghawar-regular.woff2) format("woff2"),url(../fonts/ghawar-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Ghawar-SmeiBold;src:url(../fonts/ghawar-semibold.woff2) format("woff2"),url(../fonts/ghawar-semibold.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Haradh-Regular;src:url(../fonts/haradh-regular.woff2) format("woff2"),url(../fonts/haradh-regular.woff) format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ManifaPro2-Bold;src:url(../fonts/ManifaPro2_453-Bold.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ManifaPro2-Light;src:url(../fonts/ManifaPro2_453-Light.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ManifaPro2-LightItalic;src:url(../fonts/ManifaPro2_453-LightItalic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:ManifaPro2-Regular;src:url(../fonts/ManifaPro2_453-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}  
@font-face{font-family:ManifaPro2-SemiBold;src:url(../fonts/ManifaPro2_453-SemiBold.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}


body, html {
  font-size: 1rem;
  font-family: ManifaPro2-Regular,Frutiger,Muna,Helvetica,Arial,sans-serif;
  line-height: 1.4;
}

.aramco-logo{position: fixed; right:6rem; top: 6rem;}

.question-area{
  height:25vh;
}

.question{ 
  padding: 13rem 0 0 8rem;
  font-size: 6rem;
  color: #5f646a;
  /* height: 30vh; */
  width: 100vw;
}

.quest-option{
  font-size: 5rem;
}

.answer-area{
    /* height: 270px; */
    font-size: 2rem;
    width: 80vw;
    margin: 0 auto;
}

.feedback-button-area {
  font-size: 2rem;
  /* width: 50vw; */
  margin: 0 auto;
}

.example{ min-height:12rem;}
.circle{width: 8rem;
    height: 8rem;
    border-radius: 48rem 45rem 0 45rem;
    display: block;
    margin-bottom: 1rem;position: relative;}
    .text{ padding-left: 1rem ;color:#5f646a;}
.alert{position: fixed;
    right: 2rem;
    left: 2rem;
    bottom: 3rem; }

@keyframes morphing {
  0% {
    background: #26acab;

  }
  40% {
    background:#00a9e2

  }
  60% {
    background:#82be42

  }
  100% {
   background: #26acab;
  }
}
.active .circle:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .5);
  opacity: 0;
  border-radius: 48rem 45rem 0 45rem;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
  animation: ripple 1s ease-out infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}
.footer {
    width: 100vw;
    background: linear-gradient(90deg, #82be42, #00a9e2, #82be42, #00a9e2);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    height: 25px;
    margin: 0;
    position: fixed;
    bottom: 0;
    z-index: 1000;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}