/* =====================
RESPONSIVE
===================== */

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

}

.project-results {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media(max-width:992px){

.layout{

grid-template-columns:1fr;

}

.sidebar{

position:relative;

top:auto;

}

.hero h2{

font-size:42px;

}

}

@media(max-width:768px){

.blog-grid{

grid-template-columns:1fr;

}

.portfolio-grid{

grid-template-columns: 1fr !important;

}

.layout{

padding:15px;

}

.topbar nav{

overflow:auto;

gap:25px;

}

.service-grid,
.testimonial-grid,
.client-grid{

grid-template-columns:1fr;

}

.hero{

padding:35px;

}

.hero h2{

font-size:34px;

}

.hero-actions{

flex-direction:column;

}

}




@media(max-width:992px){

.menu-toggle{

display:block;

}

.topbar{

display:flex;
align-items:center;
justify-content:space-between;

}

.topbar nav{

position:fixed;

top:0;
right:-140%;

width:320px;
max-width:90vw;

height:100vh;

background:#101826;

z-index:99999;

transition:.4s;

padding:100px 40px;
border-radius: 24px;

display:flex;
flex-direction:column;
gap:24px;

}

.light-mode .topbar nav {
	background: #fff;
}

.topbar nav.active{

right:0 !important;
top: 0 !important;;

}

}



@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

}

.cta-card{

padding:50px 30px;

}

.cta-card h2{

font-size:34px;

}

.cta-actions{

flex-direction:column;

}

}





@media(max-width:992px){

.featured-project{

grid-template-columns:1fr;

}

.portfolio-masonry{

columns:2;

}

}

@media(max-width:768px){

.portfolio-masonry{

columns:2;

}

}

.portfolio-item{

transition:
all .45s ease;

}
@media(max-width:480px){
	.portfolio-masonry{

	columns:1;

	}

}


@media(max-width:992px){

.modal-content{

grid-template-columns:1fr;

max-height:90vh;

overflow-y:auto;

}

.modal-image{

min-height:300px;

}

.modal-body{

padding:32px;

}

.modal-header h2{

font-size:30px;

}

}




@media(max-width:992px){

.featured-post{

grid-template-columns:1fr;

}

.blog-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.blog-grid{

grid-template-columns:1fr;

}

.newsletter form{

flex-direction:column;

}

.newsletter input{

width:100%;

}

}



@media(max-width:1200px){

.post-layout{

grid-template-columns:
200px minmax(0,1fr);

gap:24px;

}

}

@media(max-width:992px){

.post-layout{

grid-template-columns:1fr;

}

.toc{

position:relative;
top:auto;

margin-bottom:24px;

}

}


@media(max-width:992px){

.related-posts .blog-grid{

grid-template-columns:
1fr 1fr;

}

}
@media(max-width:768px){

.related-posts .blog-grid{

grid-template-columns:
1fr;

}

.post-meta{

flex-direction:column;

}

}



@media(max-width:992px){

.contact-layout{

grid-template-columns:1fr;

}

.contact-cards{

grid-template-columns:1fr;

}

}


@media(max-width:768px){

.error-actions{

flex-direction:column;

}

.error-actions a{

width:100%;

}

}


@media(max-width:992px){

.project-meta{

grid-template-columns:
1fr 1fr;

}

.project-story{

grid-template-columns:
1fr;

}

.project-results{

grid-template-columns:
1fr;

}

}

@media(max-width:768px){

.project-gallery{

grid-template-columns:
1fr;

}

.project-meta{

grid-template-columns:
1fr;

}

}


@media (max-width: 768px) {
	.footer-grid {
		padding: 0 15px;
	}
}



/* resume */
@media(max-width:992px){

.cert-grid{

grid-template-columns:
1fr 1fr;

}

}
@media(max-width:768px){

.cert-grid{

grid-template-columns:1fr;

}

.award-header{

flex-direction:column;

align-items:flex-start;

}

}


@media(max-width:1200px){

.radial-grid{

grid-template-columns:
repeat(2,1fr);

gap:20px;

}

}

@media(max-width:992px){

.radial-grid{

grid-template-columns:
repeat(2,1fr);

gap:20px;

}

}

@media(max-width:768px){

.radial-grid{

grid-template-columns:1fr;

gap:16px;

}

.radial-card{

padding:24px;

}

}

@media(max-width:480px){

.radial-card{

padding:20px;

}

.circle{

width:120px;
height:120px;

}

.circle span{

width:92px;
height:92px;

font-size:14px;

}

}
