@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Saira:ital,wght@0,700;1,700&display=swap');
:root {

  --primary-color:#033b4a;
  --secondary-color:#81441c;
  --gray:#cb8a40;
  --bg-primary: #ecf0ec; 
}

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



   
body {
    font-family: "Poppins", sans-serif;
}

h1,
h2 {
    font-family: "Saira", sans-serif;
     
}
ul{
    list-style: none;
}

a {
    text-decoration: none;
}
/* Utility Classes */
.container  {
    max-width: 1100px;
    margin: auto;
    padding: 0 2rem;
    
}
.text-primary {
    color:var(--secondary-color);
}
.btn-primary {
    background-color:var(--secondary-color);
    color: #fff;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: all  0,3s ease;
}

.btn-primary:hover {
    background-color: #81441c;
}
/* Header start */
header {
    background-color: var(--bg-primary);
    height: 100vh;

}

header .navbar {
 background-color:#fff;
 border-bottom: 1px solid #ccc;
 position: fixed;
 width: 100%;
 padding: 1,5rem 2rem;
 
 
}

header .navbar nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1100px;
  margin:auto; 
 padding: 1.5rem 2rem;
}
#home #logo {
    color:var(--primary-color);
    font-size: 24px;
    font-weight: 600;
}

header .navbar nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
}
header .navbar nav ul a {
    margin: 0 15px;
    color: var(--primary-color);
    font-weight: 600;
}

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



#home .header-content p span {
    font-weight: 700;
    font-size: 20px;
}
#home .header-content h1 {

    font-size: 60px;
    color: var(--primary-color);
    text-shadow: 3px 3px 3px rgba(0,0,0,2); 
}
#home .header-content .title {
    font-size: 20px;
    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,10px,10px,10px;
    background-color: var(--gray);
    color:#fff;
    margin-right: 10px;
    transition: all 0.3s ease;
}
#home .header-content .social a i:hover {
    transform: scale(0.85);
}
header .header-contect img {
    max-width: 450px;
    height:auto;
} 


/*Header End*/

/* About start*/
#about,
#skills {
  padding: 6rem 0;

}
   

#about h2,
#skills h2 ,
#contact h2 {

    text-align : center;
    font-size: 38px;
    color: var(--primary-color);
    font-weight: 600;
    letter-spacing: 1px;
}

#about hr,
#skills hr ,
#contact hr {
 
    width: 100px;
    height: 3px;
    background-color: var(--secondary-color);
    border: none;
    margin: 5px auto 0;
}

#about .about-content {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 3rem;
}


#about .about-content.col-1 h3 {
    font-size: 28px;
    color:var(--primary-color);
    margin-bottom: 20px;
}

#about .about-content .col-1 p {
    color: #000;
    margin-bottom: 20px;
    line-height: 1.8;
}

#about .about-content .col-2 p {
    color:#000;
    margin-bottom: 20px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
}
/*About End */

/* Skills Start */
#skills  {
    background-color:#c88232;
}



#skills h2 {
    color:#fff;
    font-family: 'poppins, sans-serif';
}
#skills .skills-content {
    margin-top: 2rem;
    background-color: #8a602f;
}

#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;
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
}

#skills .skills-content .row .item:hover {
    box-shadow: 10px 10px 10px #00f4ab0C;
}
#skills .skills-content .row .item:nth-child(3) img {
    max-width: 40px;
}


#skills .row img {
    max-width: 40px;
}
/* Skills End */

/* Contact Start */
#contact {
    Padding: 4rem 0;
 

}

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

#contact .row img {
    
    width: 100%;
    border-radius: 50px;
}

/* Contact End */

/* Footer Start */
#footer {
    background-color:#8a602f;
    color: #fff;
    padding: 1rem;
}
/* Footer End */