/* =========================
GLOBAL
========================= */

body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:#ffffff;
color:#222;
}

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

.contact-section{

padding:80px 20px;

background:
linear-gradient(135deg, rgba(138,92,255,.05), rgba(255,255,255,.95)),
repeating-linear-gradient(
45deg,
rgba(0,0,0,.03) 0,
rgba(0,0,0,.03) 1px,
transparent 1px,
transparent 30px
),
repeating-linear-gradient(
-45deg,
rgba(0,0,0,.03) 0,
rgba(0,0,0,.03) 1px,
transparent 1px,
transparent 30px
);

}

/* =========================
SECTION TITLE
========================= */

.section-title{

text-align:center;
font-size:34px;
margin-bottom:50px;

background:linear-gradient(90deg,#ff6fd8,#8a2be2,#5f7cff);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.title-underline{

display:block;
width:120px;
height:4px;

margin:10px auto;

background:linear-gradient(90deg,#ff6fd8,#8a2be2,#5f7cff);

border-radius:10px;

}

/* =========================
GRID LAYOUT
========================= */

.contact-wrapper{

max-width:1100px;
margin:auto;

display:grid;
grid-template-columns:1fr 1fr;

gap:40px;

}

/* =========================
GEN-X9 INFO BOX
========================= */

.contact-info{

background:linear-gradient(135deg,#05072f,#0c1445,#1d0c3f);

padding:35px;

border-radius:16px;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

color:#fff;

}

/* =========================
GEN-X9 BRAND
========================= */

.contact-brand{

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

text-align:center;

margin-bottom:25px;

}

.contact-brand img{

width:70px;

border-radius:12px;

margin-bottom:10px;

}

.contact-brand h3{

font-size:18px;

color:#ffffff;

}

/* =========================
MANAGER PROFILE
========================= */

.manager-profile{

text-align:center;

margin-bottom:25px;

}

.manager-profile img{

width:120px;
height:120px;

border-radius:50%;

border:4px solid #8a2be2;

object-fit:cover;

margin-bottom:10px;

}

.manager-profile h4{

margin:5px 0;

color:#ffffff;

}

.manager-profile p{

color:#bfc5ff;

font-size:14px;

}

/* =========================
CONTACT DETAILS CENTER
========================= */

.info{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

font-size:14px;

margin-bottom:12px;

color:#d6d9ff;

text-align:center;

}

.info i{
color:#8a2be2;
}

/* =========================
SEND QUOTE BOX
========================= */

.contact-form{

background:linear-gradient(135deg,#0b0d2b,#1a0b3f,#0c1f4a);

padding:35px;

border-radius:16px;

box-shadow:0 15px 40px rgba(0,0,0,0.2);

}

/* =========================
FORM TITLE
========================= */

.contact-form h2,
.contact-form h3{

text-align:center;

color:#ffffff;

font-size:22px;

font-weight:600;

margin-bottom:25px;

}


/* =========================
FORM DESCRIPTION TEXT
========================= */

.contact-form p{
  color:#ffffff;
}

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

form{

display:grid;

gap:14px;

}

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

padding:12px 14px;

border-radius:8px;

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

background:#0a0c2f;

color:#ffffff;

font-size:14px;

outline:none;

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

color:#aab0ff;

}

textarea{

height:110px;

resize:none;

}

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

.contact-form button{

padding:14px;

border:none;

border-radius:10px;

background:linear-gradient(90deg,#ff6fd8,#8a2be2,#5f7cff);

color:#ffffff;

font-size:15px;

font-weight:600;

cursor:pointer;

transition:0.3s;

}

.contact-form button:hover{

transform:translateY(-2px);

box-shadow:0 8px 25px rgba(120,70,255,0.6);

}

/* =========================
FORM MESSAGE
========================= */

#formMessage{

margin-top:10px;

display:none;

}

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

@media(max-width:900px){

.contact-wrapper{
grid-template-columns:1fr;
}

.contact-info{
text-align:center;
}

}

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

@media(max-width:600px){

.contact-section{
padding:50px 15px;
}

.section-title{
font-size:26px;
}

.contact-info{
padding:25px;
}

.contact-form{
padding:25px;
}

.manager-profile img{
width:90px;
height:90px;
}

.contact-form button{
font-size:14px;
padding:12px;
}

}