: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);
  overflow-x: hidden;
}
.container-fluid {
  padding: 0;
}

/****************** left ***************************/

.left-column {
   background-image: url('/new/images/login_new_back.png');
   /* background-size: cover;*/
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    padding: 40px;
    color: white;
    position: relative;
}


.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 {
	
	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 Column *********************************************/
  
.right-column {
	direction: rtl;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}


.create-account {
    display: flex;
  flex-direction: column;
  align-items: center;

  margin: 16px 65px 72px 65px;
  border-radius: 32px;
  
 
  width: 100%;
  height: auto;
 
  }
  .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-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; 
  }
  .create-account .second-p{
    color: var(--Gray-500, #4B5768);
  text-align: right;
  
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 32px; 
  }
  .Frame-1948759715 {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
   
    text-align: center;
    gap: 32px;
    padding: 0;
  }
  .input-group{
    height: 48px;
    width: 418px;
    align-self: stretch;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
   
    border-radius: 8px;
    border: solid 0.5px #c4cbd4;
    position: relative;
    margin-bottom: 15px;
    
    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{
    height: 20px;
    text-align: right;
    padding-bottom: 15px;
  cursor: pointer;
  margin-right: 82px;
  margin-bottom: 11px;
  }
  .forget-password a {
   
    
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    color: #4b5768;
  cursor: pointer;
 
  }
  .btn-create{
    display: flex;
    height: 39px;
    width: 418px;
  margin-right: 82px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border: 1px solid transparent; 
  border-radius: 8px;
  background: #00866B;
  color: var(--Neutral-50, #FFF);
  text-align: center;
  
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  
  }
  .guest{
    display: flex;
  height: 40px;
  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-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  cursor: pointer;
  margin-top: 10px;
  }
  .have-account{
    color: #000;
  text-align: center;
  
  
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  }
  .have-account a{
    color: var(--Erorr-500, #F04438);
  cursor: pointer;
  
  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; 
    justify-content: center; 
    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: 40px;
    width: 418px;
  margin-right: 82px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border: 1px solid transparent; 
    border-radius: 8px;
    background: transparent;
    
    border-radius: 8px;
    border: solid 0.5px #c4cbd4;  
    margin-top: 9px;
  }
  .btn-google p {
    margin: 0; 
    order: 1; 
}

.Social-Icons {
    order: 2; 
}
  .btn-google p{
    color: var(--Neutral-800, #0D0D0D);
  text-align: center;
  
  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; 
    justify-content: center; 
    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; 
    margin: 0; 
    line-height: 1.5; 
  }
  .policy p span{
    color: var(--Gray-500, #4B5768);
  
  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-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;
  }







/*******************************************phone***************************************/

  @media (max-width: 1023px) {
	.left-column {
		display: none;
	}
	.right-column{
	
	 width: 100vw;  
	 max-width: 100vw; 
	}
	.create-account {
	  width: 100vw;  
	  max-width: 100vw; 
	}  
	.Frame-1948759715{
	  width: 100%;  
   
	} 
	.input-group {
	 
	  width: 349px;
	  margin-right: 45px;  
	 
	}
	.btn-google {
	  width: 348px;
	  margin-right: 45px;
	}
	.btn-create{
	  width: 348px;
	  margin-right: 45px;
	}
	.Frame-1948759714{
	 margin: 0;
	}
	.guest{
	 
	width: 348px;
	margin-right: 45px;
	
	}
  }
/**************************************css for msg ******************************/

.alert {
	position: relative;
	padding: 0.75rem 1.25rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 0.375rem;
  }
  .alert-danger {
	color: #842029;
	background-color: #f8d7da;
	border-color: #f5c2c7;
  }
  .alert-dismissible {
	padding-right: 3.75rem;
  }
  
  .alert-dismissible .btn-close {
	position: absolute;
	top: 0;
	right: 0;
	padding: 1.25rem;
	color: inherit;
  }
  
  .error-message {
	color: red;
	font-size: 14px;
	margin-top: 5px;
  }
  .error-border {
	border: 1px solid red;
  }
  .alert-success {
	color: #0f5132;
	background-color: #d1e7dd;
	border-color: #badbcc;
  }