* { margin: 0; padding: 0; box-sizing: border-box;}
body, p, a, span, td, th, input, button, select {
font-family: 'Inter', sans-serif ;
}
:root {
  --white: #fff;
    --black: #000;
  --charcoal: #16181D;
  --dark-slate: #1E1E1E;
  --steel-gray: #454545;
  --mid-gray: #696969;
  --cool-gray: #9CA3AF;
  --pale-blue: #E7EFF5;
  --lavender-gray: #E9E5F6;
  --blue: #2966F4;
  --indigo: #6738FF;
  --blush: #F1E0E3;
  --rose: #F3607A;
  --petal-pink: #EFCDD3;
  --gradient-peach: #F0E2D5;
  --gradient-mint: #D4EAE6;
  --gradient-sky: #DBEAFE;
  --form-border:#E7E7E7;
  --input-border:#F0F0F0;
  --Pale-gray:#FDFDFD;
  --light-purple:#A5A9F7;
  --light-blue:#4BBDF8;
  --light-pink: #f373ff;
  --footer-border:#EEEEEE1A;
  --submit-green:#0D9488;
  --submit-bg:#DCF6F1;
  --orange:#CA8A04;
  --yellow:#FEF9C3;
  /* dashboard */
  --dark-black:#3D3D3D;
  --text-black:#6D6D6D;
  --text-gray:#374151;
  --button-border:#D1D5DB;
  --table-gray:#64748B;
  --status-gray:#66666699;
  --scroll:#E0A4AE;
  --red:red;
}
.black{color: var(--black);}
.white{color: var(--white);}
.charcoal{color: var(--charcoal);}
.cool-gray{color: var(--cool-gray);}
.mid-gray{color: var(--mid-gray);}
.dark-black{color: var(--dark-black);}
.text-black{color: var(--text-black);}
.text-gray{color: var(--text-gray);}
.steel-gray{color: var( --steel-gray);}
.table-gray{color: var(--table-gray);}
.status-gray{color: var(--status-gray);}
.red-pink{color: var(--scroll);}
.red{color: var(--red);}
@font-face {
    font-family: 'Nohemi Bold';
    src: url('../assets/fonts/gotham/Gotham-Bold.woff2') format('woff2'),
    url('../assets/fonts/gotham/Gotham-Bold.woff')format('woff'),
    url('../assets/fonts/gotham/Gotham-Bold.ttf') format('truetype');
    font-style: normal;
}
@font-face {
    font-family: 'Nohemi medium';
    src: url('../fonts/nohemi-font-family-1751507399-0/Nohemi-Medium-BF6438cc57ddecd.woff') format('woff2');
    font-style: normal;
}
@font-face {
    font-family: 'Nohemi light';
    src: url('../fonts/nohemi-font-family-1751507399-0/Nohemi-Light-BF6438cc5702321.woff') format('woff2');
    font-style: normal;
}
/* font-family */
.Nohemi-light{ font-family: 'Nohemi light';}
.Nohemi-medium{ font-family: 'Nohemi medium';}
.Nohemi-bold{ font-family: 'Nohemi bold';}


/* Scrollbar */
::-webkit-scrollbar {  width: 10px;  background-color: transparent;  }
::-webkit-scrollbar-track {  background-color: transparent;  }
::-webkit-scrollbar-thumb {  background-color: #888;  border-radius: 20px;  }
::-webkit-scrollbar-thumb:hover {  background-color: #555;  }

/* Font Sizes */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; 
    word-break: break-word; 
  }
  p, a, span { line-height: 1.5; 
     word-break: break-word;
    }
h1{font-size: 56px; font-weight: 500;}
h2{font-size: 48px; font-weight: 600;}
h3{font-size: 42px; font-weight: 500;}
h4{font-size: 24px;}
h5{font-size: 20px;}
h6{font-size: 18px;}
p{font-size: 16px;}


.fs-48{font-size: 48px;}
.fs-42{font-size: 42px;}
.fs-38{font-size: 38px;}
.fs-28{font-size: 28px;}
.fs-24{font-size: 24px;}
.fs-22{font-size: 22px;}
.fs-20{font-size: 20px;}
.fs-18{font-size: 18px;}
.fs-16{font-size: 16px;}
.fs-14{font-size: 14px;}
.fs-12{font-size: 12px;}


.fw-700 {font-weight: 700;}
.fw-600 {font-weight: 600;}
.fw-500 {font-weight: 500;}
.fw-400 {font-weight: 400;}
.fw-300{font-weight: 300;}

/* links */
a {text-decoration: none;}
a * {
    text-decoration: none;
}
li {list-style: none;}

body .login-bg-image {
    background-image: url(../images/login-bg.png);
    background-size: cover;
    min-height: 85vh;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    width: 620px;
}


.footer-links a {
    color: var(--mid-gray);
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  
.footer-links li {
  margin: 0 5px;
  }
  .footer-links li .fa-circle:before {
    font-size: 7px;
    content: "\f111";
    margin-right: 10px;
    color: var(--mid-gray);
    opacity: 0.5;
    margin-right: 7px;
}
.gradient-btn {
    padding: 12px 60px;
    border: none;
    border-radius: 50px;
    background: rgb(248, 246, 246);
    color: var(--black);
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

.gradient-btn:hover {
  background: linear-gradient(to right, var(--light-pink), var(--light-blue));
  color: var(--white);
}
/* .gradient-date-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 30px;
  padding: 1px; 
  background: linear-gradient(to right, #FF94F6, #A5A9F7, #4BBDF8);
  overflow: hidden;
} */

.gradient-date-input {
  width: 100%;
  border: none;
  border-radius: 30px;
  /* padding-left: 40px; */
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  background: var(--Pale-gray);
  outline: none;
  display: block;
}
/* .form-control {
    display: block;
    width: 100%;
    padding: 20px 15px;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--bs-gray-700);
    background-color: var(--bs-body-bg);
    background-clip: padding-box;
    border: 1px solid var(--bs-gray-300);
    appearance: none;
    box-shadow: 0;
    transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
    border-radius: 22px;
} */
.black-button {
    background: var(--black);
    color: var(--white);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid var(--black) !important;
    padding: 10px 34px;
}
.back-btn {
    background: #F1F1F2;
    color: var(black);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    border: 2px solid #F1F1F2 !important;
    padding: 10px 34px;
}
/* Common icon styles */
.social-icons a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7.523px;
    text-decoration: none;
}

/* Individual platform background colors */
.social-icons a:nth-child(1) {
    background: #E7EFF5; /* Facebook */
}
.social-icons a:nth-child(2) {
    background: #E9E5F6; /* Twitter */
}
.social-icons a:nth-child(3) {
    background: #F1E0E3; /* Instagram */
}

/* Optional: Smooth hover effect */
.social-icons a:hover {
    transform: scale(1.1);
    transition: all 0.3s ease;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
}
/* .custom-arrow-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
} */
.action-btn {
  position: relative;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 30px;
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  background: transparent;
  z-index: 1;
  overflow: hidden;
}

.action-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 2px; /* thickness of border */
  background: linear-gradient(to right, #FF94F6, #A5A9F7, #4BBDF8);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  z-index: -1;
}

.action-btn:hover {
  color: var(--white);
  background: linear-gradient(to right, #FF94F6, #A5A9F7, #4BBDF8);
  border-radius: 20px;
}

.upload-wrapper {
  display: flex;
  align-items: center;
}

.upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid transparent;
border-radius: 30px;
background: linear-gradient(148deg, #EFCDD3 0.95%, #F0E2D5 38.53%, #D4EAE6 64.27%, #DBEAFE 127.58%);
  color: #333;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.upload-btn:hover {
  /* background: linear-gradient(to right, #f8dfff, #d2f9ff); */
  color: #000;
  border: 1px solid linear-gradient(148deg, #EFCDD3 0.95%, #F0E2D5 38.53%, #D4EAE6 64.27%, #DBEAFE 127.58%);;
}

.upload-btn i {
  font-size: 14px;
}
.upload-btn-bg {
    display: inline-flex
;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, #eab5ff, #8de6ff) border-box;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3sease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.gradient-date-wrapper {
  position: relative;
  z-index: 1;
  border-radius: 30px;
  padding: 1px;
  background: linear-gradient(to right, #FF94F6, #A5A9F7, #4BBDF8);
  overflow: hidden;
}

.gradient-date-wrapper .form-control {
  background-color: var(--Pale-gray); 
  border: none;
  border-radius: 30px;
  /* height: 42px; */
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  padding: 5px 16px;
  box-shadow: none;
  appearance: none;

}

.gradient-date-wrapper .form-control::placeholder {
  color: #888;
  opacity: 1;
}

/* Special case for SELECT placeholder (first option) */
.gradient-date-wrapper select:invalid {
  color: #888;
}

/* Optional: Add a custom arrow for select */
.custom-arrow-icon {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
}


/* Loader Styling */
.page-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

/* Hide login content until fully loaded */
body:not(.loaded) .login-bg-image,
body:not(.loaded) form {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

body.loaded .login-bg-image,
body.loaded form {
  opacity: 1;
}
/* profile img */
.image-input .image-input-wrapper.image-uploader {
    border-radius: 88px;
}


.image-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: sans-serif;
}

.image-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f2f2f2;
    /* background-image: url('../images/avtar-blank.png'); */
    /* Default avatar */
    background-size: cover;
    background-position: center;
    position: relative;
}

.image-circle input[type="file"], .image-uploader-edit input[type="file"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.remove-btn {
    position: absolute;
    top: -2px;
    right: -7px;
    /* background: #ff4d4d; */
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    display: none;
}
.register-logo{filter: brightness(0);}
/* confirm password */
.confirm-password .card{background: transparent; box-shadow: none; border: none;}
/* question-and-answer */
/* contact-us */
.contact-us .card.contact-card {     background: linear-gradient(104deg, #edbfcd 0%, #cde7e7 100%); /*background: var(--bg-gradient);}*/ }
.contact-us .contact-form-content {background: var(--bg-gary);}
.contact-us .contact-form-content {padding: 20px;border-radius: 10px;border: 1px solid var(--form-border);background: var(--bg-white);}
.contact-us .form-input {padding: 8px;border: 1px solid var(--input-gary);border-radius: 32px;}
.contact-us .text-message {border: 1px solid var(--input-gary);border-radius: 12px;outline: none;}
.contact-us .form-btn {padding: 10px 30px;}
.contact-us input {outline: none;}
.contact-us .contact-form-content label {margin-block: 10px;}

.contact-us .card-content {
    padding: 1rem;
    border-radius: 10px;
    padding: 2rem 4rem 2rem 2rem;
    border: 1px solid var(--form-border);
}

.contact-form-content input.form-input {
    border-radius: 27px;
    border: 1px solid var( --input-border);
    padding: 14px;
}
.contact-form-content input.form-input::placeholder {
    color: var(--black);
}
.contact-form-content textarea.form-input {
    border-radius: 12px;
    border: 1px solid var( --input-border);
    padding: 14px;
}
.contact-form-content textarea.form-input::placeholder{color: var(--black);}

 .contact-icon {
    background: linear-gradient(130deg, #E0A4AE -16.36%, #4BBDF8 186.97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
}
/*question and answer*/
body .contact-bg-image {
    background-image: url(../images/login-bg.png);
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
   
}
.question-bg-image{
   background-image: url(../images/question-bg.png);
    background-size: cover;
    min-height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
}
.question-form-heading {
    background: linear-gradient(130deg, #ffc3cd -16.36%, #49b0e5 186.97%);
    border-radius: 15px;
}
.responsive-form{
  max-width: 500px;
}
/* responsive */
@media (max-width:991px) {
  .responsive-form{
  max-width: 100%;
}
}
@media (max-width:600px) {
  .responsive-form{
  max-width: 70%;
  margin: auto;
}
}
@media (max-width:480px) {
  .responsive-form{
  max-width: 50%;
  margin: auto;
}
}