/* =====================================================
   NIKHIL PRODUCT STUDIO
   Global Styles
   Version : 2.0
====================================================== */

/*==============================
  GOOGLE FONT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');


/*==============================
  CSS VARIABLES
==============================*/

:root{

    --primary:#38BDF8;
    --primary-dark:#0EA5E9;

    --secondary:#7C3AED;

    --background:#050816;

    --surface:#111827;

    --surface-light:#1F2937;

    --border:rgba(255,255,255,.08);

    --text:#ffffff;

    --text-light:#94A3B8;

    --success:#22C55E;

    --danger:#EF4444;

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:26px;

    --shadow:

    0 20px 60px rgba(0,0,0,.35);

    --transition:.35s ease;

}


/*==============================
RESET
==============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}


html{

scroll-behavior:smooth;

}


body{

font-family:'Inter',sans-serif;

background:var(--background);

color:var(--text);

overflow-x:hidden;

line-height:1.6;

}


/*==============================
BACKGROUND GLOW
==============================*/

body::before{

content:"";

position:fixed;

left:-250px;
top:-250px;

width:650px;
height:650px;

border-radius:50%;

background:

radial-gradient(circle,var(--primary),transparent 70%);

opacity:.10;

filter:blur(80px);

pointer-events:none;

z-index:-2;

}


body::after{

content:"";

position:fixed;

right:-250px;
bottom:-250px;

width:650px;
height:650px;

border-radius:50%;

background:

radial-gradient(circle,var(--secondary),transparent 70%);

opacity:.10;

filter:blur(90px);

pointer-events:none;

z-index:-2;

}


/*==============================
IMAGES
==============================*/

img{

display:block;

max-width:100%;

height:auto;

}


/*==============================
LINKS
==============================*/

a{

text-decoration:none;

color:inherit;

}


/*==============================
LIST
==============================*/

ul{

list-style:none;

}


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

button{

font-family:inherit;

border:none;

outline:none;

cursor:pointer;

background:none;

}


/*==============================
INPUT
==============================*/

input,
textarea,
select{

font-family:inherit;

outline:none;

}


/*==============================
CONTAINER
==============================*/

.container{

width:min(92%,1400px);

margin:auto;

}


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

section{

padding:110px 0;

position:relative;

}


/*==============================
SECTION TITLE
==============================*/

.section-title{

text-align:center;

max-width:760px;

margin:0 auto 70px;

}


.section-title span{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:rgb(238, 239, 240);

color:var(--primary);

font-size:14px;

font-weight:700;

letter-spacing:.5px;

text-transform:uppercase;

margin-bottom:18px;

}


.section-title h2{

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

}


.section-title p{

font-size:18px;

color:var(--text-light);

}


/*==============================
COMMON BUTTONS
==============================*/

.btn-primary,
.btn-secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 34px;

border-radius:50px;

font-size:16px;

font-weight:700;

transition:var(--transition);

}


.btn-primary{

background:var(--primary);

color:#fff;

box-shadow:

0 12px 35px rgba(56,189,248,.35);

}


.btn-primary:hover{

transform:translateY(-5px);

background:var(--primary-dark);

}


.btn-secondary{

border:1px solid var(--border);

background:rgba(255,255,255,.05);

color:#fff;

backdrop-filter:blur(16px);

}


.btn-secondary:hover{

background:rgba(56,189,248,.12);

border-color:var(--primary);

transform:translateY(-5px);

}


/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

width:10px;

}


::-webkit-scrollbar-track{

background:#09111f;

}


::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/*==============================
SELECTION
==============================*/

::selection{

background:var(--primary);

color:#fff;

}


/*==============================
UTILITY
==============================*/

.text-center{

text-align:center;

}

.hidden{

display:none;

}