/* ================= CONTACT SECTION ================= */

.contact{
  /*padding:10px 10px;
  /*background:radial-gradient(circle at top,#0f172a,#020617 70%);*/
  position:relative;
  overflow:hidden;
  opacity:1;
  border-radius: 15px;
  color: #22c55e;


}

/* светящийся эффект */

.contact::before{
content:"";
position:absolute;
top:-200px;
left:50%;
transform:translateX(-50%);
width:600px;
height:600px;
/*background:radial-gradient(circle,#2564ebbe,transparent 70%);*/
filter:blur(120px);
z-index:0;
}

.contact-container{
max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;

position:relative;
z-index:1;
}

/* ================= TITLES ================= */

.contact h3{
font-size:1.6rem;
margin-bottom:18px;
}

.subtitle{
color:#94a3b8;
margin-bottom:30px;
}

/* ================= CONTACT CARDS ================= */

.contact-row {

display:flex;
align-items:center;
gap:18px;

padding:18px 20px;

border-radius:14px;

background:rgba(227, 230, 223, 0.466);

border:1px solid rgba(49, 48, 48, 0.685);
box-shadow:0 10px 15px rgba(0,0,0,0.35);

text-decoration:none;

color:rgb(82, 73, 73);

transition:.3s ease;

margin: 1rem 0.5rem;

}

.contact-row:hover{

transform:translateY(-4px);

background:rgba(255,255,255,0.07);

border:1px solid rgba(255,255,255,0.15);

box-shadow:0 10px 15px rgba(0,0,0,0.35);

}

.contact-row small{

font-size:0.75rem;
color:#94a3b8;

}

.contact-row strong{

font-weight:500;
font-size:0.95rem;

}

/* ================= ICON ================= */

.icon{

width:46px;
height:46px;

border-radius:12px;

background:rgba(59,130,246,0.15);

display:flex;
align-items:center;
justify-content:center;

transition:.3s;

animation:float 4s ease-in-out infinite;

}


.icon{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    background:#dbe3ef;
    border-radius:14px;
}

.icon svg{
    width:40px;
    height:40px;
    transform: translateY(1px);
}

.contact-row:hover .icon{

background:#74eb25;

transform:scale(1.08);

}

/* ================= FORM BOX ================= */

.contact-form-box{

background:rgba(255,255,255,0.04);

padding:2px;

border-radius:18px;

border:1px solid rgba(255,255,255,0.08);

backdrop-filter:blur(10px);

/*box-shadow:0 10px 10px rgba(0,0,0,0.35);*/
}

/* ================= INPUTS ================= */

.contact-form-box input,
.contact-form-box textarea{

width:100%;

padding:14px;

margin-bottom:12px;

border-radius:10px;

border:1px solid rgba(15, 3, 3, 0.521);

background:rgba(255,255,255,0.05);

color:rgb(0, 0, 0);

transition:.25s;

}

.contact-form-box input:focus,
.contact-form-box textarea:focus{

border-color:#565d69;

background:rgba(233, 34, 34, 0.08);

outline:none;

}

/* ================= BUTTON ================= */

.contact-form-box button{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:linear-gradient(135deg,#2563eb,#1d4ed8);

color:white;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.contact-form-box button:hover{

transform:translateY(-2px);

box-shadow:0 8px 20px rgba(37,99,235,0.4);

}

/* ================= CAPTCHA ================= */

.captcha-row{

display:flex;
gap:14px;
margin-bottom:15px;

}

.captcha-display{

flex:1;

display:flex;
align-items:center;
justify-content:center;

gap:15px;

padding:14px;

background:#f1f2f5b6; /****фон капча*****/

border-radius:14px;

border:1px solid rgba(19, 17, 17, 0.623);

}

.captcha-row input{

flex:1;

}

/* ================= CAPTCHA TEXT ================= */

#captcha-image{

font-size:22px;
letter-spacing:6px;
font-weight:bold;
color:#38bdf8;

}

/* ================= REFRESH BUTTON ================= */

.refresh-btn{

width:42px;
height:42px;

border-radius:10px;

border:none;

background:#000;

color:white;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

transition:0.3s ease;

}

.refresh-btn:hover{

background:#1f2937;

transform:rotate(180deg);

}

/* ================= SUCCESS MESSAGE ================= */

.success{

display:none;

padding:16px 18px;

margin-bottom:18px;

border-radius:12px;

text-align:center;

background:linear-gradient(135deg,#065f46,#064e3b);

border:1px solid rgba(34,197,94,0.4);

color:#d1fae5;

font-weight:500;

box-shadow:0 10px 25px rgba(0,0,0,0.4);

animation:fadeSuccess 0.4s ease;

}

.success::before{

content:"✓";

margin-right:10px;

font-weight:bold;

color:#22c55e;

}

@keyframes fadeSuccess{

from{
opacity:0;
transform:translateY(-8px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ================= FLOAT ICON ANIMATION ================= */

@keyframes float{

0%{transform:translateY(0)}

50%{transform:translateY(-4px)}

100%{transform:translateY(0)}

}

/* ================= RESPONSIVE ================= */

@media(max-width:900px){

.contact-container{

grid-template-columns:1fr;
gap:50px;

}

.captcha-row{

flex-direction:column;

}

}

.error{
color:#ff4d4d;
font-size:13px;
margin-bottom:8px;
}

input.error-field,
textarea.error-field{
border-color:#ff4d4d;
box-shadow:0 0 0 1px #ff4d4d;
}