/*=========================
IT INFRASTRUCTURE HERO
=========================*/

.infra-hero{

position:relative;
overflow:hidden;
background:#050505;
padding:130px 8%;
color:#fff;

}

.infra-hero .container{

display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:70px;

}

.section-tag{

display:inline-block;
padding:10px 22px;
background:rgba(255,0,51,.08);
border:1px solid rgba(255,0,51,.25);
border-radius:50px;
color:#ff3b4f;
font-size:13px;
letter-spacing:2px;
margin-bottom:25px;

}

.hero-left h1{

font-size:68px;
line-height:1.05;
font-weight:800;
margin-bottom:25px;

}

.hero-left h1 span{

color:#ff3045;

}

.hero-left p{

font-size:18px;
line-height:1.9;
color:#b8b8b8;
margin-bottom:45px;
max-width:620px;

}

.hero-buttons{

display:flex;
gap:20px;
margin-bottom:60px;

}

.btn-red{

padding:17px 42px;
background:#d62027;
color:white;
border-radius:50px;
font-weight:700;
transition:.4s;
text-decoration:none;

}

.btn-red:hover{

background:white;
color:#d62027;
transform:translateY(-8px);

}

.btn-outline{

padding:17px 42px;
border:1px solid rgba(255,255,255,.15);
border-radius:50px;
color:white;
text-decoration:none;
transition:.4s;

}

.btn-outline:hover{

background:white;
color:black;

}

.hero-stats{

display:flex;
gap:30px;

}

.stat-box{

background:#101010;
padding:30px;
border-radius:20px;
width:170px;
border:1px solid rgba(255,255,255,.08);
transition:.4s;

}

.stat-box:hover{

transform:translateY(-12px);
border-color:#d62027;
box-shadow:0 20px 50px rgba(214,32,39,.25);

}

.stat-box h2{

font-size:42px;
color:#ff3045;

}

.stat-box p{

margin-top:8px;
font-size:15px;
color:#b5b5b5;

}

.hero-right{

position:relative;
height:700px;

}

.main-image{

position:absolute;
right:20px;
top:60px;
width:470px;
height:600px;
overflow:hidden;
border-radius:35px;
box-shadow:0 40px 90px rgba(0,0,0,.6);

}

.main-image img{

width:100%;
height:100%;
object-fit:cover;
transition:.6s;

}

.main-image:hover img{

transform:scale(1.08);

}

.floating-card{

position:absolute;
width:180px;
height:180px;
overflow:hidden;
border-radius:25px;
border:1px solid rgba(255,255,255,.12);
box-shadow:0 25px 60px rgba(0,0,0,.5);
animation:float 5s ease-in-out infinite;

}

.floating-card img{

width:100%;
height:100%;
object-fit:cover;

}

.card1{

top:0;
left:20px;

}

.card2{

bottom:70px;
left:80px;
animation-delay:1.5s;

}

.card3{

top:220px;
right:-20px;
animation-delay:3s;

}

.hero-bg-circle{

position:absolute;
border-radius:50%;
filter:blur(100px);

}

.hero-bg-circle.one{

width:450px;
height:450px;
background:#d62027;
left:-180px;
top:-120px;
opacity:.15;

}

.hero-bg-circle.two{

width:350px;
height:350px;
background:#003bff;
right:-100px;
bottom:-50px;
opacity:.12;

}

.hero-bg-circle.three{

width:250px;
height:250px;
background:#d62027;
left:45%;
top:45%;
opacity:.08;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@media(max-width:992px){

.infra-hero .container{

grid-template-columns:1fr;

}

.hero-left h1{

font-size:46px;

}

.hero-right{

height:650px;
margin-top:50px;

}

.main-image{

position:relative;
width:100%;
right:auto;
top:auto;
height:500px;

}

.floating-card{

display:none;

}

.hero-stats{

flex-wrap:wrap;

}

}

/*==========================
INFRASTRUCTURE SERVICES
===========================*/

.infra-services{

background:#080808;
padding:120px 8%;
position:relative;

}

.section-heading{

text-align:center;
margin-bottom:70px;

}

.section-heading span{

color:#d62027;
letter-spacing:2px;
font-size:14px;
font-weight:600;

}

.section-heading h2{

font-size:52px;
margin:20px 0;
color:#fff;

}

.section-heading p{

max-width:760px;
margin:auto;
font-size:18px;
color:#b8b8b8;
line-height:1.8;

}

.infra-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;

}

.infra-card{

background:#121212;
border-radius:28px;
overflow:hidden;
position:relative;
transition:.45s;
border:1px solid rgba(255,255,255,.08);

}

.infra-card:hover{

transform:translateY(-18px);
border-color:#d62027;
box-shadow:0 35px 70px rgba(214,32,39,.25);

}

.infra-card img{

width:100%;
height:220px;
object-fit:cover;
transition:.6s;

}

.infra-card:hover img{

transform:scale(1.08);

}

.card-icon{

position:absolute;
top:20px;
right:20px;
width:65px;
height:65px;
background:#d62027;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
font-size:24px;
color:white;
box-shadow:0 10px 30px rgba(214,32,39,.4);
z-index:5;
transition:.4s;

}

.infra-card:hover .card-icon{

transform:rotate(360deg);

}

.infra-card h3{

padding:28px 28px 10px;
color:#fff;
font-size:28px;

}

.infra-card p{

padding:0 28px;
line-height:1.8;
color:#b8b8b8;
font-size:16px;

}

.infra-card a{

display:inline-block;
margin:25px 28px 35px;
color:#ff4d5d;
font-weight:600;
text-decoration:none;
transition:.4s;

}

.infra-card:hover a{

transform:translateX(10px);

}

/* glowing border */

.infra-card::before{

content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:3px;
background:linear-gradient(90deg,transparent,#ff3045,transparent);
transition:1s;

}

.infra-card:hover::before{

left:100%;

}

/* Responsive */

@media(max-width:1100px){

.infra-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.infra-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:38px;

}

}

/*==========================
ARCHITECTURE SECTION
==========================*/

.architecture{

background:#050505;
padding:140px 8%;
position:relative;
overflow:hidden;

}

.architecture-title{

text-align:center;
margin-bottom:80px;

}

.architecture-title span{

color:#d62027;
letter-spacing:3px;
font-size:14px;
font-weight:700;

}

.architecture-title h2{

font-size:60px;
color:#fff;
margin:25px 0;

}

.architecture-title p{

max-width:760px;
margin:auto;
color:#a7a7a7;
font-size:18px;
line-height:1.8;

}

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

.architecture-wrapper{

position:relative;
height:700px;

}

.center-circle{

position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:180px;
height:180px;
background:#111;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
border:2px solid #d62027;
box-shadow:0 0 50px rgba(214,32,39,.4);

}

.center-circle img{

width:90px;

}

.pulse{

position:absolute;
width:180px;
height:180px;
border-radius:50%;
border:2px solid rgba(214,32,39,.3);

animation:pulse 3s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);
opacity:1;

}

100%{

transform:scale(1.8);
opacity:0;

}

}

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

.node{

position:absolute;
width:210px;
height:210px;
background:#101010;
border-radius:28px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
transition:.45s;
border:1px solid rgba(255,255,255,.08);

}

.node:hover{

transform:translateY(-15px) scale(1.05);

border-color:#d62027;

box-shadow:0 20px 60px rgba(214,32,39,.25);

}

.node i{

font-size:46px;
color:#ff3045;
margin-bottom:20px;

transition:.5s;

}

.node:hover i{

transform:rotate(360deg);

}

.node h4{

color:white;
font-size:22px;

}

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

.node1{

top:0;
left:10%;

}

.node2{

top:0;
right:10%;

}

.node3{

top:40%;
left:0;

}

.node4{

top:40%;
right:0;

}

.node5{

bottom:0;
left:12%;

}

.node6{

bottom:0;
right:12%;

}

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

.lines{

position:absolute;
width:100%;
height:100%;
top:0;
left:0;

}

.lines line{

stroke:#d62027;
stroke-width:2;
stroke-dasharray:12;
animation:flow 4s linear infinite;

}

@keyframes flow{

from{

stroke-dashoffset:40;

}

to{

stroke-dashoffset:0;

}

}

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

.architecture::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:#d62027;

filter:blur(180px);

opacity:.08;

top:-150px;

left:-120px;

}

.architecture::after{

content:"";

position:absolute;

width:400px;

height:400px;

background:#004cff;

filter:blur(150px);

opacity:.08;

right:-100px;

bottom:-100px;

}

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

@media(max-width:991px){

.architecture-wrapper{

height:auto;

display:grid;

grid-template-columns:1fr;

gap:30px;

}

.center-circle{

position:relative;

transform:none;

margin:auto;

left:auto;

top:auto;

}

.node{

position:relative;

width:100%;

}

.lines{

display:none;

}

.architecture-title h2{

font-size:42px;

}

}