/* =========================
   Custom Local Fonts (match your real file names)
   ========================= */

/* GE SS Two (Arabic) */
@font-face {
  font-family: "GE SS Two";
  src: url("./ArbFONTS-59GE-SS-Two.WOFF2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GE SS Two";
  src: url("./alfont_com_AlFont_com_GE_SS_Two_Medium.WOFF2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GE SS Two";
  src: url("./GE_SS_Two_Bold.WOFF2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Century Gothic (English) */
@font-face {
  font-family: "Century Gothic";
  src: url("./centurygothic.WOFF2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Century Gothic";
  src: url("./centurygothic_bold.WOFF2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;
}



body{
  font-family: "Century Gothic", Arial, sans-serif;
  font-weight: 400;
  background: linear-gradient(90deg, #5B9794 0%, #2D687D 100%);
  min-height: 100svh;   /* أهم سطر للجوال */
  padding: 0;
  overflow-x: hidden;
  display: grid;
  place-items: center;  /* يوسّط التصميم في الشاشات الكبيرة */
  
}




/* ================================================

   SCREEN MANAGEMENT

   ================================================ */

.screen{
  display:none;
  width:100%;
  max-width:420px;
}



.screen.active {

  display: block;

  animation: fadeIn 0.3s ease;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



/* ================================================

   PHONE CONTAINER

   ================================================ */


.phone{
  width: 390px;
  height: 844px;
  transform-origin: center;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 700px) {

  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .stage {
    width: 100%;
  
    position: relative;
  }

  .phone {
    width: 100%;
    max-width: 420px; /* مناسب للجوال والآيباد */
    margin: 0 auto;
    position: relative;
  }
  
}



/* ================================================

   BACKGROUND GLOWS

   ================================================ */

.glow1 {

  left: 0;
  
  transform: translateX(-80px);

  position: absolute;

  width: 350px;

  height: 245px;



  top: 25%;

  border-radius: 9999px;

  background: linear-gradient(180deg, #ffffff 0%, #79E6DB 27%, #FBE885 75%, #A6DC8C 100%);

  filter: blur(120px);

  opacity: 0.7;

  pointer-events: none;

  z-index: 0;

}



.glow2 {

  position: absolute;

  left: 0;

  transform: translateX(-80px);

  width: 500px;

  height: 400px;

  right: -150px;

  bottom: -120px;

  border-radius: 9999px;

  background: linear-gradient(180deg, #59A6C5 0%, #79E6DB 27%, #FBE885 75%, #A6DC8C 100%);

  filter: blur(150px);

  opacity: 0.6;

  pointer-events: none;

  z-index: 0;

}



.top-line {

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 1px;

  background: rgba(255, 255, 255, 0.15);

  z-index: 1;

}





/* ================================================

   LOGO AND HASHTAG

   ================================================ */

   

/* Logo beside language button */

.lang-logo{

  position: absolute;
  right: 30px;
  top: 130px;
  width: 180px;
  height: auto;
  object-fit: contain;
  z-index: 10;

}

.hashtag {

  position: absolute;

  left: 0;
  right: 0;
  width: 100%;

  text-align: center;

  background: linear-gradient(90deg, #C6FDF6 50%, #0D98CE 100% );

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  -webkit-text-fill-color: transparent;

  font-size: 40px;

  line-height: 3;

  letter-spacing: 0cm;

  font-family: "GE SS Two", sans-serif; font-weight: 300;

}



/* السطر العلوي: لاصق يسار */
.hashtag.h1{
  top: 8px;
  left: 0;
  right: 0;
  text-align: left;
  padding-left: 1px; /* قللي/زيدي حسب رغبتك */
}

/* السطر السفلي: أقرب لليمين */
.hashtag.h2{
  top: 50px;
  left: 0;
  right: 0;
  text-align: right;
  padding-right: 10px;
}



/* ================================================

   BUTTONS

   ================================================ */

   /*language button*/

  .pill--lang-ar {

    position: absolute;

    left: 30px;

    top: 150px;

    width: 42px;

    height: 42px;

    background: linear-gradient(90deg, #c9f6f1 10.1%, #fff 75.96%);

    border: none;

    border-radius: 50%;

    color: #205E7B;

    font-size: 13px;

    cursor: pointer;

    box-shadow: 0px 4px 28px 7px rgba(0, 0, 0, 0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    transition: all 0.2s ease;

    font-family: "GE SS Two", sans-serif;font-weight: 700;

  }

 

  .pill--lang-en {

    position: absolute;

    left: 30px;

    top: 150px;

    width: 42px;

    height: 42px;

    background: linear-gradient(90deg, #c9f6f1 10.1%, #fff 75.96%);

    border: none;

    border-radius: 50%;

    color: #205E7B;

    font-size: 13px;

    cursor: pointer;

    box-shadow: 0px 4px 28px 7px rgba(0, 0, 0, 0.25);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 10;

    transition: all 0.2s ease;

    font-family: "Century Gothic", Arial, sans-serif; font-weight: 700;

  }



.pill--lang-ar:hover {

  transform: scale(1.05);

}



.pill--lang-en:hover {

  transform: scale(1.05);

}



.nextPill {

  position: absolute;

  right: 40px;

  bottom: 200px;

  width: 63px;

  height: 42px;

  background: linear-gradient(90deg, #c9f6f1 10.1%, #fff 75.96%);

  border: none;

  border-radius: 78px;

  color: #4A8A93;

  font-size: 20px;

  font-weight: 600;

  cursor: pointer;

  box-shadow: 0px 4px 28px 7px rgba(0, 0, 0, 0.25);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

  transition: all 0.2s ease;

}



.nextPill:hover {

  transform: translateY(-2px);

}





/* ================================================

   GLASS CARD

   ================================================ */

.card {

 position: absolute;

 left: 20px;

 right: 20px;

 background-color: #d9d9d90c;

 border-radius: 10px;

 border: 1px solid;

 border-color: #ffffff63;

 box-shadow: inset -76.9px 76.9px 76.9px #ffffff0c, inset 76.9px -76.9px 76.9px#a4a4a40c;

 backdrop-filter: blur(96.12px) brightness(100%);

 -webkit-backdrop-filter: blur(96.12px) brightness(100%);

}


.card--intro {
  top: 140px;
  bottom: 190px;
}


.card--form{
  top: 140px;
  bottom: 140px;         
  padding-bottom: 700px;  
}




/* ================================================

   TEXT CONTENT

   ================================================ */



.introText {

  position: absolute;

  top: 210px;

  left: 45px;

  right: 45px;

  color: white;

  font-size: 17px;

  font-weight: 400;

  line-height: 1.7;

  text-align: justify;

  font-family: "Century Gothic", Arial, sans-serif; font-weight: 500;
 
}


.introText--ar {

  position: absolute;

  top: 250px;

  left: 45px;

  right: 45px;

  text-align: right;

  text-shadow: 0px 2px 4px #00000040;

  font-weight: 300;

  color: #ffffff;

  font-size: 20px;

  letter-spacing: 0;

  font-family: "GE SS Two", sans-serif; font-weight: 300;
  
  text-align: justify;

}

.introText--ar strong {
  font-weight: 500;
}


/* ================================================

   FORM

   ================================================ */

   

.formLayer {

  position: absolute;

  top: 220px;

  left: 45px;

  right: 45px;

  z-index: 3;

}



.form-field {

  margin-bottom: 18px;

}



.fieldLabel {

  display: block;

  text-align: center;

  color: rgba(255, 255, 255, 0.85);

  font-size: 16px;

  font-weight: 400;

  margin-bottom: 8px;

  letter-spacing: 0.3px;

  font-family: "Century Gothic", Arial, sans-serif; font-weight: 500;

}

.fieldLabel--ar {

  display: block;

  text-align: center;

  color: rgba(255, 255, 255, 0.85);

  font-size: 16px;

  font-weight: 400;

  margin-bottom: 8px;

  letter-spacing: 0.3px;

  font-family: "GE SS Two", sans-serif; font-weight: 300;

}



.form-field input {

  width: 100%;

  height: 50px;



  background:

    linear-gradient(90deg, rgba(91, 151, 148, 1) 0%, rgba(45, 104, 125, 1) 100%) padding-box,

    linear-gradient(180deg, rgba(251, 232, 133, 1) 0%, rgba(166, 220, 140, 1) 100%) border-box;



  border: 1px solid transparent;

  border-radius: 15px;



  padding: 0 18px;

  color: white;

  font-size: 14px;

  font-family: "Century Gothic", Arial, sans-serif; font-weight: 400;

  transition: all 0.3s ease;

}





.form-field input::placeholder {

  color: rgba(255, 255, 255, 0.3);

}



.form-field input:focus{

  outline: none;

  background:

    linear-gradient(90deg, rgba(91, 151, 148, 1) 0%, rgba(45, 104, 125, 1) 100%) padding-box,

    linear-gradient(180deg, rgba(251, 232, 133, 1) 0%, rgba(166, 220, 140, 1) 100%) border-box;

  border: 1px solid transparent;

  box-shadow: 0 0 0 2px rgba(201,246,241,0.25);

}





/* ================================================

   CHECKBOX

   ================================================ */

/* wrapper */

.consent-wrapper{

  display:flex;

  align-items:center;

  gap:5px;

  margin:25px 0 30px;

}



/* Custom checkbox */

.consent-checkbox{

  -webkit-appearance:none;

  appearance:none;

  width:18px;

  height:18px;

  border-radius:5px;

  cursor:pointer;



  border:1px solid transparent;

  background:

    linear-gradient(#F2F9F9, #F2F9F9) padding-box,

    linear-gradient(180deg, rgba(251, 232, 133, 1) 0%, rgba(166, 220, 140, 1) 100%) border-box;



  box-shadow: 0px 6px 10px rgba(0,0,0,0.35) inset;

  display:grid;

  place-items:center;

}





/* check mark */

.consent-checkbox::after{

  content:"";

  width: 10px;

  height: 4px;

  border-left: 2px solid #fff;

  border-bottom: 2px solid #fff;

  transform: rotate(-45deg) scale(0);

  transform-origin: center;

  transition: 120ms transform ease-in-out;

}



/* In case checked */

.consent-checkbox:checked{

  background:

    linear-gradient(#F2F9F9, #F2F9F9) padding-box,

    linear-gradient(180deg, rgba(251, 232, 133, 1) 0%, rgba(166, 220, 140, 1) 100%) border-box;

}

.consent-checkbox:checked::after{

  border-left: 2px solid #205E7B;

  border-bottom: 2px solid #205E7B;

}





.consent-checkbox:checked::after{

  transform: rotate(-45deg) scale(1);

}



.consent-label-en {

  color:#ffffff;

  justify-content: center;

  font-family: "Century Gothic", Arial, sans-serif; font-weight: 400;

  font-weight: 300;

  font-size: 14px;

  text-align: left;

  line-height: normal;

  direction: rtl;

}



.consent-label-ar {

  color:#ffffff;

  justify-content: center;

  font-family: "GE SS Two", sans-serif; font-weight: 300;

  font-weight: 300;

  font-size: 14px;

  text-align: left;

  line-height: normal;

  direction: rtl;

}



/* ================================================

   SUBMIT BUTTON

   ================================================ */

.joinBtn{

  width: 100%;

  max-width: 200px;

  height: 48px;



  /* خلفية الزر */

  background: linear-gradient(90deg, rgba(201,246,241,1) 10%, rgba(255,255,255,1) 76%);



  border: none;

  border-radius: 78px;

  box-shadow: 0px 4px 28px 7px #00000040;



  cursor: pointer;

  display: block;

  margin: 0 auto;

  transition: all 0.2s ease;

}





.joinBtnText-en{

  font-family: "Century Gothic Bold", Arial, sans-serif;

  font-size: 27px;

  font-weight: 700;

  background: linear-gradient(270deg, rgba(21,149,192,1) 0%, rgba(63,203,185,1) 94%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  -webkit-text-fill-color: transparent;

}





.joinBtnText-ar{

  font-family: "GE SS Two", sans-serif;

  font-size: 27px;

  font-weight: 700;

  background: linear-gradient(270deg, rgba(21,149,192,1) 0%, rgba(63,203,185,1) 94%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

  -webkit-text-fill-color: transparent;

}



.joinBtn:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

}



.joinBtn:active {

  transform: translateY(0);

}



/* ================================================

   RESPONSIVE

   ================================================ */

@media (prefers-reduced-motion: reduce) {

  * {

    animation-duration: 0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}