/* =========================
   DATACORB GLOBAL CSS
========================= */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{


background:

linear-gradient(

135deg,

#f2f2f2,

#ffffff,

#ededed

);


    font-family:
    "Inter",
    Arial,
    sans-serif;

    background:

    linear-gradient(
    180deg,
    #fafafa 0%,
    #f4f4f4 100%
    );


    color:#111;

    line-height:1.6;

}


a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}


.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}



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


.btn{


display:inline-flex;


align-items:center;


justify-content:center;


padding:14px 30px;


min-height:54px;


background:#111;


color:#ffffff;


border:2px solid #111;


border-radius:10px;


font-size:15px;


font-weight:700;


cursor:pointer;


transition:
all .25s ease;


}



.btn:hover{


background:#ffffff;


color:#111;


border-color:#111;


}



.btn-outline{


background:#ffffff;


color:#111;


border:2px solid #111;


}



.btn-outline:hover{


background:#111;


color:#ffffff;


}



.btn:active{


transform:scale(.98);


}


/* SECTION */


.section{

    padding:20px 0;

}


/* HEADINGS */


h1,h2,h3{

    font-weight:700;

    line-height:1.2;

}


/* ==========================
FLOAT EFFECT
========================== */

@keyframes floating{


0%{

transform:
translateY(0);

}



25%{

transform:
translateY(-10px);

}



50%{

transform:
translateY(-18px);

}



75%{

transform:
translateY(-8px);

}



100%{

transform:
translateY(0);

}

}


/* MAIN CONTAINERS */

.hero-card,

.core-box,

.business-box,

.industry-box,

.cta-box{

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

will-change:
transform;

}





/* GLOBAL HOVER */

.btn,

.core-box,

.business-box,

.industry-box{

transition:

transform .25s ease,

background .25s ease,

color .25s ease;

}



.btn:hover,

.core-box:hover,

.business-box:hover,

.industry-box:hover{

transform:

translateY(-18px)

scale(1.08);

z-index:10;

}

.core-box,

.business-box,

.industry-box{

position:relative;

cursor:default;

}

.core-box:hover,

.business-box:hover,

.industry-box:hover{


box-shadow:

0 40px 80px rgba(0,0,0,.12),

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


}


/* ==========================
GLAZE LIGHT EFFECT
========================== */

.hero-card,

.cta-box{

position:relative;

overflow:hidden;

}





.hero-card::after,

.core-box::after,

.business-box::after,

.industry-box::after,

.cta-box::after{


content:"";


position:absolute;


top:-160%;


left:-140%;


width:90px;


height:380%;


background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);


transform:

rotate(28deg);


animation:

shineMove 8s linear infinite;


pointer-events:none;


}



@keyframes shineMove{


0%{

left:-140%;

}



100%{

left:180%;

}


}