@media (max-width:768px) {

    .hero {

        flex-direction: column;

        text-align: center;

        gap: 40px;

    }

    .hero-image img {

        width: 250px;

    }

    .project-container {

        grid-template-columns: 1fr;

    }
/* Lock Toggle Button */
  @media (max-width:768px){

.menu-toggle{
display:block;
position:fixed;
top:20px;
right:20px;
z-index:1001;
color:white;
}

.nav-links{
position:fixed;
top:0;
right:-100%;
width:150px;
height:30vh;
display: flex;
background:#0a192f;
flex-direction:column;
align-items:center;
justify-content:center;
gap:30px;
transition:0.4s;
}

.nav-links.active{
right:0;
}

}
    @media(max-width:768px) {

        .menu-icon {

            display: block;

        }

    }
}

@media (max-width: 992px) {

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

    .expertise-card {
        border-bottom: 1px solid #444;
    }
}

@media (max-width: 600px) {

    .section-title {
        font-size: 40px;
    }

    .expertise {
        padding: 80px 20px;
    }

    .expertise-container {
        grid-template-columns: 1fr;
    }

    .expertise-card {
        border-right: none;
        border-bottom: 1px solid #444;
        padding: 40px 20px;
    }

}

@media (max-width:600px) {

    .code-bg {
        font-size: 10px;
        left: 10px;
        transform: none;
    }
}

@media(max-width:992px) {

    .work-container {
        flex-direction: column;
        text-align: center;
    }

    .work-title {
        font-size: 70px;
    }

    .phone {
        width: 220px;
    }

}

@media(max-width:600px) {

    .work {
        padding: 80px 20px;
    }

    .work-title {
        font-size: 50px;
    }

    .work-desc {
        font-size: 14px;
    }

    .phone {
        width: 180px;
    }

}

@media(max-width:768px) {

    .exp-title {
        font-size: 45px;
    }

    .exp-header h2 {
        font-size: 22px;
    }

    .exp-card {
        padding: 20px;
    }

}
/* ============================= */
/* TABLET RESPONSIVE */
/* ============================= */

@media (max-width:1024px){

.navbar{
padding:20px 40px;
}

.hero h1{
font-size:70px;
}

.section-title{
font-size:40px;
}

.work-container{
flex-direction:column;
text-align:center;
}

.work-title{
font-size:80px;
}

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

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




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

@media (max-width:768px){

.navbar{
padding:20px;
}

.nav-links{
display:block;
}


.hero h1{
font-size:48px;
letter-spacing:3px;
}

.hero p{
font-size:16px;
}

.featured{
margin:2px 0;
}

.logo-track{
gap:40px;
}

.section-title{
font-size:32px;
}

.expertise{
padding:80px 20px;
}

.expertise-container{
grid-template-columns:1fr;
}

.expertise-card{
border-right:none;
border-bottom:1px solid #444;
}

.work{
padding:80px 20px;
}

.work-title{
font-size:60px;
}

.phone{
width:200px;
}

.grid{
grid-template-columns:1fr;
}

.large{
grid-column:span 1;
}

.large img{
height:320px;
}



.scroll-top{
right:20px;
bottom:20px;
width:45px;
height:45px;
font-size:20px;
}

}


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

@media (max-width:480px){

.hero h1{
font-size:36px;
}

.hero p{
font-size:14px;
letter-spacing:2px;
}

.logo-track img{
height:30px;
}

.section-title{
font-size:26px;
}

.work-title{
font-size:42px;
}

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

@media (max-width:1024px){

.contact{
grid-template-columns:1fr;
}

/* left section */
.contact-left{
padding:80px 40px;
text-align:center;
}

.contact-left h1{
font-size:38px;
}

.contact-left p{
font-size:15px;
}

.contact-links{
justify-content:center;
}

}


/* MOBILE */

@media (max-width:768px){

.contact-right{
grid-template-columns:1fr;
grid-template-rows:auto;
grid-template-areas:
"card1"
"card2"
"card3";
}

/* cards */
.contact-card{
padding:35px 25px;
}

.contact-card img{
width:50px;
height:50px;
top:20px;
right:20px;
}

.contact-card p{
margin-top:60px;
font-size:14px;
line-height:1.5;
}

.contact-card h4{
font-size:16px;
}

.contact-card span{
font-size:13px;
}

}


/* SMALL MOBILE */

@media (max-width:480px){

.contact-left{
padding:60px 25px;
}

.contact-left h1{
font-size:32px;
}

.contact-left .email{
font-size:16px;
}

.contact-links a{
font-size:20px;
}

.contact-card{
padding:25px 20px;
}

}
}
}