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

INDUSTRIES.CSS
PART - 1

AMROS PROJECTS LLP

Sections

1. Intro
2. Intro Image
3. Industry Grid
4. Industry Card
5. Industry Button
6. Statistics

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


/*=========================================
INTRO
=========================================*/

.industries-intro{

padding:60px 0;

background:#ffffff;

position:relative;

overflow:hidden;

}

.industries-intro::before{

content:"";

position:absolute;

right:-180px;

top:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#EEF7FF;

}

.industries-intro::after{

content:"";

position:absolute;

left:-150px;

bottom:-120px;

width:300px;

height:300px;

border-radius:50%;

background:#F6FAFD;

}



/*=========================================
INTRO IMAGE
=========================================*/

.intro-image{

position:relative;

overflow:hidden;

border-radius:35px;

box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.intro-image img{

width:100%;

display:block;

transition:.6s;

}

.intro-image:hover img{

transform:scale(1.08);

}



/*=========================================
GRID
=========================================*/

.industries-grid{

padding:60px 0;

background:#F8FBFD;

}

.industries-grid .section-heading{

margin-bottom:60px;

}



/*=========================================
INDUSTRY CARD
=========================================*/

.industry-card{

background:#fff;

border-radius:30px;

padding:20px;

height:100%;

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

transition:.4s;

position:relative;

overflow:hidden;

}

.industry-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:0;

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

transition:.45s;

z-index:0;

}

.industry-card>*{

position:relative;

z-index:2;

}

.industry-card:hover::before{

height:100%;

}

.industry-card:hover{

transform:translateY(-12px);

}



/*=========================================
ICON
=========================================*/

.industry-icon{

width:90px;

height:90px;

border-radius:24px;

display:flex;

align-items:center;

justify-content:center;

background:#EEF7FF;

color:#005BAA;

font-size:38px;

margin-bottom:28px;

transition:.35s;

}

.industry-card:hover .industry-icon{

background:#ffffff20;

color:#fff;

transform:rotate(8deg);

}



/*=========================================
TEXT
=========================================*/

.industry-card h3{

font-size:24px;

margin-bottom:16px;

transition:.35s;

}

.industry-card p{

font-size:16px;

line-height:1.8;

color:#667085;

margin-bottom:25px;

transition:.35s;

}

.industry-card ul{

list-style:none;

padding:0;

margin:0 0 30px;

}

.industry-card ul li{

display:flex;

align-items:center;

gap:10px;

margin-bottom:14px;

font-size:15px;

color:#344054;

transition:.35s;

}

.industry-card ul li i{

color:#0A84FF;

font-size:16px;

transition:.35s;

}



/*=========================================
HOVER TEXT
=========================================*/

.industry-card:hover h3,

.industry-card:hover p,

.industry-card:hover li,

.industry-card:hover li i{

color:#fff;

}



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

.industry-btn{

display:inline-flex;

align-items:center;

gap:12px;

padding:14px 28px;

background:#005BAA;

color:#fff;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:.35s;

}

.industry-btn:hover{

background:#fff;

color:#005BAA;

}

.industry-btn i{

transition:.35s;

}

.industry-btn:hover i{

transform:translateX(6px);

}



/*=========================================
STATS
=========================================*/

.industry-stats{

padding:60px 0;

background:#fff;

}

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

INDUSTRIES.CSS
PART - 2

Sections

1. Why Choose
2. Why Box
3. Process Timeline
4. CTA
5. Footer
6. Hover Effects

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


/*=========================================
WHY CHOOSE
=========================================*/

.why-industries{

padding:60px 0;

background:#F8FBFD;

position:relative;

overflow:hidden;

}

.why-industries::before{

content:"";

position:absolute;

right:-180px;

bottom:-180px;

width:420px;

height:420px;

border-radius:50%;

background:#EEF7FF;

}



/*=========================================
WHY IMAGE
=========================================*/

.why-image{

overflow:hidden;

border-radius:35px;

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

}

.why-image img{

width:100%;

display:block;

transition:.6s;

}

.why-image:hover img{

transform:scale(1.08);

}



/*=========================================
WHY BOX
=========================================*/

.why-box{

background:#fff;

padding:30px;

border-radius:24px;

text-align:center;

margin-bottom:25px;

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

transition:.35s;

height:100%;

}

.why-box:hover{

transform:translateY(-10px);

}

.why-box i{

font-size:42px;

color:#005BAA;

margin-bottom:18px;

display:block;

transition:.35s;

}

.why-box:hover i{

transform:scale(1.15);

}

.why-box h5{

font-size:22px;

margin:0;

}



/*=========================================
PROCESS
=========================================*/

.industry-process{

padding:60px 0;

background:#fff;

}

.industry-process .section-heading{

margin-bottom:60px;

}



/*=========================================
PROCESS CARD
=========================================*/

.process-card{

position:relative;

background:#F8FBFD;

padding:40px 30px;

border-radius:30px;

text-align:center;

height:100%;

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

transition:.35s;

overflow:hidden;

}

.process-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

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

}

.process-card:hover{

transform:translateY(-10px);

}



/*=========================================
PROCESS NUMBER
=========================================*/

.process-number{

width:80px;

height:80px;

margin:auto;

margin-bottom:25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

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

color:#fff;

font-size:28px;

font-weight:800;

box-shadow:0 18px 40px rgba(0,91,170,.25);

}

.process-card h4{

font-size:26px;

margin-bottom:15px;

}

.process-card p{

font-size:16px;

line-height:1.8;

color:#667085;

margin:0;

}



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

.project-cta{

/* padding:120px 0; */

background:#F8FBFD;

}

.project-cta-box{

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

padding:70px;

border-radius:35px;

overflow:hidden;

position:relative;

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

}

.project-cta-box::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:300px;

height:300px;

border-radius:50%;

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

}

.project-cta-box>*{

position:relative;

z-index:2;

}

.project-cta-box h2{

font-size:28px;

color:#fff;

margin-bottom:20px;

}

.project-cta-box p{

font-size:16px;

color:#EAF4FF;

line-height:1.8;

margin:0;

}

.project-cta-box .btn-primary-custom{

background:#fff;

color:#005BAA;

box-shadow:none;

}

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

background:#EEF7FF;

}



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

.footer ul{

list-style:none;

padding:0;

margin:0;

}

.footer ul li{

display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:16px;

color:#CBD5E1;

}

.footer ul li i{

color:#4FC3FF;

margin-top:4px;

}

.footer-logo{

max-width:180px;

margin-bottom:25px;

}



/*=========================================
HOVER EFFECTS
=========================================*/

.industry-card,

.why-box,

.process-card{

will-change:transform;

transition:all .35s ease;

}

.process-card:hover .process-number{

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

transition:.35s;

}

.industry-btn{

position:relative;

overflow:hidden;

}

.industry-btn::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.45s;

}

.industry-btn:hover::before{

left:100%;

}

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

INDUSTRIES.CSS
PART - 3 (FINAL)

Sections

1. Back To Top
2. WhatsApp
3. Card Reveal
4. Responsive
5. Utility
6. Animation
7. Performance

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


/*=========================================
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,.28);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.back-top.show{

opacity:1;

visibility:visible;

}

.back-top:hover{

background:#003E73;

transform:translateY(-6px);

}



/*=========================================
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;

text-decoration:none;

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

transition:.35s;

z-index:999;

}

.whatsapp-btn:hover{

color:#fff;

transform:scale(1.08);

}



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

.industry-card,

.why-box,

.process-card,

.counter-box{

opacity:1;

transform:translateY(0);

transition:

transform .45s ease,

opacity .45s ease,

box-shadow .35s ease;

}

.hidden{

opacity:0;

transform:translateY(40px);

}

.show{

opacity:1;

transform:translateY(0);

}



/*=========================================
IMAGE EFFECTS
=========================================*/

.intro-image,

.why-image{

overflow:hidden;

}

.intro-image img,

.why-image img{

transition:.7s;

}

.intro-image:hover img,

.why-image:hover img{

transform:scale(1.08);

}



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

@media(max-width:1199px){

.project-cta-box h2{

font-size:42px;

}

}



@media(max-width:991px){

.industries-intro,

.industries-grid,

.industry-stats,

.why-industries,

.industry-process,

.project-cta{

padding:90px 0;

}

.project-cta-box{

padding:50px 35px;

text-align:center;

}

.project-cta-box h2{

font-size:36px;

}

.why-image{

margin-bottom:50px;

}

}



@media(max-width:768px){

.industry-card{

padding:30px;

}

.industry-icon{

width:75px;

height:75px;

font-size:30px;

}

.industry-card h3{

font-size:24px;

}

.process-card{

padding:30px;

}

.process-number{

width:65px;

height:65px;

font-size:24px;

}

.project-cta-box{

padding:40px 25px;

}

.project-cta-box h2{

font-size:30px;

}

.project-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){

.industries-intro,

.industries-grid,

.industry-stats,

.why-industries,

.industry-process,

.project-cta{

padding:70px 0;

}

.industry-card{

padding:25px;

}

.industry-card ul li{

font-size:14px;

}

.why-box{

padding:25px;

}

.process-card{

padding:25px;

}

.process-card h4{

font-size:22px;

}

.project-cta-box{

padding:35px 20px;

}

.project-cta-box h2{

font-size:26px;

}

.project-cta-box .btn-primary-custom{

width:100%;

}

}



/*=========================================
UTILITY
=========================================*/

.radius-xl{

border-radius:35px;

}

.shadow-hover:hover{

box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.fade-up{

animation:fadeUp .6s ease forwards;

}



/*=========================================
KEYFRAMES
=========================================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*=========================================
PERFORMANCE
=========================================*/

.industry-card,

.why-box,

.process-card,

.counter-box,

.industry-btn{

will-change:transform;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}



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

END INDUSTRIES.CSS

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