:root{
  --main-color:#f9f7fe;
  --second-main:#6C63FF;
}
.hero h1{font-family: "Playfair Display", serif;
  font-weight: bold;
  font-size: 80px;
  }
  .hero p{ font-family: "Poppins", sans-serif;
  font-weight: bold;
font-size: 30px;}
.hero h2{ font-family: "Playfair Display", serif;
  font-weight:550;
  font-size: 60px;}
  h2{font-family: "Poppins", sans-serif;
  font-weight: 700;
font-size: 50px
}

p{font-family:"Poppins", sans-serif ;
font-size: 18px;
line-height: 30px;
opacity: 70%;}

  .hero{background-color: var(--main-color);
text-align: center;
margin: 60px auto;
border-radius: 10px;
max-width: 90%;

padding: 50px;
}


.btn-branding{ background-color: var(--second-main);
  border-radius: 4px;
  padding: 18px 30px;
  margin: 20px auto;
  color: white;  
  font-size: 18px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: 27px;

}
.btn-branding-outline{
  
  border: 1px solid var(--second-main);
  color: var(--second-main);
  border-radius: 4px;
  padding: 18px 30px;

  font-size: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 500; 

}
.project-description{
  padding: 120px 80px;
}
 .about-section img{padding: 10px 0 ;
  border-radius: 10%;
  max-width: 546px;
  }




.about-section{ margin: 60px auto;}


.about-section h1{font-family: "Playfair Display", serif;
  font-weight:700;
  font-size: 64px;}

  .about-section h2{font-family: "Poppins", sans-serif;
  font-weight: 700;
font-size: 18px

  }
  .about-section p{
    font-family: "Poppins", sans-serif;
  font-weight: 400;
font-size: 16px;
line-height: 30px;
  }

  .work-section h1{
    text-align: center;
   font-family: "Playfair Display", serif;;
  font-weight: 500;
  column-gap: 10px;
font-size: 60px;
  }
  .container-image-size{ max-width: 50%;
  display: block;
margin: 0 auto;}

.inquire h1{text-align: left;}
.inquire p{text-align: left;}
.inquire a{ margin: 20px 20px 10px 70px; }


  


.inquire{  background-color: var(--main-color);
width: 600px;
margin: 30px auto;
padding: 20px;
text-align: center;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-evenly;
}


.contact a { 
text-decoration:none;}

.navbar-nav {gap: 30px;
margin-right: 40px;
}

.navbar-nav .nav-link{ text-decoration: none;
color: #272142!important; 
transition: all 100ms ease-in-out;}


.navbar-nav .nav-link.active{color: var(--second-main) !important;}

 .navbar-collapse{display: flex; 
justify-content: flex-end;
align-items: center;
gap: 8px;
padding:  10px;
} 
.navbar-nav{
  display: flex;
  justify-content: flex-start;

}

.navbar-nav .nav-link:hover{color: var(--second-color)!important;}

.navbar-brand{opacity: 0.8;}

footer .email-link{text-decoration: none;
  color: black;
  display: block;
font-size: 24px;
text-align: center;}


footer .email-link:hover{color: var(--second-main);}
footer .social-links{ 
text-align:  center;
  gap: 15px;
  
}
footer .email-link {
  text-decoration: none;
  color: #272142;
  display: block;
  font-size: 24px;
  margin-bottom: 25px;
  transition: all 300ms ease-in-out;}

footer .social-links a{
  margin:0 10px;
  color: var(--second-main);
  font-size: 30px;
 
}
footer .social-links a:hover{
  color: #f9f7fe;
  background-color: var(--second-main);
}

footer .github-link a { text-decoration:none;
  color:  var(--second-main);
   padding: 10px 10px;
  border-radius: 50% ;
}
footer .github-link a:hover{color: #f9f7fe;
  background-color: var(--second-main)}
@media(max-width:560px)
{ .project-description{text-align: center;
}
.hero{max-width: 50%;}
.hero h1{ font-size: 44px;}
h2{font-size: 30px;}
.hero p{font-size: 18px;
  padding: 0 50px;
}
.hero h2{
  font-size: 40px;
  font-weight: 700;}
  .about-section{text-align: center;
  margin: 0 auto;}
img{padding:80px 80px ;}
}


@media(max-width:764px){.about-section img{max-width: 320px;}

}