/*====================================
CONTACT PAGE
Subhan Shah Tech Solutions
====================================*/

/*====================================
PAGE HERO
====================================*/

.page-hero{

padding:170px 0 100px;

text-align:center;

}

.page-hero .hero-title{

font-size:clamp(2.4rem,5vw,3.5rem);

font-weight:700;

line-height:1.2;

color:var(--text-primary);

}

.page-hero .hero-description{

max-width:700px;

margin:20px auto 0;

color:var(--text-secondary);

line-height:1.9;

}

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

.contact-card{

height:100%;

padding:30px;

text-align:center;

background:rgba(255,255,255,.03);

border:1px solid rgba(212,175,55,.15);

border-radius:20px;

transition:all .4s ease;

}

.contact-card:hover{

transform:translateY(-8px);

border-color:var(--gold-primary);

box-shadow:

    0 15px 40px rgba(212,175,55,.15),

    0 0 20px rgba(212,175,55,.06);

}

.contact-card i{

display:inline-flex;

align-items:center;

justify-content:center;

width:65px;

height:65px;

margin-bottom:20px;

border-radius:18px;

background:rgba(212,175,55,.08);

color:var(--gold-primary);

font-size:2rem;

transition:all .4s ease;

}

.contact-card:hover i{

transform:scale(1.1) rotate(-5deg);

background:rgba(212,175,55,.15);

}

.contact-card h5{

margin-bottom:12px;

color:var(--text-primary);

}

.contact-card p{

margin:0;

color:var(--text-secondary);

line-height:1.7;

}

.contact-card a{

color:var(--text-secondary);

transition:var(--transition);

}

.contact-card a:hover{

color:var(--gold-primary);

}

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

.contact-form{

padding:40px;

background:rgba(255,255,255,.03);

border:1px solid rgba(212,175,55,.15);

border-radius:25px;

}

.contact-form .form-label{

color:var(--text-primary);

font-weight:600;

margin-bottom:8px;

}

.contact-form .form-control,

.contact-form .form-select{

width:100%;

min-height:58px;

padding:14px 18px;

border-radius:14px;

background:#111;

border:1px solid rgba(255,255,255,.08);

color:var(--text-primary);

transition:all .3s ease;

}

.contact-form .form-control::placeholder{

color:#777;

}

.contact-form .form-control:focus,

.contact-form .form-select:focus{

background:#111;

color:var(--text-primary);

border-color:var(--gold-primary);

box-shadow:0 0 0 3px rgba(212,175,55,.08);

}

.contact-form .form-select option{

background:#111;

color:#fff;

}

.contact-form textarea.form-control{

min-height:180px;

resize:vertical;

}

.contact-form .btn{

min-height:56px;

}

/*====================================
CONTACT LIST
====================================*/

.contact-list{

list-style:none;

padding:0;

margin:30px 0 0;

}

.contact-list li{

display:flex;

align-items:flex-start;

gap:10px;

margin-bottom:15px;

color:var(--text-secondary);

line-height:1.7;

}

.contact-list li i{

flex-shrink:0;

margin-top:5px;

color:var(--gold-primary);

}

.contact-list a{

color:var(--text-secondary);

transition:var(--transition);

}

.contact-list a:hover{

color:var(--gold-primary);

}

/*====================================
GOOGLE MAP
====================================*/

.map-wrapper{

overflow:hidden;

min-height:400px;

border:1px solid rgba(212,175,55,.15);

border-radius:25px;

}

.map-wrapper iframe{

display:block;

width:100%;

min-height:400px;

border:0;

}

/*====================================
FAQ
====================================*/

.accordion-item{

margin-bottom:15px;

overflow:hidden;

background:#111;

border:1px solid rgba(212,175,55,.12);

border-radius:15px!important;

}

.accordion-button{

padding:20px 25px;

background:#111;

color:var(--text-primary);

font-weight:600;

box-shadow:none!important;

}

.accordion-button:hover{

color:var(--gold-primary);

}

.accordion-button:not(.collapsed){

background:var(--gold-primary);

color:#000;

}

.accordion-button:not(.collapsed):hover{

color:#000;

}

.accordion-body{

padding:20px 25px;

background:#111;

color:var(--text-secondary);

line-height:1.8;

}

/*====================================
CONTACT CTA
====================================*/

.contact-cta{

padding:100px 0;

background:var(--bg-primary);

}

.contact-cta .cta-box{

position:relative;

overflow:hidden;

padding:70px 40px;

text-align:center;

border-radius:30px;

background:

    linear-gradient(

        135deg,

        rgba(255,255,255,.03),

        rgba(212,175,55,.04)

    );

border:1px solid rgba(212,175,55,.15);

}

.contact-cta .cta-box::before{

content:"";

position:absolute;

top:-150px;

right:-100px;

width:350px;

height:350px;

border-radius:50%;

background:rgba(212,175,55,.06);

pointer-events:none;

}

.contact-cta .cta-box > *{

position:relative;

z-index:1;

}

.contact-cta .cta-box h2{

color:var(--text-primary);

font-size:clamp(2rem,4vw,2.8rem);

line-height:1.2;

}

.contact-cta .cta-box p{

max-width:650px;

margin:20px auto 30px;

color:var(--text-secondary);

line-height:1.8;

}

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

@media(max-width:991px){

.page-hero{

    padding:140px 0 80px;

}

.contact-form{

    padding:30px;

}

.contact-cta{

    padding:80px 0;

}

.contact-cta .cta-box{

    padding:55px 30px;

}

}

@media(max-width:767px){

.page-hero{

    padding:120px 0 70px;

}

.page-hero .hero-title{

    font-size:2rem;

}

.page-hero .hero-description{

    font-size:.95rem;

}

.contact-card{

    padding:25px 20px;

}

.contact-form{

    padding:25px 20px;

}

.map-wrapper,

.map-wrapper iframe{

    min-height:320px;

}

.contact-cta{

    padding:70px 0;

}

.contact-cta .cta-box{

    padding:45px 20px;

    border-radius:22px;

}

.contact-cta .cta-box h2{

    font-size:2rem;

}

}

@media(prefers-reduced-motion:reduce){

.contact-card,

.contact-card i,

.contact-form .form-control,

.contact-form .form-select{

    transition:none;

}

}