/* Reset Default Settings*/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, fieldset, legend, label, table, header, footer, nav, section { 
	margin: 0; 
	padding: 0;
	border: 0;
} 
ol, ul { 
	list-style: none; 
}
header, footer, nav, section, article, hgroup, figure {
	display: block;	
}
legend {
	display: none;
}
/************************/
* {
    box-sizing: border-box;
}

@font-face {
 font-family: 'Raleway-Medium';
 src: url('./font/Raleway-Medium.ttf');
}

body {
font-family: 'Raleway-Medium', sans-serif;
}

a {
    text-decoration: none;
}

.nav {
    overflow: hidden;
    height: 4.5rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    line-height: 2.4rem;
}

.nav a {
  float: right;
  display: block;
  color: rgb(145, 139, 132);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.15rem;
}

.nav a:not(:first-child) {display: none;}

.nav a.mobileNavButton {
  float: right;
  display: block;
}

.nav.show a:not(:first-child) {
    display: block;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: rgb(145, 139, 132);
    margin: 6px 0;
    transition: 0.4s;
    cursor: pointer;
}

.mobileNavEnabled .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.mobileNavEnabled .bar2 {opacity: 0;}

.mobileNavEnabled .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.width-100 {
    width: 100%;
}

.height-100 {
    height: 100%;
}
.container {
    margin-left: auto;
    margin-right: auto;
}

.start-header {
    display: block;
    position: relative;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.keyword-text {
    font-size: .75rem;
    color: rgb(145, 139, 132);
}

.samed-guener-start-text {
    color: rgb(145, 139, 132);
    font-size: 2.95rem;
    line-height: 2.95rem;
}

.align-items-center {
    align-items: center;
}

.text-center {
    text-align: center;
}

.text-uppercase {
    text-transform: uppercase;
}
.keyword-start-list > li {
    color: rgb(145, 139, 132);
}

.about-section {
    display: block;
    position: relative;
    width: 100%;
    min-height: 800px;
    padding: 7rem 0;
    background-color: rgb(245, 245, 245);
}

.about-box {
    width: 100%;
    height: 100%;
}

.about-image  {
    width: 18rem;
    height: 18rem;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin-bottom: 3rem;
}

.about-text {
    max-width: 25rem;
}

.about-text-header {
    margin-bottom: 1rem;
    font-size: 2em;
}

.about-text-content {
    font-size: 1.2em;
}

#samed-guener-image {
    width: 21rem;
    height: auto;
    margin-left: -25px;
}

.display-inline-block {
    display: inline-block;
}

.blog-section {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 35rem;
    padding: 5rem 0;
    background-color: rgb(238, 238, 238);
}

.blog-description {
    font-size: 1.25rem;
    margin-top: 6rem;
}

.blog-description > p {
    margin-bottom: 1rem;
}

.blog-description > p a {
    color: rgb(145, 139, 132);
    text-decoration: underline;
    cursor: pointer;
}

.blog-post {
    display: block;
    width: 22rem; 
    height: 10rem;
    margin: auto;
    margin-bottom: 0.5rem;
    padding-left: 0.3rem;
    padding-top: 2.4rem;
    border: 1px solid white;
    background-color: black;
}

.blog-post-title {
  display: inline-block;
  font-weight: bold;
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}

.blog-post-date {
  display:inline-block;
  font-style: italic;
  font-weight: lighter;
  background-color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}

.blog-post-description {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.7);
  max-width: 20rem;
}

.section-header {
    display: block;
    float: left;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 5px;
    text-align: center;
}

.contact-section {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    min-height: 35rem;
    padding: 5rem 0;
    background-color: rgb(230, 230, 230);
}

@media (min-width: 576px){
    .container {
       max-width: 540px;
    }

   .samed-guener-start-text {
       font-size: 4rem;
       line-height: 4rem;
   }

   .keyword-text {
    font-size: 1rem;
   }

   .about-text-header {
    font-size: 2em;
   }

   .about-text-content {
    font-size: 1.2em;
   }

   .nav {
    padding-right: 5rem;
   }

   .nav a.mobileNavButton {
    display: none;
   }

   .nav a:not(:first-child) {
    display: block;
   }


    .nav a:hover {
     color: rgb(145, 139, 132);
    }

    .nav a:hover::after {
     content: '';
     display: block;
     position: relative;
     background-color: rgb(145, 139, 132);
     height: 0.1em;
     width: 0%;
     animation-name: afterNav;
     animation-duration: 0.15s;
     animation-timing-function: ease-in;
     animation-fill-mode: forwards;
     -webkit-animation-fill-mode: forwards;
    }

    @keyframes afterNav {
     from {
        width: 0%;
        left: 50%;
     }
     to {
        width: 100%;
        left: 0%;
     }
    }
}

@media (min-width: 768px) {
.container {
   max-width: 720px;
}

.about-image  {
    width: 18rem;
    height: 18rem;
}

#samed-guener-image {
    width: 21rem;
    height: auto;
}

.about-text {
    float: right;
}

.section-header{
    text-align: left;
    padding-left: 8rem;
   }
}

@media (min-width: 992px){
 .container {
    max-width: 960px;
 }

 .samed-guener-start-text {
   font-size: 5rem;
   line-height: 5rem;
   letter-spacing: .15rem;
 }

 .keyword-text {
    font-size: 1.25rem;
 }

 .about-image  {
    width: 26rem;
    height: 26rem;
 }

 #samed-guener-image {
    width: 29rem;
    height: auto;
 }

 .about-text {
     padding-top: 3rem;
 }

 .about-text-header {
     font-size: 2.35em;
 }

 .about-text-content {
     font-size: 1.2em;
 }
 .about-container {
     padding: 0 25rem;
 }
}

.about-container {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

@media (min-width: 1200px){
 .container {
   max-width: 1140px;
 }
}