/* --------------------------------------
  Mobile Styling
-------------------------------------- */

h1, h2 {
  font-size: 2rem;
}

h1 {
  margin-bottom: 25px;
}

h2 {
  margin-bottom: 40px;
}

h2 > i {
  margin-right: 10px;
}

h3 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}

/* --------------------------------------
  Reusable Classes
-------------------------------------- */

.container {
  padding: 0 20px;
}

/* --------------------------------------
  Header
-------------------------------------- */

.header {
  padding: 15px 20px;
    
}

.header-logo-img {
  width: 40px;
}

.header-logo-title {
  display: ;
}

.header-nav-menu-item {
  margin-left: 10px;
  text-align: center;
  position: relative;
  right:39px;
  font-size: 21px;
  
  
  
  
}

/* --------------------------------------
  Main - Hero
-------------------------------------- */

.main-hero {
  padding: 100px 0 80px;
}

.main-hero-highlight-links p {
  margin-bottom: 20px;
}

.main-hero-highlight-links p > br {
  display: none;
}

.main-hero-img {
  display: none;
}

/* --------------------------------------
  Main - Works
-------------------------------------- */

.main-works {
  padding: 80px 0;
}

.main-works-item {
  margin-bottom: 50px;
}

.main-works-item-img {
  margin-bottom: 40px;
}

.main-works-item-text p:last-of-type {
  margin-bottom: 30px;
}

/* --------------------------------------
  Main - About
-------------------------------------- */

.main-about {
  padding: 80px 0 60px;
}

.main-about-img {
  text-align: center;
}

.main-about-img .mobile {
  max-width: 200px;
  margin-bottom: 40px;
  border-radius: 0%;
}

.main-about-img .tablet-and-up {
  display: none;
}

.main-about-description,
.main-about-addition-skills {
  margin-bottom: 30px;
}

.main-about-addition-skills ul,
.main-about-addition-skills li {
  margin-bottom: 10px;
}

/* --------------------------------------
  Footer
-------------------------------------- */

.footer {
  padding: 60px 0 10px;
}

.footer-form {
  margin-bottom: 80px;
}

.footer-form-input {
  margin-bottom: 10px;
}

.footer-form-textarea {
  margin-bottom: 20px;
}

.footer-info {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.footer-info-nav,
.footer-info-follow {
  margin-bottom: 40px;
}

.footer-info-nav {
  display: flex;
  align-items: baseline;
}

.footer-info-nav-menu ul {
  display: flex;
}

.footer-info-nav-menu li {
  margin-left: 20px;
}

.footer-info-nav-img {
  width: 60px;
}

/* --------------------------------------
  Page - Work
-------------------------------------- */

.main-article {
  padding: 80px 0;
}