/* ===================================================
GRID4K RESPONSIVE CSS
=================================================== */

/* ===================================================
LARGE DEVICES
=================================================== */

@media(max-width:1400px){

.hero-content h1{

font-size:64px;

}

.section-title h2{

font-size:52px;

}

}

/* ===================================================
LAPTOP DEVICES
=================================================== */

@media(max-width:1200px){

/* =========================
GLOBAL
========================= */

section{

padding-left:5%;
padding-right:5%;

}

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

.hero{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.hero-content{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

/* =========================
TEAM GRID
========================= */

.team-grid{

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

gap:30px;

}

/* =========================
BLOG GRID
========================= */

.blog-grid{

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

gap:30px;

}

/* =========================
PRICING GRID
========================= */

.pricing-grid{

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

gap:30px;

}

/* =========================
CASE STUDIES
========================= */

.case-grid{

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

}

/* =========================
STATS
========================= */

.stats-grid{

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

}

/* =========================
ANALYTICS
========================= */

.analytics-grid{

grid-template-columns:1fr;

}

}

/* ===================================================
TABLET DEVICES
=================================================== */

@media(max-width:992px){

/* =========================
HEADER
========================= */

.header{

padding:18px 5%;

}

.navbar{

position:fixed;

top:88px;
right:-100%;

width:320px;

height:calc(100vh - 88px);

background:#ffffff;

flex-direction:column;

align-items:flex-start;

padding:35px 28px;

gap:22px;

overflow-y:auto;

transition:0.45s ease;

box-shadow:
-10px 0 40px rgba(0,0,0,0.08);

z-index:999;

}

.navbar.active{

right:0;

}

.navbar a{

width:100%;

padding-bottom:12px;

border-bottom:
1px solid rgba(123,44,255,0.08);

font-size:16px;

}

.mobile-menu-btn{

display:flex;

}

.header-btn{

display:none;

}

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

.hero{

padding-top:160px;

}

.hero-content h1{

font-size:54px;

}

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

.section-title h2{

font-size:46px;

}

/* =========================
TEAM GRID
========================= */

.team-grid{

grid-template-columns:1fr 1fr;

}

/* =========================
BLOG GRID
========================= */

.blog-grid{

grid-template-columns:1fr 1fr;

}

/* =========================
PRICING GRID
========================= */

.pricing-grid{

grid-template-columns:1fr;

max-width:700px;

margin:auto;

}

.pricing-card{

padding:45px 35px;

}

.pricing-card.featured{

transform:none;

}

/* =========================
DASHBOARD
========================= */

.sidebar{

left:-100%;

transition:0.4s ease;

}

.sidebar.active{

left:0;

}

.dashboard-main{

margin-left:0;

padding:30px 20px;

width:100%;

}

.dashboard-top{

flex-direction:column;

align-items:flex-start;

gap:25px;

}

.profile-box{

width:100%;

justify-content:flex-start;

}

.analytics-grid{

grid-template-columns:1fr;

}

.table-box{

overflow-x:auto;

}

/* =========================
CONTACT
========================= */

.contact-grid{

grid-template-columns:1fr;

}

}

/* ===================================================
MOBILE DEVICES
=================================================== */

@media(max-width:768px){

/* =========================
GLOBAL
========================= */

section{

padding-left:5%;
padding-right:5%;

}

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

.hero{

padding-top:150px;

}

.hero-content h1{

font-size:42px;

line-height:1.3;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.hero-buttons a{

width:100%;

}

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

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

/* =========================
TEAM GRID
========================= */

.team-grid{

grid-template-columns:1fr;

gap:25px;

}

.team-card{

border-radius:28px;

}

.team-image img{

height:320px;

}

/* =========================
BLOG GRID
========================= */

.blog-grid{

grid-template-columns:1fr;

gap:25px;

}

.blog-card{

border-radius:28px;

}

.blog-image img{

height:230px;

}

/* =========================
PRICING GRID
========================= */

.pricing-grid{

grid-template-columns:1fr;

gap:25px;

}

.pricing-card{

padding:40px 28px;

border-radius:28px;

}

.plan-name{

font-size:30px;

}

.plan-price{

font-size:48px;

}

/* =========================
CASE GRID
========================= */

.case-grid{

grid-template-columns:1fr;

gap:25px;

}

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

.footer{

padding:80px 5% 35px;

}

.footer-grid{

grid-template-columns:1fr;

gap:40px;

}

.footer-bottom{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

/* =========================
DASHBOARD MOBILE
========================= */

.dashboard-main{

padding:25px 15px;

}

.dashboard-title h1{

font-size:32px;

line-height:1.3;

}

.dashboard-title p{

font-size:15px;

}

.stats-grid{

grid-template-columns:1fr;

gap:20px;

}

.stat-card{

padding:28px 24px;

border-radius:24px;

}

.stat-card h2{

font-size:36px;

}

.analytics-box,
.activity-box,
.table-box{

padding:24px;

border-radius:24px;

}

.analytics-box h3,
.activity-box h3,
.table-box h3{

font-size:24px;

}

.chart-placeholder{

height:240px;

font-size:18px;

}

.dashboard-table th,
.dashboard-table td{

padding:14px;

font-size:14px;

}

.profile-box{

padding:12px 15px;

border-radius:18px;

}

.profile-box img{

width:48px;
height:48px;

}

.profile-info h4{

font-size:16px;

}

/* =========================
FORMS
========================= */

.contact-form,
.login-box,
.policy-container,
.terms-container{

padding:35px 24px;

border-radius:28px;

}

/* =========================
NEWSLETTER
========================= */

.newsletter-form{

flex-direction:column;

}

.newsletter-form input,
.newsletter-form button{

width:100%;

}

}

/* ===================================================
SMALL MOBILE DEVICES
=================================================== */

@media(max-width:576px){

/* =========================
NAVBAR
========================= */

.navbar{

width:100%;

right:-100%;

padding:30px 24px;

}

/* =========================
HEADINGS
========================= */

.hero-content h1{

font-size:36px;

}

.section-title h2{

font-size:30px;

}

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

.primary-btn,
.secondary-btn{

width:100%;

padding:16px 24px;

font-size:15px;

}

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

.team-card,
.blog-card,
.case-card,
.pricing-card{

border-radius:24px;

}

/* =========================
TEAM
========================= */

.team-image img{

height:280px;

}

/* =========================
BLOG
========================= */

.blog-content h3{

font-size:24px;

}

/* =========================
PRICING
========================= */

.plan-price{

font-size:42px;

}

/* =========================
DASHBOARD
========================= */

.dashboard-main{

padding:20px 12px;

}

.dashboard-title h1{

font-size:28px;

}

.chart-placeholder{

height:200px;

font-size:16px;

}

.analytics-box,
.activity-box,
.table-box{

padding:20px;

}

.dashboard-table{

min-width:650px;

}

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

.footer h4{

font-size:20px;

}

.footer p,
.footer ul li a{

font-size:14px;

}

}