/*---------------------------
Ar page : designed & Front end Dev by : Husien Adel
------------------------------*/

@font-face {
 font-family: 'gess';
 src: url('../fonts/gess.woff') format('woff'),
  url('../fonts/gess.woff2') format('woff2');
}

* {
 padding: 0;
 margin: 0;
 text-decoration: none;
 border: none;
}
:root {
 --headerText: #0d474b;
 --aboutText: #424344;
}

body {
 padding: 0;
 margin: 0;
 font-family: 'gess', Arial, Helvetica, sans-serif;
 max-width: 960px;
 margin: 0 auto;
}

#arHeader {
 padding: 2rem 0;
 background: url('../images/header_bg.png') center no-repeat;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 row-gap: 1rem;
}

.logo {
 display: block;
 width: 257px;
 height: 203px;
 background: url('../images/kfuAr_logo.svg') center no-repeat;
 filter: drop-shadow(0px 6.233px 13.712px rgba(0, 0, 0, 0.1))
  drop-shadow(0px 24.307px 24.307px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 54.846px 33.032px rgba(0, 0, 0, 0.05));
}
#arHeader p {
 font-size: 1.3rem;
 line-height: 1.8;
 font-weight: 400;
 text-shadow: 1px 1px 1px #fff;
 text-align: center;
 color: var(--headerText);
}

#deanAchivements {
 width: 100%;
 height: 200px;
 background: linear-gradient(to right, #eef8f9, #fff);
 border-radius: 30px;
 padding: 2rem 2.5rem 0;
 display: flex;
 column-gap: 2rem;
 position: relative;
 margin: 3rem auto;
}

#deanAchivements p {
 font-size: 1.3rem;
 color: var(--aboutText);
 line-height: 2;
 max-width: 74%;
 color: #0d474b;
}

.illustration {
 width: 337px;
 height: 265px;
 display: block;
 position: absolute;
 top: -90px;
 left: 25px;
 filter: drop-shadow(0px 6.233px 13.712px rgba(26, 159, 189, 0.1))
  drop-shadow(0px 24.307px 24.307px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 54.846px 33.032px rgba(0, 0, 0, 0.05));
}

html[lang='en'] .illustration {
 left: unset;
 right: 25px;
}
html[lang='en'] #deanAchivements {
  padding-bottom: 2rem;
}

html[lang='en'] #deanAchivements p {
 max-width: 70%;
 font-size: 1.25rem;
}

.illustration::before {
 content: '';
 display: block;
 width: 150px;
 height: 150px;
 border-radius: 50%;
 background-image: linear-gradient(
  180deg,
  rgba(44, 176, 168, 0.4) 0%,
  rgba(254, 135, 24, 0.4) 51%,
  rgba(229, 43, 43, 0.4) 100%
 );
 filter: blur(2px);
 position: absolute;
 top: 15px;
 left: 60px;
 border: 1px solid #000;
 z-index: -10;
 display: none;
}

#benefits {
 display: flex;
 margin: 4rem auto 1rem;
 line-height: 1.8;
 column-gap: 1.5rem;
 align-items: center;
 justify-content: center;
}
#benefits aside {
 align-self: center;
 align-self: center;
 justify-self: center;
 padding-top: 3rem;
 position: relative;
}
#benefits aside img {
 filter: drop-shadow(0px 6.233px 13.712px rgba(0, 0, 0, 0.1))
  drop-shadow(0px 24.307px 24.307px rgba(0, 0, 0, 0.09))
  drop-shadow(0px 54.846px 33.032px rgba(0, 0, 0, 0.05));
}

#benefits aside::before {
 content: '';
 display: block;
 width: 200px;
 height: 150px;
 background-image: linear-gradient(
  180deg,
  rgba(44, 176, 167, 0.764) 0%,
  rgba(249, 159, 75, 0.582) 31%,
  rgba(30, 137, 224, 0.4) 61%,
  rgba(237, 177, 14, 0.696) 100%
 );
 position: absolute;
 top: 30px;
 left: 0;
 border-radius: 50px;
 filter: blur(35px);
}

#benefits p {
 font-size: 1.3rem;
 line-height: 1.8;
}

#app {
 background: url('../images/appBg.png') right no-repeat,
  url('../images/app_bgEffects.png') -35px 0 no-repeat,
  url('../images/app_bgEffects.png') -35px 0 no-repeat,
  url('../images/app_bgEffects.png') 100% 100% no-repeat;

 padding: 3rem 2rem;
 display: flex;
 column-gap: 1rem;
 align-items: center;
 justify-content: space-between;
}

.qrcodes {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 row-gap: 2rem;
}

.qrcode_item {
 display: flex;
 flex-direction: column;
 align-content: center;
 justify-content: center;
}
.qrcode_item a {
 display: block;
}

.gallery ul {
 display: grid;
 padding: 0;
 margin: 0;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(2, 1fr);
 gap: 2rem;
}

.gallery ul li {
 list-style: none;
 filter: drop-shadow(0px 6.233px 13.712px rgba(66, 124, 145, 0.1));
 cursor: pointer;
 transition: all 0.3s;
}

.gallery ul li:hover {
 filter: grayscale(50%);
 filter: drop-shadow(0px 6.233px 13.712px rgba(66, 124, 145, 0.309));

 transform: scale(1.03) skew(-1deg, -1deg);
}
.appScreen {
 display: block;
 position: relative;
}
.appScreen img {
 object-fit: fill;

 animation: App 1s infinite ease-in-out alternate;
}
.appScreen span.icon {
 display: block;
 width: 129px;
 height: 156px;
 background: url('../images/appIcon.png');
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 right: -60px;
 animation: iconAn 3s infinite ease-out alternate;
}

@keyframes iconAn {
 from {
  transform: scale(0.9) translateY(-50%);
 }
 to {
  transform: scale(1.01) translateY(-50%);
 }
}

@keyframes App {
 from {
  transform: translate(0, 0);
 }
 to {
  transform: translate(4px, 4px);
 }
}

@media screen and (max-width: 768px) {
 html {
  font-size: 14px;
 }
 #arHeader {
  padding: 2rem;
 }

 #deanAchivements {
  width: auto;
  display: flex;
  height: auto;
  flex-direction: column-reverse;
  align-items: center;
  top: unset;
  right: unset;
  left: unset;
  justify-content: center;
  padding-bottom: 2rem;
 }
 .illustration {
  margin: 0 auto;
  position: relative;
 }

 #deanAchivements p {
  max-width: 90%;
 }

 #benefits {
  flex-direction: column;
 }
 #benefits aside {
  padding-bottom: 3rem;
  padding-top: 1rem;
 }
 #benefits p {
  max-width: 90%;
 }

 #app {
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  row-gap: 1.5rem;
 }

 .qrcodes {
  flex-direction: row;
  justify-content: space-between;
  column-gap: 2rem;
 }
 .gallery {
  width: 94%;
 }
 .gallery ul {
  max-width: 94%;
  margin: 0 auto;
  gap: 0.5rem;

  grid-template-columns: repeat(1, 1fr);
 }
 .gallery ul li a img {
  width: 90%;
  max-width: 300px;
  display: block;
  margin: 0 auto;
 }
 span.note {
  text-align: center;
  display: block;
  margin: 0 auto;
 }

 
html[lang='en'] .illustration {
 left: unset;
 right: unset;
 margin: 0 auto;
}
}