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


.dw-hero{


min-height:100vh;


display:flex;

align-items:center;


position:relative;


overflow:hidden;


background:


linear-gradient(

135deg,

#081120,

#0B1D45

);


padding-top:120px;


}




.dw-hero-overlay{


position:absolute;


width:600px;


height:600px;


background:

radial-gradient(

circle,

rgba(0,207,255,.25),

transparent 70%

);


top:-200px;


right:-200px;


}





.dw-hero-content{


display:grid;


grid-template-columns:

1fr 1fr;


gap:60px;


align-items:center;


}





.dw-hero-badge{


display:inline-block;


background:

rgba(255,255,255,.1);


padding:

10px 20px;


border-radius:50px;


color:white;


margin-bottom:25px;


backdrop-filter:

blur(10px);


}





.dw-hero h1{


font-size:

clamp(

2.8rem,

5vw,

4.8rem

);


color:white;


}



.dw-hero p{


font-size:18px;


color:

rgba(255,255,255,.75);


margin:25px 0;


}





.dw-hero-buttons{


display:flex;


gap:20px;


}




.dw-hero .dw-btn-outline{


color:white;


border-color:white;


}




/*
==================================
CODE CARD
==================================
*/


.dw-hero-visual{


position:relative;


}



.dw-code-card{


background:

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


border:

1px solid rgba(255,255,255,.15);


border-radius:

25px;


padding:30px;


backdrop-filter:

blur(20px);


box-shadow:

0 30px 80px rgba(0,0,0,.4);


transform:

perspective(800px)

rotateY(-10deg);


}




.code-header{


display:flex;


gap:8px;


margin-bottom:20px;


}



.code-header span{


width:12px;

height:12px;


background:white;


border-radius:50%;


}





.dw-code-card pre{


color:#00CFFF;


font-size:16px;


}





/*
==================================
FLOATING CARDS
==================================
*/


.dw-floating-card{


position:absolute;


background:white;


padding:

15px 25px;


border-radius:

20px;


box-shadow:

var(--dw-shadow);


font-weight:600;


animation:

floating 4s infinite;


}



.card-one{


top:10%;


right:-40px;


}



.card-two{


bottom:25%;


left:-50px;


}



.card-three{


bottom:5%;


right:30px;


}