/*==============================
        Contact Page
==============================*/

.contact-page{
max-width:1200px;
margin:0 auto;
padding:0 20px 90px;
}

/*==============================
        Banner
==============================*/

.contact-header{
position:relative;
overflow:hidden;
padding:50px 40px;
margin:20px 0 70px;
border-radius:30px;
text-align:center;

background:
radial-gradient(circle at top right,#f8efe5 0,#f4e6d6 35%,transparent 36%),
radial-gradient(circle at bottom left,#efe0cf 0,#ead7c4 30%,transparent 31%),
linear-gradient(135deg,#fbf7f2,#f2e4d4);

border:1px solid var(--border);
}

.contact-header::before{

content:"";
position:absolute;
left:-120px;
top:-120px;
width:300px;
height:300px;
border-radius:50%;
background:rgba(255,255,255,.35);
}

.contact-header::after{
content:"";
position:absolute;
right:-70px;
bottom:-70px;
width:180px;
height:180px;
border-radius:50%;
background:rgba(255,255,255,.35);

}

.contact-subtitle{
display:inline-block;
letter-spacing:4px;
font-size:13px;
color:var(--primary);
margin-bottom:18px;
font-weight:700;
}

.contact-header h1{
font-size:50px;
margin:0 0 18px;
color:var(--title);

}

.contact-header p{

max-width:700px;
margin:auto;

font-size:17px;

line-height:2.2;

color:var(--text);

}

/*==============================
      White Contact Box
==============================*/

.contact-wrapper{
background:#fff;
border:1px solid var(--border);
border-radius:28px;
padding:60px;
box-shadow:0 20px 45px rgba(0,0,0,.05);
}

.section-title{
text-align:center;
margin-bottom:45px;
}

.section-title span{
display:inline-block;
color:var(--primary);
font-size:13px;
letter-spacing:3px;
margin-bottom:12px;
}

.section-title h2{
font-size:40px;
margin:15px;
color:var(--title);

}

.section-title p{
max-width:620px;
margin:auto;
line-height:2;
color:var(--text);
}

/*==============================
      Contact List
==============================*/
.contact-wrapper{
display:grid;
grid-template-columns:1fr 420px;
gap:80px;
align-items:center;
padding:70px;
background:#fff;
border:1px solid var(--border);
border-radius:30px;
margin:70px 0;
}

.contact-left{
display:flex;
flex-direction:column;
gap:25px;
}

.contact-row{
display:flex;
align-items:center;
gap:20px;
padding-bottom:22px;
border-bottom:1px solid #eee;

}

.contact-row:last-child{
border:none;
padding-bottom:0;

}

.contact-row-icon{
width:62px;
height:62px;
border-radius:18px;
background:#f7f2eb;
display:flex;
justify-content:center;
align-items:center;
color:var(--primary);
flex-shrink:0;
}

.contact-row-icon svg{
width:28px;
height:28px;
}

.contact-row span{

display:block;

font-size:13px;

color:#9a8d80;

margin-bottom:8px;

}

.contact-row a{
font-size:24px;
font-weight:700;
color:var(--title);
text-decoration:none;
transition:.3s;
}

.contact-row a:hover{
color:var(--primary);
}

.contact-right{
text-align:right;
}

.contact-mini-title{
display:inline-block;
font-size:13px;
letter-spacing:2px;
text-transform:uppercase;
color:var(--primary);
margin-bottom:18px;
}

.contact-right h2{
font-size:32px;
margin-bottom:20px;
color:var(--title);
}

.contact-right p{
font-size:16px;
line-height:2.2;
color:var(--text);
margin-bottom:35px;
}

.contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 34px;
background:var(--primary);
color:#fff;
border-radius:50px;
text-decoration:none;
font-weight:700;
transition:.3s;
}

.contact-btn:hover{
transform:translateY(-4px);
box-shadow:0 12px 28px rgba(0,0,0,.12);
}

@media(max-width:992px){

.contact-wrapper{

grid-template-columns:1fr;

padding:40px;
gap:45px;

}

.contact-row a{

font-size:20px;

}

.contact-right{

text-align:center;

}
.contact-right h2{
font-size:26px;

}
}
/* SOCIAL BUTTONS */
  .social-buttons-section { max-width: 1200px; margin: 60px auto; padding: 40px 20px; }
  .social-buttons-container.creative {
   display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 24px;
  }
  .social-card { border-radius: 16px; padding: 20px; transition: transform 0.2s ease; text-align: center; }
  .social-card a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .social-card i { font-size: 28px; color: #fff; }
  .social-text { font-size: 15px; font-weight: 700; color: #fff; }
  .social-card.instagram { background: linear-gradient(135deg, #f09433, #e1306c, #833ab4); }
  .social-card.whatsapp { background: #25d366; }
  .social-card.telegram { background: #26a9e0; }
  .social-card.bale { background: #00C19B; }
  .social-card.robika { background: #ff51a2bf; }
  .social-card:hover { transform: translateY(-4px); }

/*==============================
        Responsive
==============================*/

@media(max-width:991px){

.contact-wrapper{

padding:35px;

}

.contact-header h1{

font-size:42px;

}

.social-grid{

grid-template-columns:1fr;

}

.contact-item{

padding:22px;

}

.contact-item-content strong{

font-size:22px;

}

}

@media(max-width:767px){

.contact-page{

padding:0 15px 60px;

}

.contact-header{

padding:60px 25px;

}

.contact-header h1{

font-size:34px;

}

.contact-header p{

font-size:15px;

}

.section-title h2{

font-size:22px;

}

.contact-item{

flex-direction:column;

text-align:center;

gap:20px;

}

.contact-item-content{

padding:0;

}

.contact-item-content strong{

font-size:22px;

}


 .social-buttons-container.creative { grid-template-columns: repeat(1, 1fr); }
}