.contact-form {
    max-width: 100%;
    width: 100%;
}

.form-row {
    display: flex;
    gap: 30px;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.form-group.full {
    margin-top: 20px;
}

label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    text-transform: uppercase;
}

input, textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid #ccc;
    padding: 8px 0;
    outline: none;
    font-size: 14px;
}

textarea {
    height: 100px;
    resize: none;
}

.btn-submit {
    margin-top: 20px;
    background: #0057a8;
    border: none;
    padding: 10px 30px;
    color: #fff;
    cursor: pointer;
}

.error {
    font-size: 12px;
    color: red;
    margin-top: 5px;
}

.success-msg {
    margin-top: 10px;
    color: green;
}


#contactForm{padding-top:2rem;    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;}

#contactForm .single{    display: flex;
    gap: 2rem;
    width: 100%;
    box-sizing: border-box;}



#contactForm input::placeholder,#contactForm textarea::placeholder,#contactForm input,#contactForm textarea{font-size:var(--f-18-16);color:#000;font-weight:400;outline:none;background: transparent;border-radius:0px !important;}



#contactForm .error-msg{
    font-size: 15px;
    padding-top: 5px;
    color: red;}




input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    background-color: transparent !important;
    background-clip: content-box !important;
    -webkit-text-fill-color: #000 !important; /* set text color */
}

#contactForm .cta-sec{

justify-content: center;
}




.magnetic {
  background: conic-gradient(from 125deg at 44.33% 162.5%, #BADAF9 0deg, #BEDEFD 158.79282474517822deg, #BFDFFE 169.47215795516968deg, #8DBDEF 181.78233861923218deg, #6FADF0 187.39575147628784deg, #4284CE 202.18412160873413deg, #296CBA 211.4842414855957deg, #1A55A0 223.98179054260254deg, #10458D 238.1100583076477deg, #1D539D 360deg);
  border: none;
  overflow: visible;
}
 
.particles-field {
  position: absolute;
  inset: -100%;
  opacity: 0;
  transition: opacity 0.3s ease;

}
 
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: conic-gradient(from 125deg at 44.33% 162.5%, #BADAF9 0deg, #BEDEFD 158.79282474517822deg, #BFDFFE 169.47215795516968deg, #8DBDEF 181.78233861923218deg, #6FADF0 187.39575147628784deg, #4284CE 202.18412160873413deg, #296CBA 211.4842414855957deg, #1A55A0 223.98179054260254deg, #10458D 238.1100583076477deg, #1D539D 360deg);
}
 
.magnetic:hover .particles-field {
  opacity: 1;

}
 
@keyframes particleFloat {
  0% { transform: translate(var(--x), var(--y)) scale(0); }
  50% { transform: translate(calc(var(--x) * -1), calc(var(--y) * -1)) scale(1); }
  100% { transform: translate(var(--x), var(--y)) scale(0); }
}