:root{
    --primary-color:#033b4a;
    --secondary-color:#20c997;
    --gray:#4a4a4d;
    --bg-primary:#ecf0f3;
}
*{margin: 0;padding: 0;box-sizing: border-box;}
 html{scroll-behavior: smooth;}
ul {list-style: none;}

a {text-decoration: none;}
.container{max-width: 1100px;padding: 0 2rem;margin: auto;}

.text-primary{color: var(--secondary-color);}
.btn-primary{background-color: var(--secondary-color);color: #fff;transition: all 0.3s ease;
padding: 8px 20px;font-size: 14px;border-radius: 6px;border: none;cursor: pointer;}

.btn-primary:hover{background-color: #15a076;}

header{background-color: var(--bg-primary);height: 100vh;}
header .navbar{background-color: #fff;z-index: 1;
border: 1px solid #ccc; position: fixed;width: 100%;}
#home #logo{
    color:var(--primary-color) ;font-weight: 600;font-size: 24px;
}
#home .navbar nav{display: flex;justify-content: space-between;align-items: center;max-width: 1100px;margin: auto;padding: 1.5rem 2rem;}
#home .navbar nav ul{display: flex;justify-content: center;align-items: center;}
#home .navbar nav ul a{color:var(--primary-color) ;font-weight: 600;margin: 0 15px;}

#home .header-content{display: grid;grid-template-columns: 1.5fr 1fr;
max-width:1100px ;margin: auto;height: 100%;align-items: center;padding: 5rem 2rem;}

#home .header-content .content-text{margin-bottom :5rem ;}
#home .header-content img{max-width: 350px;}
#home .header-content p span{font-size: 20px;font-weight: 700;}
#home .header-content h1{font-size: 60px;color: var(--primary-color);
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);margin-top: 10px;}

#home .header-content .title{font-size: 25px;color: var(--primary-color);margin: 10px 0;font-weight: 500}
#home .header-content .social{margin: 1rem 0 2rem;}
#home .header-content .social a i {
    font-size: 18px;padding: 10px;
    background-color: var(--gray);color: #fff;border-radius: 50%;
    margin-right: 10px;transition: all 0.3s ease;
}
#home .header-content .social a i:hover{transform: scale(0.85);}

#about ,
#skills, #services , #portfolio{padding: 6rem 0;}
#about h2 , #skills h2 , #services h2 , #portfolio h2 ,#contact h2{text-align: center;font-size: 38px;color: var(--primary-color);font-weight: 600;letter-spacing: 1px;}
#about hr , #skills hr , #services hr , #portfolio hr{width: 100px;height: 3px;border: none;margin: 5px auto 0;background-color: var(--secondary-color);}
#about .about_content{margin-top: 4rem;display: grid;grid-template-columns: 1.8fr 1fr;column-gap: 3rem;}
#about .about_content .col-1 h3 {font-size: 28px;margin-bottom: 20px;color: var(--primary-color);}
#about .about_content .col-1 p{color: var(--gray);margin-bottom: 20px;line-height: 1.8;}
#about .about_content .col-2 p{color: var(--gray);margin-bottom: 20px;padding-bottom: 5px;border-bottom: 1px solid #ddd;}

#skills .row img{max-width: 70px;}
#skills {background-color: var(--primary-color);}
#skills h2 , #Portfolio h2{color: #fff;font-family: sans-serif;}

#skills .skills-content{background-color: #0f272d;margin-top: 2rem;}
#skills .skills-content .row {display: grid;grid-template-columns:repeat(4,1fr);align-items: center;text-align: center;}
#skills .skills-content .row .item{color: #fff;background-color: #000;margin: 20px;padding: 1rem;transition: all 0.3s ease;
border-radius: 10px;font-size: 18px;font-weight: 600;}
#skills .skills-content .row .item:nth-child(3) img{max-width: 90px;}
#skills .skills-content .row .item:nth-child(8) img{max-width:55px;}
#skills .skills-content .row .item:hover{box-shadow: 10px 10px 10px #00f4ab0c;}

#services ,#contact{background-color: #00f4ab0c;}
#services .heading img{max-width: 80px;margin-right: 15px;}
#services .heading{display: flex;justify-content: center;align-items: center;}
#services .row{display: grid;grid-template-columns: repeat(3,1fr);margin-top: 4rem;text-align: center;column-gap: 2rem;
row-gap: 4rem;}
#services .row .item img{max-width: 120px;}
#services .row .item{padding: 30px 15px;background-color:#fff ;box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 8px;transition: all 0.3s ease;}
#services .row .item:hover{transform: scale(1.05);}

#services .row .item h3{margin: 15px 0; color: var(--primary-color);}
#services .row .item p{font-size: 14px;}


#portfolio {background-color: var(--primary-color);}
#portfolio .row .item img{max-width: 100%;border-top-left-radius:5px ;border-top-right-radius:5px;border: 2px solid #ccc;}
#portfolio .row {display: grid; grid-template-columns: repeat(2,1fr);justify-content:center;align-items: center;
gap: 5rem;margin: 4rem;}
#portfolio .row .item{background-color: #fff;border-radius: 9px;transition: all 0.3s ease;}
#portfolio .row .item .item-content {padding: 20px 15px 30px;}
#portfolio .row .item .item-content h3 {font-size:16px;color: var(--primary-color);margin-bottom:10px ;font-weight: 800;}
#portfolio .row .item:hover{transform: scale(1.05);}

#contact{padding: 4rem 0;}
#contact .row{margin-top: 4rem;display: grid;grid-template-columns:repeat(2, 1fr);background-color: #fff;
box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.2);padding: 2rem 3rem;border-radius: 10px;column-gap: 2rem;}
#contact .row input ,#contact .row textarea
{
  display: block;  width: 100%;margin: 30px 0;padding: 20px;background-color: #00f4ab35;border: 2px solid #fff; outline: none;
}


#footer{background-color: #222; color: #fff;padding: 1rem 0;text-align: center;}


@media (max-width: 768px) {
  #home .navbar nav {
    display: block;
    text-align: center;
   }

#home .navbar nav ul {
    margin-top: 20px;
}
#home .navbar nav ul a {
     margin: 0 8px;
}
#home .header-content{grid-template-columns: 1fr;}
#home .header-content .content-text{
    margin-bottom: 0rem; margin-top: 5rem;
}
#home .header-content img {max-width: 350px; margin: auto;}
#home .header-content h1 {font-size: 50px;}

#about .about_content, #contact .row{grid-template-columns: 1fr;row-gap: 3rem;}
#skills .skills-content .row , #services .row , #portfolio .row{grid-template-columns: repeat(2 , 1fr);}
#contact .row img {max-width: 250px;margin: auto;}
}


@media (max-width: 528px){
#home .header-content h1{font-size: 35px;}
#home .header-content p span , #home .header-content .title{font-size: 16px;}
#home .header-content img{margin-top: 2rem;}
#about h2 , #skills h2 , #services h2 , #portfolio h2 ,#contact h2{font-size: 30px;}
#about .about_content .col-1 h3{font-size: 20px;}
#skills .skills-content .row , #services .row , #portfolio .row{grid-template-columns: 1fr;}
#contact .row{padding: 2rem 1rem;}
}



body{font-family: 'poppins',sans-serif;}
h1,h2{font-family: 'saira',sans-serif ;}