:root {
	--main: #f6c174;
	--neutral-50: #fff;
	--neutral-100: #e6e6e6;
	--neutral-200: #ccc;
	--neutral-300: #b3b3b3;
	--neutral-400: #999;
	--neutral-500: #666;
	--neutral-600: #4d4d4d;
	--neutral-700: #1a1a1a;
	--neutral-800: #0d0d0d;
	--gray-50: #f0f2f4;
	--gray-100: #e1e5ea;
	--gray-200: #c4cbd4;
	--gray-300: #a6b0bf;
	--gray-400: #8896aa;
	--gray-500: #4b5768;
	--gray-600: #556377;
	--gray-700: #404a59;
	--gray-800: #2b323b;
	--primary-50: #fff8f2;
	--primary-100: #ffe2cc;
	--primary-200: #ffc599;
	--primary-300: #ffa866;
	--primary-400: #ff8b33;
	--primary-500: #ffae00;
	--primary-600: #cc5800;
	--primary-700: #994200;
	--primary-800: #662c00;
	--success-50: #e8fdf3;
	--success-100: #d0fbe7;
	--success-200: #a2f6cf;
	--success-300: #73f2b7;
	--success-400: #45ed9f;
	--success-500: #00866b;
	--success-600: #12ba6c;
	--success-700: #0d8c51;
	--success-800: #095d36;
	--warning-50: #fef4e6;
	--warning-100: #fde9ce;
	--warning-200: #fcd29c;
	--warning-300: #fabc6b;
	--warning-400: #f9a639;
	--warning-500: #f79009;
	--warning-600: #c67306;
	--warning-700: #945605;
	--warning-800: #633903;
	--erorr-50: #fde9e7;
	--erorr-100: #fbd2d0;
	--erorr-200: #f8a6a0;
	--erorr-300: #f47971;
	--erorr-400: #f14d41;
	--erorr-500: #f04438;
	--erorr-600: #be1a0e;
	--erorr-700: #8e130b;
	--erorr-800: #5f0d07;
	--secondly-50: #e6f8ff;
	--secondly-100: #cdf1fe;
	--secondly-200: #9ae3fe;
	--secondly-300: #68d5fd;
	--secondly-400: #35c8fd;
	--secondly-500: #0292c7;
	--secondly-600: #0295ca;
	--secondly-700: #026f97;
	--secondly-800: #014a65;
     --BG : linear-gradient(180deg, #C7EAFF 0.02%, #FFF 34.71%);
    --main: #EB6824;
}
/* Inside your global CSS file */
@font-face {
  font-family: 'Al-Jazeera-Arabic';
  src: url('/new/fonts/Al-Jazeera-Arabic-Regular.ttf') format('truetype'); /* Correct format is 'truetype' */
  font-weight: normal;
  font-style: normal;


}

* {
  font-family: 'Al-Jazeera-Arabic', sans-serif; 
}
body {
  margin: 0;
  display: flex;
  height: 100vh;
  background: linear-gradient(to bottom, #f7f4ee, #faffff);
}

.left-column {
  width: 55%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-image: url('/new/images/login_new_back.png');
  background-size: contain;
  /*background-position: center;*/
  background-repeat: no-repeat;
}

.right-column {
  width: 45%;
  direction: rtl;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/****************** left ***************************/
.Polygon-Generator {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 80%;
  max-width: 90%;
}

.Polygon-Generator .title {
  height: 32px;
  align-self: stretch;
  flex-grow: 0;
 
  font-size: 28px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.14;
  letter-spacing: normal;
  text-align: center;
  color: #0d0d0d; 
}

.Polygon-Generator .title span {
  color: #f6c174;
}

.Polygon-Generator .desc {
  width: 80%;
  
  
  
 
  font-size: 24px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.33;
  letter-spacing: normal;
  text-align: center;
  color: #4d4d4d;
}


  /**************************right *****************************/
.create-account {
  display: flex;
flex-direction: column;
align-items: center;
gap: 11px;
margin: 82px 65px 72px 65px;
border-radius: 32px;
/*background: linear-gradient(180deg, #F8F3ED 0%, #FAFFFF 69.92%);*/
}
.create-account .logo{
  width: 120px;
height: 64.186px;
background: url('/new/images/Layer 2 3 3.png')  no-repeat;
}
.create-account .first-p{
  color: var(--Neutral-800, #0D0D0D);
text-align: center;
font-family: Tajawal;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 32px; /* 177.778% */
}
.create-account .second-p{
  color: var(--Gray-500, #4B5768);
text-align: right;
font-family: Tajawal;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 200% */
}
.Frame-1948759715 {
 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 
  text-align: center; /* Align text */
  gap: 32px;
  padding: 0;
  margin-right: 35px;
}
.input-group{
  height: 32px;
  width: 386px;
  align-self: stretch;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  border: solid 0.5px #c4cbd4;
  position: relative;
  margin-bottom: 15px;
  margin-top: 17px;
  
  justify-content: center;

  margin-right: 82px;
}



input {
  width: 100%;
  padding: 10px;
  padding-right: 40px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  background-color: transparent;
}

.icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
.toggle-password {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.forget-password{
  color: var(--Gray-500, #4B5768);
font-family: Tajawal;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 166.667% */
cursor: pointer;
}
.btn-create{
  display: flex;
height: 32px;
width: 418px;
margin-right: 82px;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border: 1px solid transparent; /* Invisible border */
border-radius: 8px;
background: #F6C174;
color: var(--Neutral-50, #FFF);
text-align: center;
font-family: Tajawal;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
cursor: pointer;
margin-top: 35px;

}
.guest{
  display: flex;
height: 18px;
width: 418px;
margin-right: 82px;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
border-radius: 8px;
background: var(--Gray-300, #A6B0BF);
color: #FFF;
text-align: center;
font-family: Tajawal;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
cursor: pointer;
margin-top: 10px;
}
.have-account{
  color: #000;
text-align: center;

font-family: Tajawal;
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.have-account a{
  color: var(--Erorr-500, #F04438);
cursor: pointer;
font-family: Tajawal;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.Frame-1948759714 {
 

  display: flex;
  flex-direction: row;
  flex-direction: row;
  align-items: center; /* Ensures all items are vertically centered */
  justify-content: center; /* Centers everything horizontally */
  gap: 24px;
  padding: 0;
  margin-bottom: 31px;
  /*margin-right: 82px;*/
  margin-left: 51px;
}
.Line-11 {
  width: 154px;
  height: 0.5px;
 
  background-color: #8896aa;
}
.create-account .about {
  width: 62px;
  height: 17px;
 
 
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  color: #8896aa;
  white-space: nowrap;
}
.btn-google{
  display: flex;
  height: 26px;
  width: 418px;
margin-right: 82px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border: 1px solid transparent; /* Invisible border */
  border-radius: 8px;
  background: transparent;
  
  border-radius: 8px;
  border: solid 0.5px #c4cbd4;  
  margin-top: 9px;
}
.btn-google p{
  color: var(--Neutral-800, #0D0D0D);
text-align: center;
font-family: Tajawal;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
img.Social-Icons {
  width: 16px;
  height: 16px;
  flex-grow: 0;
  object-fit: contain;
}
.policy {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centers items horizontally */
  justify-content: center; /* Centers items vertically (if needed) */
  padding-right: 40px;
  gap: 15px;
  margin-top: 18px;
}

.policy p{
  color: var(--Gray-400, #8896AA);
  text-align: right;
 
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  /*line-height: 20px; /* 142.857% */
  margin: 0; /* Remove margin */
  line-height: 1.5; /* Adjust line spacing if needed */
}
.policy p span{
  color: var(--Gray-500, #4B5768);
font-family: Tajawal;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.span-mukh{
  color: var(--Secondly-500, #0292C7);
font-family: Tajawal;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}

/***********************************************************************************************************************************************/

@media (min-width: 2560px) {
  .create-account {
    max-width: 1200px;
    margin: auto;
  }
  .create-account .logo {
    width: 180px;
    height: 100px;
    margin-top: 108px;
  }
  .create-account .first-p {
  
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}
.create-account .second-p {
    font-size: 33px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  }
  .have-account,
  .forget-password ,     .have-account a,   .policy p .policy p span   {
    font-size: 32px;
  }
  .Frame-1948759714 {
    gap: 32px;
  }
  .input-group {
    height: 51px;
    width: 844px;
    margin-right: 0;
    margin-bottom: 44px;

  }
  input {
   
    font-size: 29px;   
}  
.forget-password{
font-size: 27px;
margin-bottom: 32px;
}
.btn-create, .btn-google, .guest{
height: 52px;
width: 735px;
margin-top: 25px;
font-size: 27px;
  }
  .btn-google p {
   
    font-size: 27px;  
}
  .Line-11 {
    width: 200px;
  }
  .Polygon-Generator .title {
      font-size: 2vw;
  }
  .Polygon-Generator .desc {
      font-size: 1.5vw;
  }
}






@media (max-width: 1366px) {
  .left-column {
      width: 100%; /* Make it take full width */
      height: auto;
      min-height: 100vh;
  }
  .right-column {
    width: 100%; /* Make it take full width */
    height: auto;
    min-height: 100vh;
  }
  .create-account {
      width: 100%; /* Make it take full width */
      height: auto;
      min-height: 100vh;
  }
  .input-group {
    height: 24px;

  }
  .btn-google, .guest{
    height: 19px;
    width: 386px;

  }
  .create-account .first-p {
  
    padding: 0;
    margin: 0;
  }
  .create-account .second-p {
  
    padding: 0;
    margin: 0;
  }
  .Polygon-Generator {
      width: 90%;
  }
  .Frame-1948759714 {
 
    margin-right: 82px;
   
   }
 

}


@media (max-width: 1023px) {
  .left-column {
      display: none;
  }
  .right-column{
   /* width: 100%;*/
   width: 100vw;  /* Takes full viewport width */
   max-width: 100vw; /* Prevents overflow */
  }
  .create-account {
    width: 100vw;  /* Takes full viewport width */
    max-width: 100vw; /* Prevents overflow */
  }  
  .Frame-1948759715{
    width: 100%;  /* Takes full viewport width */
    margin-right: 0;
 
  } 
  .input-group {
   
    width: 316px;
    margin-right: 38px;  
   
  }
  .btn-google {
    width: 348px;
    margin-right: 45px;
  }
  .btn-create{
    width: 348px;
    margin-right: 38px;
  }
  .Frame-1948759714{
   margin: 0;
  }
  .guest{
   
  width: 348px;
  margin-right: 45px;
  
  }
}