/*====================================================

CONTACT.CSS
PART - 1

AMROS PROJECTS LLP

Sections

1. Contact Info
2. Contact Cards
3. Contact Left
4. Contact Features
5. Social Icons

======================================================*/


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

.contact-info{

padding:60px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.contact-info::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#F2F8FD;

}

.contact-info::after{

content:"";

position:absolute;

bottom:-150px;

left:-150px;

width:320px;

height:320px;

border-radius:50%;

background:#EDF5FC;

}



/*=========================================
CONTACT CARD
=========================================*/

.contact-card{

background:#fff;

padding:17px;

border-radius:30px;

text-align:center;

box-shadow:0 20px 55px rgba(0,0,0,.06);

transition:.4s;

height:100%;

position:relative;

overflow:hidden;

z-index:2;

}

.contact-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:0;

background:linear-gradient(135deg,#005BAA,#0A84FF);

transition:.45s;

z-index:-1;

}

.contact-card:hover::before{

height:100%;

}

.contact-card:hover{

transform:translateY(-10px);

}

.contact-card:hover h4,

.contact-card:hover p,

.contact-card:hover .contact-icon{

color:#fff;

}

.contact-card:hover .contact-icon{

background:#ffffff22;

}

.contact-icon{

width:90px;

height:90px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#EDF6FF;

border-radius:50%;

margin-bottom:25px;

font-size:34px;

color:#005BAA;

transition:.4s;

}

.contact-card h4{

font-size:26px;

margin-bottom:15px;

transition:.35s;

}

.contact-card p{

font-size:16px;

line-height:1.9;

color:#667085;

margin:0;

transition:.35s;

}



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

.contact-section{

padding:60px 0;

background:#F8FBFD;

}

.contact-left{

padding-right:50px;

}

.section-tag{

display:inline-block;

padding:10px 24px;

background:#EAF4FF;

color:#005BAA;

font-size:13px;

font-weight:700;

border-radius:50px;

letter-spacing:1px;

margin-bottom:25px;

}

.contact-left h2{

font-size:28px;

line-height:1.2;

margin-bottom:25px;

}

.contact-left p{

font-size:17px;

line-height:1.9;

color:#667085;

margin-bottom:40px;

}



/*=========================================
FEATURE BOX
=========================================*/

.contact-feature{

display:flex;

align-items:flex-start;

gap:20px;

margin-bottom:30px;

padding:25px;

background:#fff;

border-radius:24px;

box-shadow:0 15px 45px rgba(0,0,0,.05);

transition:.35s;

}

.contact-feature:hover{

transform:translateX(10px);

}

.contact-feature .feature-icon{

width:70px;

height:70px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

font-size:28px;

flex-shrink:0;

}

.contact-feature h5{

font-size:22px;

margin-bottom:8px;

}

.contact-feature p{

margin:0;

font-size:15px;

color:#667085;

}



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

.contact-social{

display:flex;

gap:15px;

margin-top:40px;

}

.contact-social a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#fff;

color:#005BAA;

font-size:20px;

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

transition:.35s;

}

.contact-social a:hover{

background:#005BAA;

color:#fff;

transform:translateY(-6px);

}
/*====================================================

CONTACT.CSS
PART - 2

Sections

1. Contact Form
2. Form Controls
3. Business Hours
4. Google Map
5. Buttons

======================================================*/


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

.contact-form-box{

background:#fff;

padding:50px;

border-radius:35px;

box-shadow:0 25px 70px rgba(0,0,0,.08);

position:relative;

overflow:hidden;

}

.contact-form-box::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:260px;

height:260px;

border-radius:50%;

background:#EDF6FF;

}

.contact-form-box>*{

position:relative;

z-index:2;

}

.contact-form-box h3{

font-size:28px;

margin-bottom:15px;

}

.contact-form-box p{

font-size:16px;

color:#667085;

margin-bottom:35px;

}



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

.contact-form-box label{

display:block;

font-size:15px;

font-weight:600;

margin-bottom:10px;

color:#344054;

}



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

.contact-form-box .form-control,

.contact-form-box .form-select{

height:60px;

border-radius:16px;

border:1px solid #E5EDF5;

padding:0 20px;

font-size:15px;

background:#FAFCFE;

box-shadow:none;

transition:.35s;

}

.contact-form-box textarea.form-control{

height:auto;

padding:18px 20px;

resize:none;

min-height:180px;

}

.contact-form-box .form-control:focus,

.contact-form-box .form-select:focus{

border-color:#005BAA;

background:#fff;

box-shadow:0 0 0 .2rem rgba(0,91,170,.10);

}



/*=========================================
PLACEHOLDER
=========================================*/

.contact-form-box input::placeholder,

.contact-form-box textarea::placeholder{

color:#98A2B3;

}



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

.contact-form-box .btn-primary-custom{

padding:18px 40px;

display:inline-flex;

align-items:center;

gap:12px;

border:none;

cursor:pointer;

}

.contact-form-box .btn-primary-custom i{

font-size:18px;

}



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

.map-section{

position:relative;

overflow:hidden;

}

.map-section iframe{

display:block;

filter:grayscale(10%);

}



/*=========================================
BUSINESS HOURS
=========================================*/

.business-hours{

padding:120px 0;

background:#F8FBFD;

}

.hours-card{

background:#fff;

padding:45px;

border-radius:30px;

box-shadow:0 20px 55px rgba(0,0,0,.06);

height:100%;

transition:.35s;

}

.hours-card:hover{

transform:translateY(-8px);

}

.hours-card h3{

font-size:32px;

margin-bottom:25px;

}

.hours-card p{

font-size:16px;

color:#667085;

line-height:1.8;

margin-bottom:30px;

}

.hours-card ul{

list-style:none;

margin:0;

padding:0;

}

.hours-card ul li{

display:flex;

justify-content:space-between;

align-items:center;

padding:16px 0;

border-bottom:1px solid #EEF2F7;

font-size:16px;

}

.hours-card ul li:last-child{

border:none;

}

.hours-card span{

font-weight:600;

color:#344054;

}

.hours-card strong{

font-weight:700;

color:#005BAA;

}



/*=========================================
BUTTON GROUP
=========================================*/

.hours-card .btn-primary-custom,

.hours-card .btn-outline-custom{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 28px;

margin-top:8px;

}

.hours-card .btn-outline-custom{

border:2px solid #005BAA;

color:#005BAA;

background:#fff;

border-radius:50px;

transition:.35s;

}

.hours-card .btn-outline-custom:hover{

background:#005BAA;

color:#fff;

}



/*=========================================
INPUT VALIDATION
=========================================*/

.form-control.is-valid,

.form-select.is-valid{

border-color:#16A34A;

}

.form-control.is-invalid,

.form-select.is-invalid{

border-color:#DC2626;

}



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

.form-message{

display:none;

padding:16px 20px;

border-radius:16px;

margin-top:20px;

font-weight:600;

}

.form-message.success{

display:block;

background:#ECFDF3;

color:#027A48;

border:1px solid #ABEFC6;

}

.form-message.error{

display:block;

background:#FEF3F2;

color:#B42318;

border:1px solid #FECDCA;

}

/*====================================================

CONTACT.CSS
PART - 3 (FINAL)

Sections

1. FAQ
2. CTA
3. Footer Adjustments
4. Back To Top
5. WhatsApp
6. Responsive
7. Animation

======================================================*/


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

.faq-section{

padding:60px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.faq-section::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#EDF6FF;

}

.faq-section .section-heading{

margin-bottom:60px;

}

.accordion{

border:none;

}

.accordion-item{

border:none;

margin-bottom:20px;

border-radius:24px !important;

overflow:hidden;

box-shadow:0 15px 45px rgba(0,0,0,.06);

}

.accordion-button{

padding:26px 30px;

font-size:18px;

font-weight:700;

color:#081C34;

background:#fff;

box-shadow:none !important;

}

.accordion-button:not(.collapsed){

background:linear-gradient(135deg,#005BAA,#0A84FF);

color:#fff;

}

.accordion-button::after{

filter:brightness(0);

}

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

filter:brightness(100);

}

.accordion-body{

padding:30px;

font-size:16px;

line-height:1.9;

color:#667085;

background:#fff;

}



/*=========================================
CTA SECTION
=========================================*/

.cta-section{

padding:0 0 120px;

background:#fff;

}

.cta-box{

background:linear-gradient(135deg,#005BAA,#0A84FF);

border-radius:35px;

padding:70px;

position:relative;

overflow:hidden;

box-shadow:0 30px 80px rgba(0,91,170,.22);

}

.cta-box::before{

content:"";

position:absolute;

width:350px;

height:350px;

border-radius:50%;

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

right:-120px;

top:-120px;

}

.cta-box::after{

content:"";

position:absolute;

width:250px;

height:250px;

border-radius:50%;

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

left:-80px;

bottom:-80px;

}

.cta-box>*{

position:relative;

z-index:2;

}

.cta-box h2{

font-size:48px;

color:#fff;

margin-bottom:18px;

}

.cta-box p{

font-size:18px;

color:#EAF4FF;

margin:0;

}

.cta-box .btn-primary-custom{

background:#fff;

color:#005BAA;

box-shadow:none;

}

.cta-box .btn-primary-custom:hover{

background:#EEF7FF;

}



/*=========================================
FOOTER CONTACT
=========================================*/

.footer ul{

list-style:none;

margin:0;

padding:0;

}

.footer ul li{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:15px;

color:#CBD5E1;

}

.footer ul li i{

color:#4FC3FF;

font-size:16px;

margin-top:3px;

}



/*=========================================
BACK TO TOP
=========================================*/

.back-top{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#005BAA;

color:#fff;

font-size:20px;

cursor:pointer;

box-shadow:0 15px 40px rgba(0,91,170,.30);

transition:.35s;

z-index:999;

}

.back-top:hover{

transform:translateY(-6px);

background:#003E73;

}



/*=========================================
WHATSAPP
=========================================*/

.whatsapp-btn{

position:fixed;

left:30px;

bottom:30px;

width:60px;

height:60px;

display:flex;

align-items:center;

justify-content:center;

background:#25D366;

color:#fff;

border-radius:50%;

font-size:28px;

box-shadow:0 15px 40px rgba(37,211,102,.35);

transition:.35s;

z-index:999;

text-decoration:none;

}

.whatsapp-btn:hover{

color:#fff;

transform:scale(1.08);

}



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

@media(max-width:991px){

.contact-left{

padding-right:0;

margin-bottom:50px;

}

.contact-left h2{

font-size:42px;

}

.contact-form-box{

padding:35px;

}

.hours-card{

padding:35px;

}

.cta-box{

padding:50px 35px;

text-align:center;

}

.cta-box h2{

font-size:38px;

}

}



@media(max-width:768px){

.contact-info,

.contact-section,

.business-hours,

.faq-section{

padding:90px 0;

}

.contact-card,

.contact-feature,

.hours-card{

padding:30px;

}

.contact-left h2{

font-size:34px;

}

.contact-form-box{

padding:30px 25px;

}

.contact-form-box h3{

font-size:30px;

}

.contact-form-box .btn-primary-custom{

width:100%;

justify-content:center;

}

.hours-card ul li{

flex-direction:column;

align-items:flex-start;

gap:6px;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:30px;

}

.cta-box p{

font-size:16px;

}

.back-top{

width:48px;

height:48px;

right:18px;

bottom:18px;

}

.whatsapp-btn{

width:52px;

height:52px;

left:18px;

bottom:18px;

font-size:24px;

}

}



@media(max-width:576px){

.contact-left h2{

font-size:28px;

}

.contact-card h4{

font-size:22px;

}

.contact-form-box{

padding:22px;

}

.contact-form-box .form-control,

.contact-form-box .form-select{

height:54px;

}

.contact-social{

justify-content:center;

}

.contact-social a{

width:48px;

height:48px;

}

.accordion-button{

font-size:16px;

padding:20px;

}

.accordion-body{

padding:20px;

}

.cta-box{

padding:35px 20px;

}

.cta-box h2{

font-size:26px;

}

.cta-box .btn-primary-custom{

width:100%;

}

}



/*=========================================
ANIMATION
=========================================*/

.contact-card,

.contact-feature,

.hours-card,

.contact-form-box,

.accordion-item{

transition:all .35s ease;

will-change:transform;

}

.contact-card:hover,

.contact-form-box:hover,

.hours-card:hover{

transform:translateY(-8px);

}

.contact-card:hover .contact-icon{

transform:rotate(10deg) scale(1.08);

}