/* Contact Page CSS */

.contact-hero{

background:
radial-gradient(circle at top right,#7c3aed 0,#5b21b6 35%,#3b0ca3 100%);

position:relative;

overflow:hidden;
 min-height:500px;
    display:flex;
    align-items:center;
    overflow:hidden;

}
.contact-hero .circle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    z-index:0;
}
.contact-hero .container{

position:relative;

z-index:2;

}

.contact-hero .one{
    width:350px;
    height:350px;
    top:-120px;
    right:-120px;
}

.contact-hero .two{
    width:220px;
    height:220px;
    bottom:-80px;
    right:250px;
}

.contact-hero .three{
    width:90px;
    height:90px;
    top:120px;
    right:480px;
}

.contact-info{
    padding:80px 0;
    background:#f8f9ff;
}

.contact-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    text-align:center;
    transition:.3s;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    height:100%;
}

.contact-card:hover{
    transform:translateY(-8px);
}

.icon-box{
    width:75px;
    height:75px;
    border-radius:50%;
    background:#5B21B6;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin:0 auto 20px;
}
.submit-btn{
    background:#5B21B6;
    color:#fff;
    border:none;
    padding:16px 40px;
    border-radius:50px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
     min-width:260px;
    height:58px;
}

.submit-btn:hover{
    background:#4318a8;
    transform:translateY(-3px);
}
.contact-form-section{
    padding:100px 0;
    background:#f8f9ff;
}

.contact-form-box,
.office-card{
    background:#fff;
    border-radius:25px;
    padding:40px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.form-control{
    height:55px;
    border-radius:12px;
    border:1px solid #ddd;
    box-shadow:none;
}

textarea.form-control{
    height:180px;
}

.form-control:focus{
    border-color:#5B21B6;
    box-shadow:0 0 0 4px rgba(91,33,182,.15);
}
.office-address{

background:#f8f8ff;

padding:20px;

border-radius:15px;

margin-bottom:25px;

}

.office-address h5{

font-weight:700;

margin-bottom:10px;

}

.office-address p{

margin-bottom:15px;

color:#666;

}

.btn-map{

display:block;

width:100%;

background:#5B21B6;

color:#fff;

text-align:center;

padding:14px;

border-radius:12px;

text-decoration:none;

font-weight:600;

transition:.3s;

margin-top:15px;

}

.btn-map:hover{

background:#4318a8;

color:#fff;

transform:translateY(-2px);

}

.btn-whatsapp{

display:block;

width:100%;

background:#25D366;

color:#fff;

text-align:center;

padding:14px;

border-radius:12px;

text-decoration:none;

font-weight:600;

margin-top:15px;

transition:.3s;

}

.btn-whatsapp:hover{

background:#1ea952;

color:#fff;

}
.contact-action-card{
    display:flex;
    align-items:center;
    gap:18px;
    background:#f8f8ff;
    padding:18px 20px;
    border-radius:15px;
    margin-top:18px;
    transition:.3s;
}

.contact-action-card:hover{
    background:#ede8ff;
    transform:translateY(-3px);
}

.contact-action-card i{
    width:55px;
    height:55px;
    background:#5B21B6;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    flex-shrink:0;
}

.contact-action-card small{
    display:block;
    color:#777;
    font-weight:600;
    margin-bottom:4px;
}

.contact-action-card a{
    text-decoration:none;
    font-weight:600;
    color:#222;
    font-size:17px;
}

.contact-action-card span{
    color:#222;
    font-size:16px;
}
.contact-action-card{

text-decoration:none;

color:#222;

}

.contact-action-card:hover{

color:#222;

}
.hero-right{
    position:relative;
}

.hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image-box{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
.contact-image{
    width:500px;      /* 800, 900, 1000 try kar sakte ho */
    max-width:none;
    transform:translateX(120px);   /* right shift */
    animation:float 4s ease-in-out infinite;
    filter:drop-shadow(0 25px 50px rgba(0,0,0,.25));
}

@keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
}