.form-error-msg {
    color: red;
}

.title1{
    font-family: 'Bricolage Grotesque';
    font-weight: 700;
}

.cadre{
   
border-radius: 20%;
   
overflow: hidden;
   
border: 2px solid #387FF51A;
   
display: inline-block;
   
transition: transform 0.3s ease, box-shadow 0.3s ease;
   
width: 3.2em;
   
height: 3.2em;
   
box-shadow: 0px 3px 6px #1b1c1d0a;
}
.avatar{
    background-image: url(../../images/avatar-icon.png);
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
    object-fit: contain;
    position: relative;
    top: 25%;
    left: 25%;
}

.p-1-5{
    padding: 1.5em !important;
}

.hr-text {
  position: relative;
  border: none;
  height: 1.5em; /* Adjust as needed */
  text-align: center;
  margin: 20px 0;
}

.hr-text::before {
  content: "";
  background: #66666640;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
}

.hr-text::after {
  content: "Or"; 
  display: inline-block;
  position: relative;
  background-color: white;
  padding: 0 10px;
  color: #4A4A4A;
  font-size: 14px;
}
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: white;
  color: #444;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  padding: 10px 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
}

.google-btn:hover {
  background-color: #f5f5f5;
}

.google-btn img {
  width: 1.5em;
}

.google-btn span{
    font-family: 'inter', sans-serif;
    font-size: 0.9em;
    color: #4A4A4A;
}

.navbar.bg-transparent {
  background-color: transparent !important;
  position: relative;
  width: 100%;
}

.navbar .nav-link {
  font-family: 'inter', sans-serif;
  font-size: 1em;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar .nav-link:hover {
  color: #0d6efd; /* Bootstrap primary color */
}

.navbar .btn-primary {
  border-radius: 0.5em;
  font-family: 'inter', sans-serif;
  font-size: 0.88em;
  width: 100%;
  background-color: #0B5ADD;
}

.logo{
    background-image: url(../../images/logo.png);
    background-repeat: no-repeat;
    width: 6.3em;
    height: 2em;
}

/*body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  
  background:
  radial-gradient(ellipse at top right, #BDD4FC 40%, transparent),
   radial-gradient(ellipse at top left, #ffffff 30%, transparent),
    radial-gradient(ellipse at bottom right, #ffffff 30%, transparent),
  radial-gradient(ellipse at bottom left, #3C00C6 40%, transparent);

  background-size: 400% 400%;
  animation: gradientShift 5s ease infinite;
  font-family: 'Poppins', sans-serif;
}*/

.background-animation,
.background-animation * {
  box-sizing: border-box;
}
.background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  background: #ffffff;
  pointer-events: none;
}

/* Blue ellipse (light tone) */
.ellipse-1 {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #BDD4FC;
    opacity: 0.8;
    filter: blur(160px);
    animation: ellipse1Move 16s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);          /* ← Force GPU layer sur Safari */
    -webkit-transform: translateZ(0);  /* ← Préfixe WebKit */
    -webkit-backface-visibility: hidden; /* ← Évite le recalcul de rendu */
    backface-visibility: hidden;
}

/* Purple ellipse (dark tone) */
.ellipse-2 {
    position: absolute;
    width: 968px;
    height: 968px;
    border-radius: 50%;
    background: #3C00C6;
    opacity: 0.3;
    filter: blur(160px);
    animation: ellipse2Move 16s ease-in-out infinite alternate;
    pointer-events: none;
    will-change: transform;
    transform: translateZ(0);          /* ← Force GPU layer sur Safari */
    -webkit-transform: translateZ(0);  /* ← Préfixe WebKit */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}@-webkit-keyframes ellipse1Move {
    0%   { -webkit-transform: translate(70%, -20%); }
    25%  { -webkit-transform: translate(80%, 10%); }
    50%  { -webkit-transform: translate(-10%, 70%); }
    75%  { -webkit-transform: translate(-20%, 40%); }
    100% { -webkit-transform: translate(70%, -20%); }
}

@-webkit-keyframes ellipse2Move {
    0%   { -webkit-transform: translate(-20%, 70%); }
    25%  { -webkit-transform: translate(-10%, 40%); }
    50%  { -webkit-transform: translate(70%, -10%); }
    75%  { -webkit-transform: translate(80%, 0%); }
    100% { -webkit-transform: translate(-20%, 70%); }
}
/* body{
position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  background: 
              radial-gradient(circle at 20% 80%, #BDD4FC 30%, #FFFFFF 70%),
              radial-gradient(circle at 80% 20%, #3C00C6 100%, #FFFFFF 0%);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  animation: diagonalShift 10s ease-in-out infinite alternate;
} */

@keyframes diagonalShift {
  0% {
    background-position: bottom left, top right;
  }
  25% {
    background-position: top right, bottom left;
  }
  50% {
    background-position: top left, bottom right;
  }
  75% {
    background-position: bottom right, top left;
  }
  100% {
    background-position: bottom left, top right;
  }
}


@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.hero-section {
  height: 100vh;
  color: #fff;
  position: relative;
  z-index: 1;
}

.password-label-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-password-btn {
  background: none;
  border: none;
  color: #A4A4A4;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.toggle-password-btn i {
  font-size: 14px;
}

.toggle-password-btn:hover {
  color: #808080;
}


.site-footer hr {
  border-color: #ddd;
  opacity: 1;
  margin-bottom: 1rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-links i {
  font-size: 16px;
}





.site-header {
  z-index: 1030;
}



html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}


body {
  display: flex;
  flex-direction: column;
}

.page-content {
  margin: 0;
  overflow: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Footer styling */
.site-footer {
  color: rgb(74, 74, 74);
  font-size: 14px;
  width: 100%;
  flex-shrink: 0;
  background: rgb(255, 255, 255);
}

@media (max-width: 767px) {
  .site-footer {
    bottom: 0;
    position: fixed;
    width: 100%;
    z-index: 10;
  }
}

.footer-links a {
  color: rgb(74, 74, 74);
  text-decoration: none;
  font-size: 14px;
}

.privacy-container{
 width: 100%;
  font-family: "inter", sans-serif;
 color: #4A4A4A;
}

.terms_conditions-container{
 width: 100%;
 font-family: "inter", sans-serif;
 color: #4A4A4A;
}

.center-elem{padding: 0px 25.4%;position: relative;z-index: 1;}


.t1{
  font-size: 2.875rem;
}

.st3{
  font-family: "inter", sans-serif;
}

.st2{
  font-size: 1.375rem;
}

.privacy-container p{
  margin: 40px 0 80px 0;
    font-family: "inter", sans-serif;
  color: #4A4A4A;
}

.terms_conditions-container p{
  margin: 40px 0 80px 0;
  font-family: "inter", sans-serif;
  color: #4A4A4A;
}

.no-animation-bg {
    background: linear-gradient(#DCE9FF 5%, #FFFFFF 40%);
    background-size: cover;
    background-repeat: no-repeat;
}

.no-animation-bg .ellipse-1,
.no-animation-bg .ellipse-2 {
    display: none;
}


.page-white-header .navbar {
    background-color: #ffffff !important;
}

.page-white-header .site-header {
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.page-white-header .nav-link {
    color: #000 !important;
}

.page-white-header .navbar-brand .logo {
    filter: none; /* optional, depending on your logo */
}

.terms_conditions-container a{
  color: #4A4A4A!important;
} 

.upgrade{
  padding:10px 14px;
background:#0b5add;
color:#fff;
border-radius:7px;
text-decoration:none;
display:inline-block;
box-shadow:0 8px 20px rgba(11,90,221,.35);
animation:float 4s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.04)}
}
@media screen and (max-width: 991px) {
  .navbar.bg-transparent {
    background-color:  white !important;
  }
}