/* =====================================================
   DSA MASTER NOTES
   Created By Sachin Yadav
===================================================== */

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

:root{

--primary:#2563eb;
--secondary:#0f172a;
--accent:#38bdf8;
--white:#ffffff;
--black:#111827;
--gray:#6b7280;
--bg:#f8fafc;
--card:#ffffff;
--border:#e5e7eb;
--shadow:0 15px 35px rgba(0,0,0,.08);

}

*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:var(--black);
overflow-x:hidden;

}

/* Progress */

#progressBar{

position:fixed;
top:0;
left:0;
width:0%;
height:5px;
background:linear-gradient(90deg,#2563eb,#06b6d4);
z-index:99999;

}

/* Navbar */

header{

position:sticky;
top:0;
z-index:999;
background:white;
box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.navbar{

max-width:1400px;
margin:auto;

display:flex;
justify-content:space-between;
align-items:center;

padding:18px 40px;

}

.logo{

display:flex;
align-items:center;
gap:12px;

font-size:28px;
font-weight:700;

color:var(--primary);

}

.logo i{

font-size:34px;

}

.nav-links{

display:flex;
gap:35px;

list-style:none;

}

.nav-links a{

text-decoration:none;

font-weight:600;

color:#374151;

transition:.3s;

}

.nav-links a:hover{

color:var(--primary);

}

.nav-buttons{

display:flex;
gap:15px;

}

.nav-buttons button{

width:48px;
height:48px;

border:none;

border-radius:12px;

cursor:pointer;

background:#eef2ff;

transition:.3s;

font-size:18px;

}

.nav-buttons button:hover{

background:var(--primary);

color:white;

transform:translateY(-4px);

}

/* Hero */

.hero{

max-width:1400px;

margin:auto;

padding:100px 40px;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero h1{

font-size:65px;

line-height:1.2;

margin-bottom:25px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

font-size:19px;

color:#555;

line-height:1.9;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn{

background:var(--primary);

padding:15px 35px;

border-radius:10px;

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn:hover{

transform:translateY(-5px);

box-shadow:0 12px 30px rgba(37,99,235,.25);

}

.btn2{

padding:15px 35px;

border-radius:10px;

text-decoration:none;

font-weight:600;

border:2px solid var(--primary);

color:var(--primary);

transition:.3s;

}

.btn2:hover{

background:var(--primary);

color:white;

}

/* Hero Right */

.hero-right{

display:flex;

justify-content:center;

}

.circle{

width:340px;

height:340px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:linear-gradient(135deg,#2563eb,#06b6d4);

box-shadow:0 30px 80px rgba(37,99,235,.3);

animation:float 4s infinite ease-in-out;

}

.circle i{

font-size:120px;

color:white;

}

@keyframes float{

0%{transform:translateY(0);}
50%{transform:translateY(-20px);}
100%{transform:translateY(0);}

}

/* Search */

.search-section{

max-width:1000px;

margin:auto;

padding:30px;

}

.search-section h2{

font-size:35px;

margin-bottom:20px;

}

.search-box{

display:flex;

align-items:center;

background:white;

padding:18px 25px;

border-radius:15px;

box-shadow:var(--shadow);

}

.search-box i{

font-size:22px;

color:var(--primary);

}

.search-box input{

flex:1;

border:none;

outline:none;

padding-left:15px;

font-size:18px;

background:transparent;

}
/*=====================================================
 SIDEBAR
=====================================================*/

.sidebar{

max-width:1400px;
margin:40px auto;
padding:35px;
background:var(--card);
border-radius:20px;
box-shadow:var(--shadow);

}

.sidebar h2{

font-size:32px;
margin-bottom:25px;
color:var(--primary);

}

.sidebar ul{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:18px;
list-style:none;

}

.sidebar ul li a{

display:flex;
align-items:center;
gap:12px;

padding:15px 20px;

text-decoration:none;

background:#f1f5f9;

color:#111827;

border-radius:12px;

font-weight:600;

transition:.35s;

}

.sidebar ul li a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-5px);

box-shadow:0 10px 25px rgba(37,99,235,.25);

}

/*=====================================================
 MAIN CONTENT
=====================================================*/

main{

max-width:1400px;

margin:auto;

padding:30px;

}

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

.notes-section{

margin-bottom:70px;

}

.notes-section h2{

font-size:42px;

margin-bottom:25px;

color:var(--secondary);

position:relative;

}

.notes-section h2::after{

content:"";

position:absolute;

left:0;
bottom:-10px;

width:90px;
height:5px;

background:linear-gradient(to right,#2563eb,#06b6d4);

border-radius:20px;

}

.notes-section p{

font-size:18px;

line-height:1.9;

color:#555;

margin-top:20px;

}

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

.card,
.note-card{

background:#fff;

padding:35px;

margin-top:30px;

border-radius:18px;

box-shadow:var(--shadow);

transition:.4s;

border-left:6px solid var(--primary);

}

.card:hover,
.note-card:hover{

transform:translateY(-8px);

}

.card h3,
.note-card h3{

font-size:28px;

margin-bottom:20px;

color:var(--primary);

}

.card ul,
.note-card ul{

margin-left:25px;

margin-top:15px;

}

.card ul li,
.note-card ul li{

margin:12px 0;

font-size:18px;

}

/*=====================================================
 BOXES
=====================================================*/

.definition-box,
.example-box,
.tip,
.remember-box,
.importance-box,
.operations-box,
.advantages-box,
.disadvantages-box{

margin-top:30px;

padding:30px;

border-radius:16px;

background:#fff;

box-shadow:var(--shadow);

}

.definition-box{

border-left:7px solid #3b82f6;

}

.example-box{

border-left:7px solid #10b981;

}

.tip{

border-left:7px solid #f59e0b;

}

.remember-box{

border-left:7px solid #8b5cf6;

}

.importance-box{

border-left:7px solid #06b6d4;

}

.operations-box{

border-left:7px solid #ef4444;

}

.advantages-box{

border-left:7px solid #22c55e;

}

.disadvantages-box{

border-left:7px solid #dc2626;

}

.definition-box h3,
.example-box h3,
.tip h3,
.remember-box h3,
.importance-box h3,
.operations-box h3,
.advantages-box h3,
.disadvantages-box h3{

margin-bottom:18px;

font-size:24px;

color:#111827;

}

.definition-box ul,
.example-box ul,
.tip ul,
.remember-box ul,
.importance-box ul,
.operations-box ul,
.advantages-box ul,
.disadvantages-box ul{

margin-left:25px;

}

.definition-box li,
.example-box li,
.tip li,
.remember-box li,
.importance-box li,
.operations-box li,
.advantages-box li,
.disadvantages-box li{

margin:12px 0;

font-size:17px;

}

/*=====================================================
 TABLE
=====================================================*/

table{

width:100%;

border-collapse:collapse;

margin-top:30px;

background:white;

box-shadow:var(--shadow);

border-radius:15px;

overflow:hidden;

}

table th{

background:linear-gradient(90deg,#2563eb,#06b6d4);

color:white;

padding:18px;

font-size:18px;

}

table td{

padding:16px;

border-bottom:1px solid #e5e7eb;

font-size:17px;

}

table tr:nth-child(even){

background:#f8fafc;

}

table tr:hover{

background:#eef6ff;

}

/*=====================================================
 PRE & CODE
=====================================================*/

pre{

margin-top:25px;

padding:25px;

background:#0f172a;

border-radius:15px;

overflow:auto;

}

pre code{

font-size:16px;

line-height:1.8;

color:#f8fafc;

font-family:Consolas,monospace;

}

/*=====================================================
 FLOWCHART
=====================================================*/

.flowchart-box{

margin-top:30px;

background:white;

padding:30px;

border-radius:18px;

box-shadow:var(--shadow);

text-align:center;

}

.flowchart-box pre{

background:#f8fafc;

color:#111827;

font-size:18px;

}

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

ol{

margin-left:30px;

margin-top:20px;

}

ol li{

margin:14px 0;

font-size:18px;

}

ul{

margin-left:25px;

}

ul li{

margin:12px 0;

font-size:18px;

}
/*=====================================================
 DARK MODE
=====================================================*/

body.dark{

--bg:#0f172a;
--card:#1e293b;
--white:#ffffff;
--black:#f8fafc;
--secondary:#f8fafc;
--gray:#cbd5e1;
--border:#334155;

background:var(--bg);
color:var(--white);

}

body.dark header{

background:#1e293b;

}

body.dark .navbar a{

color:#f8fafc;

}

body.dark .sidebar{

background:#1e293b;

}

body.dark .note-card,
body.dark .card,
body.dark .definition-box,
body.dark .example-box,
body.dark .remember-box,
body.dark .tip,
body.dark .importance-box,
body.dark .operations-box,
body.dark .advantages-box,
body.dark .disadvantages-box,
body.dark table,
body.dark .flowchart-box{

background:#1e293b;
color:#f8fafc;

}

body.dark p,
body.dark li{

color:#e2e8f0;

}

body.dark .search-box{

background:#1e293b;

}

body.dark input{

color:white;

}

body.dark pre{

background:#020617;

}

/*=====================================================
 FOOTER
=====================================================*/

footer{

margin-top:80px;

padding:40px;

text-align:center;

background:#0f172a;

color:white;

font-size:17px;

}

footer p{

letter-spacing:1px;

}

/*=====================================================
 BACK TO TOP
=====================================================*/

#topBtn{

position:fixed;

bottom:25px;

right:25px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#2563eb;

color:white;

font-size:22px;

cursor:pointer;

display:none;

z-index:999;

transition:.3s;

box-shadow:0 10px 25px rgba(37,99,235,.35);

}

#topBtn:hover{

transform:translateY(-8px);

background:#1d4ed8;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#e5e7eb;

}

::-webkit-scrollbar-thumb{

background:#2563eb;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#1d4ed8;

}

/*=====================================================
 IMAGE
=====================================================*/

img{

max-width:100%;

border-radius:15px;

display:block;

}

/*=====================================================
 FADE ANIMATION
=====================================================*/

.fade{

opacity:0;

transform:translateY(40px);

transition:all .8s ease;

}

.fade.show{

opacity:1;

transform:translateY(0);

}

/*=====================================================
 HOVER EFFECT
=====================================================*/

.notes-section{

transition:.4s;

}

.notes-section:hover{

transform:translateY(-3px);

}

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

button,
.btn,
.btn2{

cursor:pointer;

}

button:active,
.btn:active,
.btn2:active{

transform:scale(.95);

}

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

::selection{

background:#2563eb;

color:white;

}

/*=====================================================
 RESPONSIVE
=====================================================*/

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-right{

margin-top:40px;

}

.nav-links{

display:none;

}

.sidebar ul{

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

}

}

@media(max-width:768px){

.navbar{

padding:18px;

}

.hero{

padding:60px 20px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.btn,
.btn2{

width:100%;

text-align:center;

}

.circle{

width:220px;

height:220px;

}

.circle i{

font-size:80px;

}

.notes-section h2{

font-size:30px;

}

.sidebar{

padding:20px;

}

.sidebar ul{

grid-template-columns:1fr;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

pre{

font-size:14px;

}

.search-box{

padding:15px;

}

}

@media(max-width:500px){

.logo{

font-size:22px;

}

.logo i{

font-size:26px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.search-section h2{

font-size:28px;

}

.card,
.note-card{

padding:20px;

}

.definition-box,
.example-box,
.tip,
.remember-box,
.importance-box,
.operations-box,
.advantages-box,
.disadvantages-box{

padding:20px;

}

footer{

font-size:15px;

padding:25px;

}

}