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


.hero{

padding-top:120px;
padding-bottom:10px;

}



.hero-card{


display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;


padding:50px;


border-radius:30px;


background:#ffffff;


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

0 5px 18px rgba(0,0,0,.05);


}



.hero-left{


max-width:600px;


}



.hero-left h1{


font-size:34px;


font-weight:800;


line-height:1.2;


margin-bottom:20px;


}



.hero-tagline{


font-size:15px;


color:#666;


margin-bottom:24px;


}



.hero-left p{


font-size:20px;


line-height:1.8;


margin-bottom:40px;


color:#333;


}



.hero-actions{


display:flex;


gap:20px;


flex-wrap:wrap;


}



.hero-right img{


width:100%;


border-radius:24px;


display:block;


}



@media(max-width:900px){


.hero-card{


grid-template-columns:1fr;


padding:30px;


}



.hero-left{


max-width:none;


}



.hero-left h1{


font-size:28px;


}



.hero-left p{


font-size:18px;


}



}

/* ==========================
   SERVICES PREVIEW
========================== */


.section-heading{

text-align:center;

max-width:700px;

margin:0 auto 50px;

}



.section-heading h2{

font-size:42px;

margin-bottom:15px;

}



.section-heading p{

color:#666;

}



.services-grid{


display:grid;

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

gap:30px;


}



.service-card{


padding:35px;


background:#fff;


border-radius:20px;


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


transition:.3s;


}



.service-card:hover{


transform:translateY(-8px);


}



.service-card h3{


margin-bottom:15px;


}



.service-card p{


color:#555;

margin-bottom:25px;


}



@media(max-width:900px){


.services-grid{

grid-template-columns:1fr;

}


}

/* ==========================
   WHY DATACORB
========================== */


.why-grid{


display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;


}



.why-content h2{


font-size:42px;

margin-bottom:20px;


}



.why-content p{


color:#555;

margin-bottom:30px;

font-size:18px;


}



.why-cards{


display:grid;

gap:20px;


}



.why-box{


padding:30px;


background:#ffffff;


border-radius:20px;


box-shadow:0 15px 35px rgba(0,0,0,0.08);


}



.why-box h3{


margin-bottom:10px;


}



.why-box p{


color:#666;


}



@media(max-width:900px){


.why-grid{


grid-template-columns:1fr;


}


}

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


.cta-box{


text-align:center;


padding:70px 40px;


border-radius:30px;


background:#111;


color:white;


}



.cta-box h2{


font-size:42px;


margin-bottom:20px;


}



.cta-box p{


font-size:18px;


opacity:.8;


margin-bottom:35px;


}



.cta-actions{


display:flex;


justify-content:center;


gap:20px;


flex-wrap:wrap;


}



.cta-box .btn{


background:white;


color:#111;


}



.cta-box .btn-outline{


background:transparent;


border:1px solid white;


color:white;


}



@media(max-width:768px){


.cta-box{


padding:45px 20px;


}


.cta-box h2{


font-size:32px;


}


}

/* ==========================
   INDUSTRIES
========================== */


.industries{


padding-top:40px;


}



.section-main-title{


text-align:center;


font-size:34px;


font-weight:800;


margin-bottom:18px;


}



.section-subtitle{


text-align:center;


font-size:15px;


color:#666;


margin-bottom:50px;


}



.industry-grid{


display:grid;


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


gap:18px;


}



.industry-box{


min-height:82px;


display:flex;


align-items:center;


justify-content:center;


text-align:center;


padding:18px;


background:#f7f7f7;


color:#111;


font-weight:700;


border:2px solid #111;


border-radius:10px;


transition:.25s;


cursor:default;


}



.industry-box:hover{


background:#222;


color:#fff;


}



.section-footer-text{


max-width:900px;


margin:45px auto 0;


text-align:center;


font-size:15px;


color:#666;


line-height:1.8;


}



@media(max-width:1000px){


.industry-grid{


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


}


}



@media(max-width:700px){


.industry-grid{


grid-template-columns:1fr;


}


}

/* ==========================
   CORE SERVICES
========================== */


.core-services{


padding-top:30px;


}



.core-grid{


display:grid;


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


gap:22px;


margin-top:50px;


}



.core-box{

background:#efefef;

padding:40px;

border-radius:14px;

min-height:240px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

box-shadow:

0 8px 18px rgba(0,0,0,.04),

0 2px 8px rgba(0,0,0,.03);

transition:

transform .25s ease,

background .25s ease,

box-shadow .25s ease;

}


.core-box:hover{


background:#ffffff;


border-color:#111;


}



.core-box h3{


font-size:20px;


font-weight:800;


margin-bottom:18px;


line-height:1.4;


}



.core-box p{


font-size:15px;


font-weight:400;


line-height:1.8;


color:#555;


max-width:420px;


}



.core-buttons{


display:flex;


justify-content:center;


gap:20px;


margin-top:40px;


flex-wrap:wrap;


}



@media(max-width:900px){


.core-grid{


grid-template-columns:1fr;


}



.core-box{


min-height:auto;


padding:35px;


}


}

/* ==========================
WHY BUSINESS
========================== */

.business-grid{

display:grid;

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

gap:22px;

margin-top:50px;

}



.business-box{

background:#efefef;

padding:40px;

border-radius:14px;

text-align:center;

min-height:240px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

position:relative;

box-shadow:

0 8px 18px rgba(0,0,0,.04),

0 2px 8px rgba(0,0,0,.03);

transition:

transform .25s ease,

background .25s ease,

box-shadow .25s ease;

}

.business-box h3{

font-size:20px;

margin-bottom:18px;

font-weight:800;

}



.business-box p{

font-size:15px;

line-height:1.8;

color:#555;

}



@media(max-width:900px){

.business-grid{

grid-template-columns:1fr;

}

}


/* ==========================
SECTION CONTAINERS
========================== */

.industries .container,
.core-services .container,
.why-business .container{

background:#ffffff;

padding:60px;

border-radius:30px;

box-shadow:
0 25px 60px rgba(0,0,0,.08),
0 5px 18px rgba(0,0,0,.05);

position:relative;

overflow:hidden;

animation:
floating 4.5s ease-in-out infinite;

}

/* ==========================
CARD HOVER
========================== */

.industry-box,
.core-box,
.business-box{

will-change:
transform;

}



.industry-box:hover,
.core-box:hover,
.business-box:hover{

transform:

scale(1.045);

box-shadow:

0 24px 55px rgba(0,0,0,.12),

0 10px 24px rgba(0,0,0,.08);

}

.core-box:hover,
.business-box:hover{

background:#ffffff;

}

.industries .container,
.core-services .container,
.why-business .container{

background:#ffffff;

padding:60px;

border-radius:30px;

overflow:hidden;

position:relative;

animation:
floating 4.5s ease-in-out infinite;

}