/* ==========================================
   RESPONSIVE CSS
   PART 1
==========================================*/

/* Tablets */

@media screen and (max-width:1200px){

.sidebar{
width:250px;
}

.content{
margin-left:250px;
padding:25px;
}

.market-grid{
grid-template-columns:repeat(2,1fr);
}

.dashboard-grid{
grid-template-columns:repeat(2,1fr);
}

.trending-row{
grid-template-columns:repeat(2,1fr);
}

.table-card{
overflow-x:auto;
}

.dashboard-table{
min-width:700px;
}

}

/* Large Phones */

@media screen and (max-width:992px){

.sidebar{

position:fixed;

left:-280px;

top:0;

width:260px;

height:100vh;

z-index:9999;

transition:.35s;

overflow-y:auto;

}

.sidebar.active{

left:0;

}

.content{

margin-left:0;

padding:20px;

width:100%;

}

.dashboard-grid{

grid-template-columns:1fr;

gap:20px;

}

.market-grid{

grid-template-columns:1fr;

gap:20px;

}

.trending-row{

display:grid;

grid-template-columns:1fr;

gap:15px;

}

.stock-header{

flex-direction:column;

align-items:flex-start;

gap:25px;

}

.stock-company{

width:100%;

}

.stock-price-box{

width:100%;

text-align:left;

}

.section-header{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.market-header{

flex-direction:column;

gap:20px;

}

.market-summary{

width:100%;

display:grid;

grid-template-columns:1fr 1fr;

gap:15px;

}

.summary-card{

width:100%;

}

.company-logo img{

width:70px;

height:70px;

}

.dashboard-table{

min-width:650px;

}

.table-card{

overflow-x:auto;

}

img{

max-width:100%;

height:auto;

}

}

/* ==========================================
   RESPONSIVE CSS
   PART 2
==========================================*/

/* Mobile Phones */

@media screen and (max-width:768px){

body{

overflow-x:hidden;

}

.logo{

text-align:center;

padding:20px 0;

}

.logo img{

width:160px;

max-width:90%;

height:auto;

}

.support{

display:none;

}

.content{

padding:15px;

margin:0;

width:100%;

}

h1{

font-size:28px;

line-height:1.3;

}

h2{

font-size:22px;

}

h3{

font-size:18px;

}

p{

font-size:15px;

}

.dashboard-grid{

display:grid;

grid-template-columns:1fr;

gap:15px;

}

.market-grid{

display:grid;

grid-template-columns:1fr;

gap:15px;

}

.card-box,

.summary-card,

.table-card,

.stock-card,

.trend-card{

width:100%;

border-radius:18px;

}

.stock-card{

padding:18px;

flex-direction:row;

align-items:center;

justify-content:space-between;

}

.stock-left{

display:flex;

align-items:center;

gap:12px;

}

.stock-right{

text-align:right;

}

.stock-logo img{

width:52px;

height:52px;

border-radius:50%;

background:#fff;

padding:5px;

object-fit:contain;

}

.company-logo img{

width:70px;

height:70px;

}

.market-summary{

grid-template-columns:1fr;

}

.dashboard-table{

min-width:600px;

}

.table-card{

overflow-x:auto;

-webkit-overflow-scrolling:touch;

}

.buy-btn,

.sell-btn,

.watch-btn{

display:block;

width:100%;

text-align:center;

margin-bottom:12px;

padding:14px;

font-size:16px;

}

.stock-actions{

display:flex;

flex-direction:column;

gap:12px;

}

.search-box{

width:100%;

font-size:16px;

padding:15px;

}

input,

select,

textarea,

button{

font-size:16px;

}

}

/* ==========================================
   RESPONSIVE CSS
   PART 3
==========================================*/

/* Small Phones */

@media screen and (max-width:576px){

body{

font-size:14px;

overflow-x:hidden;

}

.content{

padding:12px;

}

.logo img{

width:140px;

}

.sidebar{

width:260px;

}

.stock-header{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

gap:20px;

}

.stock-company{

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}

.stock-price-box{

width:100%;

text-align:center;

}

.stock-price-box h1{

font-size:34px;

}

.company-logo img{

width:80px;

height:80px;

}

.market-header{

text-align:center;

}

.market-header h1{

font-size:26px;

}

.market-header p{

font-size:14px;

}

.summary-card{

padding:18px;

}

.card-box{

padding:18px;

}

.card-title{

font-size:13px;

}

.card-value{

font-size:24px;

}

.stock-card{

padding:15px;

border-radius:16px;

}

.stock-symbol{

font-size:18px;

font-weight:700;

}

.stock-company{

font-size:14px;

}

.stock-value{

font-size:22px;

font-weight:700;

}

.gain,

.loss{

font-size:15px;

font-weight:600;

}

.trend-card{

padding:15px;

}

.trend-logo img{

width:50px;

height:50px;

}

.trend-info h3{

font-size:18px;

}

.trend-info p{

font-size:13px;

}

.dashboard-table{

min-width:550px;

}

.dashboard-table th,

.dashboard-table td{

padding:12px;

font-size:14px;

}

.buy-btn,

.sell-btn,

.watch-btn{

padding:15px;

font-size:16px;

border-radius:10px;

}

.search-box{

padding:14px;

font-size:16px;

border-radius:10px;

}

input,

select,

textarea{

padding:14px;

border-radius:10px;

font-size:16px;

}

button{

padding:15px;

font-size:16px;

cursor:pointer;

}

img{

max-width:100%;

height:auto;

display:block;

}

}

/* Prevent horizontal scrolling everywhere */

html,
body{

max-width:100%;

overflow-x:hidden;

}

*{

box-sizing:border-box;

}

/* ==========================
MOBILE SIDEBAR
========================== */

.mobile-menu-btn{

display:none;

position:fixed;

top:18px;

left:18px;

width:48px;

height:48px;

border:none;

border-radius:12px;

background:#2563eb;

color:#fff;

font-size:26px;

cursor:pointer;

z-index:10001;

box-shadow:0 10px 30px rgba(0,0,0,.25);

}

.mobile-overlay{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

z-index:9998;

}

@media (max-width:992px){

.mobile-menu-btn{

display:flex;

justify-content:center;

align-items:center;

}

.sidebar{

left:-280px;

transition:.35s;

}

.sidebar.active{

left:0;

}

.mobile-overlay.active{

display:block;

}

.content{

margin-left:0;

padding-top:80px;

}

}