/*======================================
        BLINK LAB
        responsive.css
=======================================*/

/* ---------- 1200px ---------- */

@media (max-width:1200px){

.container{

width:92%;

}

.hero{

gap:40px;

}

.hero h1{

font-size:56px;

}

.hero-circle{

width:360px;
height:360px;

}

}

/* ---------- 992px ---------- */

@media (max-width:992px){

.nav-links{

display:none;

}

.navbar{

padding:16px;

}

.hero{

grid-template-columns:1fr;

text-align:center;

padding-top:140px;

}

.hero-content{

display:flex;
flex-direction:column;
align-items:center;

}

.hero-buttons{

justify-content:center;

}

.hero-image{

margin-top:60px;

}

.hero-circle{

width:320px;
height:320px;

}

.cards{

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

}

.tech-grid{

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

}

.portfolio-grid{

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

}

.pricing{

grid-template-columns:1fr;

}

}

/* ---------- 768px ---------- */

@media(max-width:768px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:44px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.btn-primary,
.btn-secondary{

width:100%;

text-align:center;

}

.cards{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns:1fr;

}

.tech-grid{

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

}

section{

padding:90px 0;

}

.price-card.featured{

transform:none;

}

form{

width:100%;

}

input,
textarea{

width:100%;

}

}

/* ---------- 576px ---------- */

@media(max-width:576px){

.logo{

font-size:20px;

}

.hero h1{

font-size:34px;

line-height:1.15;

}

.hero p{

font-size:16px;

}

.badge{

font-size:14px;

padding:8px 16px;

}

.hero-circle{

width:230px;
height:230px;

}

.project-image{

height:180px;

}

h2{

font-size:32px;

}

.tech-card,
.card,
.project,
.price-card{

padding:22px;

}

footer{

padding:50px 20px;

}

}

/* ---------- 420px ---------- */

@media(max-width:420px){

.hero{

padding-top:110px;

}

.hero h1{

font-size:30px;

}

.hero-circle{

width:180px;
height:180px;

}

.tech-grid{

grid-template-columns:1fr;

}

.hero-buttons{

gap:14px;

}

.navbar{

border-radius:16px;

}

}