html,
body{
overflow-x: hidden;
}
/*=========================================================
CASE STUDIES / INSIGHTS SECTION
=========================================================*/
.hero-section{
position:relative;
overflow:hidden;
padding:120px 0;
background:
linear-gradient(135deg,#09111f,#101b34,#0b2749);
color:#fff;
}
.hero-bg{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:50px 50px;
opacity:.35;
}
.blob{
position:absolute;
border-radius:50%;
filter:blur(70px);
animation:float 8s ease-in-out infinite;
}
.blob1{
width:350px;
height:350px;
background:#6d3dfc;
top:-100px;
left:-80px;
}
.blob2{
width:300px;
height:300px;
background:#00d2ff;
right:-80px;
bottom:-100px;
animation-delay:3s;
}
.hero-badge{
display:inline-block;
padding:10px 20px;
border-radius:30px;
background:rgba(255,255,255,.08);
backdrop-filter:blur(10px);
margin-bottom:25px;
font-size:15px;
border:1px solid rgba(255,255,255,.15);
}
.hero-section h1{
font-size:64px;
font-weight:700;
line-height:1.15;
margin-bottom:25px;
}
.hero-section h1 span{
background:linear-gradient(90deg,#00e5ff,#8b5cf6);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
.hero-section p{
font-size:20px;
color:#d3d9e8;
line-height:1.8;
margin-bottom:40px;
}
.hero-buttons{
display:flex;
gap:20px;
flex-wrap:wrap;
}
.btn-primary-custom{
position: relative;
z-index: 9999;
background:linear-gradient(90deg,#6d3dfc,#00b7ff);
color:#fff;
padding:16px 32px;
border-radius:60px;
text-decoration:none;
font-weight:600;
transition:.4s;
}
.btn-primary-custom:hover{
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(0,183,255,.35);
color:#fff;
}
.btn-primary-custom span{
margin-left:10px;
}
.btn-secondary-custom{
padding:16px 32px;
border-radius:60px;
border:1px solid rgba(255,255,255,.2);
color:#fff;
text-decoration:none;
backdrop-filter:blur(12px);
transition:.3s;
}
.btn-secondary-custom:hover{
background:rgba(255,255,255,.08);
color:#fff;
}
.hero-card{
position:relative;
display:flex;
justify-content:center;
align-items:center;
height:480px;
border-radius:30px;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.12);
}
.hero-logo{
width:280px;
position:relative;
z-index:2;
animation:floatLogo 4s ease-in-out infinite;
}
.pulse-ring{
position:absolute;
width:340px;
height:340px;
border-radius:50%;
border:2px solid rgba(0,212,255,.35);
animation:pulse 3s infinite;
}
@keyframes pulse{
0%{
transform:scale(.8);
opacity:1;
}
100%{
transform:scale(1.4);
opacity:0;
}
}
@keyframes floatLogo{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-18px);
}
}
@keyframes float{
0%,100%{
transform:translate(0,0);
}
50%{
transform:translate(30px,-25px);
}
}
@media(max-width:992px){
.hero-section{
text-align:center;
padding:80px 0;
}
.hero-section h1{
font-size:42px;
}
.hero-card{
margin-top:50px;
height:350px;
}
.hero-logo{
width:220px;
}
}
/*=========================================================
BACKGROUND GLOW
=========================================================*/
.bg-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
filter:blur(130px);
opacity:.35;
pointer-events:none;
z-index:0;
}
.glow-left{
left:-220px;
top:-120px;
background:#6ea8ff;
}
.glow-right{
right:-220px;
bottom:-120px;
background:#8b5cf6;
}
/*=========================================================
FLOATING ORBS
=========================================================*/
.orb{
position:absolute;
border-radius:50%;
background:linear-gradient(
135deg,
rgba(255,255,255,.90),
rgba(120,170,255,.40));
backdrop-filter:blur(12px);
box-shadow:
0 10px 30px rgba(0,87,255,.18),
inset 0 0 15px rgba(255,255,255,.35);
animation:floatOrb 9s ease-in-out infinite;
z-index:0;
}
/* Orb 1 */
.orb:nth-of-type(1){
width:18px;
height:18px;
top:15%;
left:7%;
animation-delay:0s;
}
/* Orb 2 */
.orb:nth-of-type(2){
width:26px;
height:26px;
top:30%;
right:10%;
animation-delay:2s;
}
/* Orb 3 */
.orb:nth-of-type(3){
width:14px;
height:14px;
bottom:18%;
left:20%;
animation-delay:4s;
}
/* Orb 4 */
.orb:nth-of-type(4){
width:22px;
height:22px;
bottom:10%;
right:18%;
animation-delay:1s;
}
/*=========================================================
SECTION HEADER
=========================================================*/
.insight-section .text-center{
position:relative;
z-index:2;
max-width:900px;
margin:auto;
}
/*=========================================================
BADGE
=========================================================*/
.mini-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 22px;
border-radius:50px;
background:rgba(255,255,255,.82);
backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,.55);
box-shadow:
0 12px 30px rgba(0,0,0,.06);
font-size:13px;
font-weight:700;
color:#0a58ca;
letter-spacing:.7px;
text-transform:uppercase;
margin-bottom:24px;
}
/*=========================================================
TITLE
=========================================================*/
.insight-title{
font-size:58px;
font-weight:800;
line-height:1.1;
color:#0f172a;
margin-bottom:18px;
letter-spacing:-1px;
}
.insight-title span{
background:linear-gradient(
135deg,
#2563eb,
#00b8ff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/*=========================================================
SUBTITLE
=========================================================*/
.insight-subtitle{
max-width:760px;
margin:auto;
font-size:18px;
line-height:1.9;
color:#64748b;
font-weight:400;
}
/*=========================================================
CONTAINER
=========================================================*/
.insight-section .container-fluid{
position:relative;
z-index:2;
}
/*=========================================================
ANIMATION
=========================================================*/
@keyframes floatOrb{
0%{
transform:
translateY(0px)
rotate(0deg);
}
50%{
transform:
translateY(-20px)
rotate(180deg);
}
100%{
transform:
translateY(0px)
rotate(360deg);
}
}
/*=========================================================
PREMIUM CARDS
=========================================================*/
.card-custom,
.card-light{
position:relative;
overflow:hidden;
border-radius:28px;
height:470px;
transition:.45s ease;
cursor:pointer;
z-index:2;
}
/*=========================================================
DARK CARD
=========================================================*/
.card-custom{
background:#000;
box-shadow:
0 20px 60px rgba(15,23,42,.08),
0 8px 25px rgba(37,99,235,.08);
}
/*=========================================================
IMAGE
=========================================================*/
.image-wrapper{
position:absolute;
inset:0;
overflow:hidden;
}
.image-wrapper img{
width:100%;
height:100%;
object-fit:cover;
transition:1.2s ease;
}
/*=========================================================
IMAGE ZOOM
=========================================================*/
.card-custom:hover img{
transform:scale(1.12);
}
/*=========================================================
OVERLAY
=========================================================*/
.card-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:28px;
background:
linear-gradient(
180deg,
rgba(0,0,0,.05) 0%,
rgba(0,0,0,.18) 35%,
rgba(5,10,20,.90) 100%);
}
/*=========================================================
TAG
=========================================================*/
.tag{
display:inline-flex;
align-items:center;
width:max-content;
padding:8px 18px;
border-radius:50px;
background:rgba(255,255,255,.18);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.22);
color:#fff;
font-size:11px;
font-weight:700;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:18px;
}
/*=========================================================
TITLE
=========================================================*/
.card-title{
color:#fff;
font-size:24px;
font-weight:700;
line-height:1.45;
margin-bottom:24px;
}
/*=========================================================
HOVER
=========================================================*/
.card-custom:hover{
transform:
translateY(-12px)
scale(1.02);
box-shadow:
0 40px 80px rgba(0,0,0,.22),
0 20px 50px rgba(37,99,235,.15);
}
/*=========================================================
TOP GLOW
=========================================================*/
.card-custom::before{
content:"";
position:absolute;
top:-120px;
right:-120px;
width:260px;
height:260px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(255,255,255,.18),
transparent);
transition:.6s;
}
.card-custom:hover::before{
transform:scale(1.4);
}
/*=========================================================
LIGHT CARD
=========================================================*/
.card-light{
background:
linear-gradient(
135deg,
#ffffff,
#f8fbff);
padding:32px;
display:flex;
flex-direction:column;
justify-content:flex-end;
box-shadow:
0 20px 60px rgba(15,23,42,.08);
}
/*=========================================================
LIGHT GLOW
=========================================================*/
.light-glow{
position:absolute;
top:-90px;
right:-90px;
width:240px;
height:240px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(37,99,235,.20),
transparent);
filter:blur(20px);
}
/*=========================================================
LIGHT TAG
=========================================================*/
.tag.dark{
background:#2563eb;
border:none;
color:#fff;
}
/*=========================================================
LIGHT TITLE
=========================================================*/
.dark-title{
color:#0f172a;
font-size:26px;
font-weight:700;
line-height:1.45;
margin-bottom:24px;
}
/*=========================================================
LIGHT CARD HOVER
=========================================================*/
.card-light:hover{
transform:
translateY(-12px)
scale(1.02);
box-shadow:
0 35px 70px rgba(37,99,235,.15);
}
/*=========================================================
GRID SPACING
=========================================================*/
.insight-section .row{
position:relative;
z-index:2;
}
.insight-section .col-lg-3{
display:flex;
}
.card-custom,
.card-light{
width:100%;
}
/*=========================================================
CARD ACTIONS
=========================================================*/
.card-actions{
display:flex;
flex-direction:column;
gap:14px;
margin-top:10px;
}
/*=========================================================
READ REPORT BUTTON
=========================================================*/
.read-btn{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:54px;
border:none;
border-radius:14px;
cursor:pointer;
overflow:hidden;
background:linear-gradient(
135deg,
#2563eb 0%,
#1d4ed8 100%
);
color:#fff;
font-size:15px;
font-weight:700;
letter-spacing:.3px;
transition:.35s ease;
box-shadow:
0 15px 35px rgba(37,99,235,.25);
}
/* Shine */
.read-btn::before{
content:"";
position:absolute;
left:-120%;
top:0;
width:60%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.read-btn:hover::before{
left:150%;
}
.read-btn:hover{
transform:
translateY(-4px)
scale(1.02);
box-shadow:
0 22px 45px rgba(37,99,235,.40);
}
.read-btn:active{
transform:scale(.98);
}
/*=========================================================
PERSPECTIVE BUTTON
=========================================================*/
.dark-btn{
background:linear-gradient(
135deg,
#111827,
#0f172a
);
}
.dark-btn:hover{
box-shadow:
0 22px 45px rgba(15,23,42,.35);
}
/*=========================================================
LINKEDIN BUTTON
=========================================================*/
.linkedin-btn-card{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
width:100%;
height:54px;
overflow:hidden;
border-radius:14px;
text-decoration:none;
background:linear-gradient(
135deg,
#0A66C2 0%,
#0077B5 50%,
#0A66C2 100%
);
color:#fff;
font-size:15px;
font-weight:700;
transition:.35s ease;
box-shadow:
0 15px 35px rgba(10,102,194,.28);
}
/* Shine */
.linkedin-btn-card::before{
content:"";
position:absolute;
left:-120%;
top:0;
width:60%;
height:100%;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.linkedin-btn-card:hover::before{
left:150%;
}
.linkedin-btn-card:hover{
color:#fff;
text-decoration:none;
transform:
translateY(-4px)
scale(1.02);
box-shadow:
0 24px 50px rgba(10,102,194,.45);
}
/*=========================================================
LINKEDIN ICON
=========================================================*/
.linkedin-btn-card i{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.18);
font-size:18px;
transition:.35s;
}
.linkedin-btn-card:hover i{
transform:
rotate(-12deg)
scale(1.12);
background:rgba(255,255,255,.30);
}
/*=========================================================
LINKEDIN TEXT
=========================================================*/
.linkedin-btn-card span{
letter-spacing:.3px;
}
/*=========================================================
FOCUS
=========================================================*/
.read-btn:focus,
.linkedin-btn-card:focus{
outline:none;
box-shadow:
0 0 0 4px rgba(37,99,235,.18);
}
/*=========================================================
PREMIUM FINISHING EFFECTS
=========================================================*/
/* Smooth Rendering */
.insight-section *{
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Smooth Transition */
.card-custom,
.card-light,
.read-btn,
.linkedin-btn-card,
.tag,
.image-wrapper img{
transition:all .35s ease;
}
/*=========================================================
CARD GLOW ON HOVER
=========================================================*/
.card-custom::after,
.card-light::after{
content:"";
position:absolute;
inset:0;
border-radius:28px;
border:1px solid rgba(255,255,255,.08);
pointer-events:none;
transition:.35s;
}
.card-custom:hover::after{
border-color:rgba(255,255,255,.20);
}
.card-light:hover::after{
border-color:rgba(37,99,235,.20);
}
/*=========================================================
SUBTLE SHADOW IMPROVEMENT
=========================================================*/
.card-custom{
box-shadow:
0 20px 60px rgba(15,23,42,.08),
0 10px 30px rgba(0,0,0,.06);
}
.card-light{
box-shadow:
0 20px 60px rgba(15,23,42,.08),
0 8px 24px rgba(37,99,235,.06);
}
/*=========================================================
IMAGE FILTER
=========================================================*/
.image-wrapper img{
filter:saturate(105%) contrast(102%);
}
.card-custom:hover img{
filter:saturate(115%) contrast(108%);
}
/*=========================================================
BUTTON ACTIVE EFFECT
=========================================================*/
.read-btn:active,
.linkedin-btn-card:active{
transform:scale(.97);
}
/*=========================================================
SCROLL ANIMATION READY
=========================================================*/
.card-custom,
.card-light{
animation:fadeUp .8s ease both;
}
.card-custom:nth-child(1){
animation-delay:.1s;
}
.card-custom:nth-child(2){
animation-delay:.2s;
}
.card-custom:nth-child(3){
animation-delay:.3s;
}
.card-light{
animation-delay:.4s;
}
/*=========================================================
KEYFRAMES
=========================================================*/
@keyframes fadeUp{
from{
opacity:0;
transform:
translateY(40px);
}
to{
opacity:1;
transform:
translateY(0);
}
}
/* Floating Glow */
@keyframes glowFloat{
0%{
transform:
translateY(0);
}
50%{
transform:
translateY(-12px);
}
100%{
transform:
translateY(0);
}
}
.bg-glow{
animation:glowFloat 8s ease-in-out infinite;
}
/*=========================================================
RESPONSIVE
=========================================================*/
@media (max-width:1200px){
.insight-title{
font-size:48px;
}
}
@media (max-width:991px){
.insight-section{
padding:80px 0;
}
.insight-title{
font-size:42px;
}
.insight-subtitle{
font-size:17px;
}
.card-custom,
.card-light{
height:430px;
}
}
@media (max-width:768px){
.mini-badge{
font-size:12px;
padding:8px 18px;
}
.insight-title{
font-size:34px;
}
.insight-subtitle{
font-size:16px;
line-height:1.7;
}
.card-custom,
.card-light{
height:400px;
border-radius:22px;
}
.card-overlay{
padding:22px;
}
.card-title,
.dark-title{
font-size:20px;
}
.read-btn,
.linkedin-btn-card{
height:48px;
font-size:14px;
}
}
@media (max-width:576px){
.insight-section{
padding:60px 0;
}
.insight-title{
font-size:30px;
}
.insight-subtitle{
font-size:15px;
}
.card-custom,
.card-light{
height:380px;
}
.card-overlay{
padding:18px;
}
.card-title,
.dark-title{
font-size:18px;
line-height:1.45;
}
.tag{
font-size:10px;
padding:7px 14px;
}
.read-btn,
.linkedin-btn-card{
height:46px;
border-radius:12px;
font-size:13px;
}
}
/*=========================================================
END
=========================================================*/