/*==================================================
CONTACT PAGE
Hive Tech Media
==================================================*/

/*==============================
Page Hero
==============================*/

.page-hero{

padding:80px 0;

background:linear-gradient(180deg,#ffffff,#f5fbff);

text-align:center;

}

.page-hero h1{

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

font-weight:700;

color:var(--dark);

margin:15px 0;

}

.page-hero p{

max-width:700px;

margin:auto;

font-size:1.05rem;

line-height:1.9;

color:var(--text);

}

/*==============================
Contact Section
==============================*/

.contact-section{

padding:80px 0;

background:#fff;

}

/*==============================
Contact Form Card
==============================*/

.contact-card{

background:#fff;

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

border-radius:24px;

padding:40px;

box-shadow:0 10px 35px rgba(0,0,0,.05);

}

.card-header-custom{

margin-bottom:30px;

}

.card-header-custom h2{

font-size:2rem;

font-weight:700;

margin:10px 0;

color:var(--dark);

}

.card-header-custom p{

color:var(--text);

line-height:1.8;

}

/*==============================
Form
==============================*/

.contact-form .form-label{

font-weight:600;

margin-bottom:10px;

color:var(--dark);

}

.contact-form .form-label span{

color:#dc3545;

}

.contact-form .form-control,

.contact-form .form-select{

height:56px;

border-radius:14px;

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

padding:12px 18px;

font-size:15px;

box-shadow:none;

transition:.3s;

}

.contact-form textarea.form-control{

height:180px;

resize:none;

padding-top:16px;

}

.contact-form .form-control:focus,

.contact-form .form-select:focus{

border-color:var(--primary);

box-shadow:0 0 0 .15rem rgba(41,149,211,.15);

}

.contact-form button{

height:56px;

font-size:16px;

font-weight:600;

}

.contact-form button i{

margin-right:10px;

}

/*==============================
Map
==============================*/

.map-section{

padding:70px 0;

background:var(--bg);

}

.map-wrapper{

overflow:hidden;

border-radius:24px;

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

}

.map-wrapper iframe{

width:100%;

height:450px;

border:0;

display:block;

}

/*==============================
Business Hours
==============================*/

.business-hours{

padding:80px 0;

background:#fff;

}

.hours-card{

background:#fff;

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

border-radius:20px;

overflow:hidden;

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.hour-row{

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 25px;

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

}

.hour-row:last-child{

border-bottom:none;

}

.hour-row span{

font-weight:500;

color:var(--text);

}

.hour-row strong{

color:var(--dark);

}

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

.faq-section{

padding:80px 0;

background:var(--bg);

}

.accordion-item{

border:none;

border-radius:18px !important;

overflow:hidden;

margin-bottom:20px;

box-shadow:0 8px 25px rgba(0,0,0,.05);

}

.accordion-button{

font-weight:600;

padding:22px;

box-shadow:none !important;

}

.accordion-button:not(.collapsed){

background:#EAF6FD;

color:var(--primary);

}

.accordion-body{

line-height:1.8;

color:var(--text);

}

/*=========================================
CONTACT SIDEBAR
=========================================*/

.contact-sidebar{

display:flex;

flex-direction:column;

gap:25px;

}

/*=========================================
INFO CARD
=========================================*/

.info-card{

display:flex;

align-items:flex-start;

gap:18px;

padding:28px;

background:#fff;

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

border-radius:20px;

transition:.35s;

box-shadow:0 8px 30px rgba(0,0,0,.04);

}

.info-card:hover{

transform:translateY(-6px);

border-color:var(--primary);

box-shadow:0 18px 45px rgba(41,149,211,.12);

}

.info-icon{

width:65px;

height:65px;

flex-shrink:0;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:#EAF6FD;

}

.info-icon i{

font-size:24px;

color:var(--primary);

}

.info-card h4{

font-size:20px;

font-weight:600;

margin-bottom:10px;

color:var(--dark);

}

.info-card p{

margin:0;

line-height:1.8;

color:var(--text);

}

.info-card a{

text-decoration:none;

color:var(--text);

transition:.3s;

word-break:break-word;

}

.info-card a:hover{

color:var(--primary);

}

/*=========================================
QUICK CONTACT
=========================================*/

.quick-contact{

background:#fff;

border-radius:20px;

padding:30px;

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

box-shadow:0 8px 30px rgba(0,0,0,.04);

}

.quick-contact .btn-brand,

.quick-contact .btn-outline-brand{

width:100%;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

height:54px;

}

/*=========================================
SOCIAL BOX
=========================================*/

.social-box{

background:#fff;

padding:30px;

border-radius:20px;

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

box-shadow:0 8px 30px rgba(0,0,0,.04);

}

.social-box h5{

margin-bottom:20px;

font-size:20px;

font-weight:600;

color:var(--dark);

}

.social-icons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.social-icons a{

width:48px;

height:48px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

background:#EAF6FD;

color:var(--primary);

transition:.3s;

font-size:18px;

}

.social-icons a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

}

/*=========================================
BOTTOM CTA
=========================================*/

.contact-cta{

padding:80px 0;

background:linear-gradient(135deg,var(--dark),#24364F);

color:#fff;

margin-top:80px;

}

.contact-cta h2{

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

font-weight:700;

margin-bottom:15px;

color:#fff;

}

.contact-cta p{

margin:0;

font-size:1.05rem;

opacity:.9;

}

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

@media(max-width:991px){

.contact-section{

padding:60px 0;

}

.contact-card{

padding:30px;

}

.contact-sidebar{

margin-top:15px;

}

.info-card{

padding:24px;

}

.map-wrapper iframe{

height:350px;

}

.contact-cta{

text-align:center;

}

.contact-cta .btn-brand{

margin-top:30px;

display:inline-flex;

justify-content:center;

}

}

@media(max-width:767px){

.page-hero{

padding:60px 0;

}

.contact-card{

padding:25px 20px;

}

.info-card{

flex-direction:column;

text-align:center;

align-items:center;

}

.info-icon{

margin-bottom:10px;

}

.quick-contact{

padding:20px;

}

.social-box{

text-align:center;

}

.social-icons{

justify-content:center;

}

.hour-row{

flex-direction:column;

gap:8px;

text-align:center;

}

.map-wrapper iframe{

height:300px;

}

.contact-cta{

padding:60px 0;

}

}

@media(max-width:575px){

.contact-form .form-control,

.contact-form .form-select{

height:52px;

font-size:14px;

}

.contact-form textarea.form-control{

height:160px;

}

.card-header-custom h2{

font-size:1.8rem;

}

.info-card h4{

font-size:18px;

}

.social-icons a{

width:44px;

height:44px;

}

}