* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "IBM Plex Mono", monospace;
}
html{
    scroll-behavior: smooth;
}
body{
    background: #EEEEEE;
    color: #333333;
}
#header{
    width: 98%;
    height: 35vh;
    margin: 30px auto;
   
    transition: box-shadow 0.4s ease-in-out, transform 0.4s ease-in-out;
}
#header:hover{
    border-radius: 50px;
    box-shadow: 0 0 20px 10px rgba(0, 121, 107, 0.65); 
    transform: scale(0.99); 
}

.container{
    padding: 10px 10%;
}
.nav{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    margin: 0;
}
.fa-solid {
    cursor: pointer;
    color: #00796B;
}
.title{
    padding: 10px;
    font-size: 20px;
    height: fit-content;
    width: fit-content;
    color: #004D40;
    margin-right: auto;
}
.title:hover{
    border-radius: 25px;
    font-weight: 700;
    box-shadow: 0 0 5px 5px rgba(0, 121, 107, 0.5);
}
#sidemenu{
    transition: border 0.2s;
    padding: 10px;
}
#sidemenu:hover{
    box-shadow: 0 0 5px 2px rgba(0, 121, 107, 0.4);
    border-radius:50px;
}
nav ul{
    display: flex;
}
nav ul li{
    display: inline-block;
    list-style: none;
    margin: 10px 30px;
}
nav ul li a{
    color: #00796B;
    text-decoration: none;
    font-size: 16px;
    position: relative;
}
nav ul li a::after{
content: '';
width: 0;
height: 2px;
background: #004D40;
position: absolute;
left: 0;
bottom: -6px;
transition: 0.5s;
}
nav ul li a:hover::after{
width: 100%;
}
.header-text{
margin-top: -3%;
font-size: 20px;
color: #333333;
}
.header-text h1{
   
    font-size: 52px; 
    margin-top: 20px;
    color: #004D40;
}

/* --- About Section --- */
#about{
    padding: 80px 0;
    color: #333333;
    }
    .row{
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
    }
    .define-me{
    padding: 10px;
    flex-basis: 100%;
    }
    .define-me:hover{
    border-radius: 25px;
    box-shadow: 0 0 5px 2px rgba(0, 121, 107, 0.4) ;
    }
    /* ... (Other CSS remains unchanged) ... */

    .subtitle{
            /* FONT SIZE CHANGE: Reduced from 60px to 48px */
            font-size: 48px;
            font-weight: 600;
            color: #004D40;
            transition: font-size 0.5s, border-radius 0.3s, box-shadow 0.3s, color 0.3s, transform 0.3s;
            height: fit-content;
            width: fit-content;
           display: block;
           padding: 5px;
           border-bottom: 3px solid #00796B; 
        }
        .subtitle:hover
        {
          transform: scale(1.03); 
          color: #00796B; 
          border-radius: 5px; 
          border-bottom: 3px solid #004D40; 
        }
        .about{
          margin-top: -80px;
          margin-bottom: 10px;
        }
        .project{
        margin-top: -70px;
        }
        .contact{
          margin-top: -70px;
        }

        .tab-title{
            display: flex;
            margin: 20px 0 40px;
        }
        .tab-links{
            margin-right: 50px;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            position: relative;
            color: #333333;
        }
         .tab-links::after{
           content: '';
           width: 0;
           height: 3px;
           background: #004D40;
           position: absolute;
           bottom: -8px;
           left: 0;
           transition: 0.5;
         }
         .tab-links.active-link{
             color: #00796B;
         }
         .tab-links.active-link::after{
         width: 50%;
         }
         .tab-contents ul li{
             list-style: none;
             margin: 10px 0;
         }
         .tab-contents ul li span{
             color: #00796B;
             font-size: 20px;

         }
         .tab-contents{
             display: none;
         }
         .tab-contents.active-tab{
             display: block;
         }
         
         #service{
             padding: 30px 0;
         }
         .service-list{
             display: grid;
             grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
             grid-gap: 50px;
             margin-top: 50px;
         }
         .service-list div{
             background: #F8F8F8;
             padding: 40px;
             font-size: 15px;
             font-weight: 300;
             border-radius: 10px;
             transition: background 0.5s,transform 0.5s;
             color: #333333;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
         }
         .service-list div i{
             font-size: 50px;
             margin-bottom: 30px;
             color: #00796B;
         }

         .service-list div h2{
             font-size: 30px;
             font-weight: 500;
             margin-bottom: 15px;
             color: #004D40;
         }
         .service-list div a{
             text-decoration: none;
             color: #00796B;
             font-size: 12px;
             margin-top: 20px;
             display: inline-block;
         }
         .service-list div:hover{
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 15px rgba(0, 121, 107, 0.6);
         }
         /* --- Portfolio Section --- */
         #portfolio{
         padding:50px 0 ;
         }
         .work-list{
             display: flex;
            justify-content: space-evenly;
            flex-wrap: wrap;
             margin-top: 50px;
             gap: 20px;
         }
         .work{
              background: #F8F8F8;
              color: #333333;
             border-radius: 10px;
             position: relative;
             overflow: hidden ;
              height:100px;
             width: 350px;
             text-align: center;
         }
         .layer{
             color: #FFFFFF;
             width: 100%;
             height: 0;
             background: rgba(0, 121, 107, 0.85);
             position: absolute;
             left: 0;
             bottom: 0;
             overflow: hidden;
             display: block;
             align-items: center;
             justify-content: center;
             flex-direction: column;
             padding: 0 40px;
             text-align: center;
             font-size: 24px;
             transition: height 0.5s;
         }
         .layer p{
             margin-top: 20px;
             color: #F0F0F0;
         }
         .layer h3{
             font-weight: 500;
             margin-bottom: 20px;
             margin-top: 10px;
         }
         .layer a{
             margin-top: 0px;
             color: #004D40;
             font-size: 18px;
             background-color:#FFFFFF ;
             line-height: 30px;
             text-decoration: none;
             width: 30px;
             border-radius: 50%;
             text-align: center;
         }
         .work:hover img{
             transform: scale(1.1);
         }
         .work:hover .layer{
             height: 100%;
         }
         .btn{
             display: block;
             margin: 50px auto;
             width: fit-content;
             border: 1px solid #00796B;
             padding: 14px 50px;
             border-radius: 5px;
             color: #00796B;
             transition: background 0.5s;
         }
         .btn:hover{
             background: #00796B;
             color: #FFFFFF;
         }
         /* --- Contact Section --- */

         .contact-left{
         flex-basis: 35%;
         }
         .contact-right{
         flex-basis: 60%;
         }
         .contact-left p{
             margin-top: 30px;
             color: #333333;
         }
         .contact-left p i{
             color: #00796B ;
             margin-right:15px ;
             font-size: 25px;
         }
         .social-icon{
             margin-top: 30px;
         }
         .social-icon a{
             text-decoration: none;
             font-size: 30px;
             margin-right: 15px;
             color: #555555;
             display: inline-block;
             transition: transform 0.5s;
         }
         .social-icon a:hover{
             color: #00796B;
             transform: translate(-5px);
         }
         .btn.btn-2{
             display: inline-block;
             background-color: #00796B;
             color: #FFFFFF;
         }
         .contact-right form{
             width: 100%;
         }
         form input,form textarea{
width: 100%;
border: 0;
outline: none;
background-color: #F0F0F0;
padding: 15px;
margin: 15px 0;
color: #333333;
font-size: 18px;
border-radius: 6px;
         }
         form .btn-2{
             padding: 24px 60px;
             font-size: 18px;
             margin-top: 20px;
             cursor: pointer;
         }
         .copyright{
          width: 100%;
         text-align: center;
           padding: 25px;
         background: #EEEEEE;
font-weight: 300;
margin-top: 20px;
color: #555555;
         }
         .copyright i{
             color: #00796B;
         }
         nav .fa-solid{
             display: none;
         }
         #msg{
             color: #00796B;
             margin-top: -30px;
             display: block;
         }
         .work{
              height:100px;
             width: 200px;
             text-align: center;
         }
          .layer p{
             margin-top: 20px;
             font-size: 25px;
         }


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


    .container {
        padding: 10px 5%;
    }

    .nav {
        justify-content: space-between;
        align-items: center;
    }
    .title {
        margin-right: 0;
    }

    nav ul{
        display: none;
    }

    nav .fa-solid{
        display: block;
        font-size: 25px;
        position: relative;
        z-index: 300;
    }

    nav ul{
        background: #F8F8F8;
        position: fixed;
        top: 0;
        right: -200px;
        width: 200px;
        height: 100vh;
        padding-top: 50px;
        z-index: 100;
        transition: right 0.5s;
        display: block;
        border-left: 1px solid #CCCCCC;
    }

    nav ul li{
        display: block;
        margin: 25px;
        color: #333333;
    }

    .header-text{
        margin-top: 10%;
        font-size: 16px;
    }
    .header-text h1{
        font-size: 28px;
    }
    .subtitle{
        font-size: 32px;
    }
    .tab-links{
        font-size: 16px;
        margin-right: 20px;
    }

    .row {
        display: block;
    }
    .contact-left, .contact-right{
        flex-basis: 100%;
    }
    .contact-left {
        margin-bottom: 30px;
    }

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

    .work-list {
        justify-content: center;
        gap: 20px;
    }
    .work{
        width: 90%;
        margin: 0 auto;
        height: 120px;
    }

    /* Footer */
    .copyright{
        font-size: 14px;
    }

}