root {
  --body-background-color: #405364;
  --header-main-background-color: rgb(211, 187, 187);
  --header-main-nav-a-hover-color: aqua;
  --button-color: #745962;
  
}

html {
  font-size: 62.5%;
}

body {
  background-color: #9ab4cb;
}

html {
  font-family: "Montserrat", sans-serif;
}

.wrapper-main {
  width: 1100px;
  margin: 0 auto;
}

h1 {
  font-size: 2.6rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  color:rgb(251, 251, 251)
}

h2 {
  font-size: 2.8rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  color:rgb(22, 20, 20);
  text-shadow: 2px 2px 5px rgb(35, 29, 21);
}

h3 {
  font-size: 2.6rem;
  line-height: 1.5;
  font-weight: 600;
  text-transform: uppercase;
  color:rgb(0, 0, 0);
  text-shadow: 2px 2px 5px rgb(35, 29, 21);
}

p {
  font-size: 1.4rem;
  line-height: 1.75;
  color: #ffffff;
}

a {
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.75;
}

.header-main {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color:#405364;
  display: flex;
  justify-content:space-between;
  z-index: 1000;
}

.header-main-logo {
  width: fit-content;
  height: 100%;
  display: flex;
  padding-left: 60px ;
}

.header-main-logo img {
  height: 45px;
  align-self: center;
}

.header-main-nav {
  width: fit-content;
  height: 100%;
}

.header-main-nav ul {
  margin-left: 30px;
}

.header-main-nav ul li {
  display: inline;
  float: left;
}

.header-main-nav ul li a {
  padding: 0px 15px;
  line-height: 60px;
  display: block;
  color: black;
  height: 100%;
}

.header-main-nav ul li a:hover {
  color: aqua;
}


.header-main-sm {
  width: fit-content;
  height: 100%;
  padding-right: 60px;
  display: flex;
  align-items:center;
  column-gap: 10px;
  position: relative;
}


.button-1 button {
  padding: 9px 25px;
  background-color: #745962; 
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
}

button:hover {
  background-color: #651e35; 
}

button {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: #ffffff;
  text-decoration: none;
}

/*This is my footer*/

.footer-main {
  width: 100%;
  padding: 35px 0 70px;
  background-color: #405364;
  border: 1px solid;
}

.footer-main-flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-main-founder {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  flex-basis: 20%;
}

.footer-main-founder p {
  text-align: center;
  font-size: 1.5rem;
}

.footer-main-founder img {
  width: 100%;
  border-radius: 100%;
}

.footer-main-sm {
  width: fit-content;
  display: flex;
  align-items: center;
  column-gap: 20px;
  flex-basis: 20%;
  flex-direction: row;
}

.footer-main-sm-fb {
  width: 35px;
  height: 35px;
  background-image: url(../Images/facebook.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.footer-main-sm-fb:hover {
  background-image: url(../Images/facebook-color.png);
}

.footer-main-sm-ins {
  width: 35px;
  height: 35px;
  background-image: url(../Images/instagram.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.footer-main-sm-ins:hover {
  background-image: url(../Images/instagram-color.png);
}

.footer-main-sm-in {
  width: 35px;
  height: 35px;
  background-image: url(../Images/106-1069562_linkedin-logo-bnw-png.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.footer-main-sm-in:hover {
  background-image: url(../Images/106-1069562_linkedin-logo-png.png);
}

.footer-main-sitemap {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  margin: 0 20px;
  padding: 20px;
}

.footer-main-sitemap ul:nth-child(1), 
.footer-main-sitemap ul:nth-child(2){
  flex-basis: 280px;
}

.footer-main-sitemap ul:nth-child(3){
  flex-basis: 280px;
}

.footer-main-sitemap ul:nth-child(4){
  flex-basis: 280px;
  align-self: center;
}

.footer-main-sitemap a {
  text-transform: uppercase;
  font-size: 1.5rem;
  color: #ffffff;
}

.footer-main-sitemap p {
  text-transform: uppercase;
  font-size: 12px;
  color: #ffffff;
}

.get-in-touch {
  font-size: 1.2rem;
  align-self: baseline;
}

.get-in-touch a {
  font-size: 1.5rem;
  line-height: 1.75;
}

.footer-header a {
  font-size: 1.4rem;
  line-height: 1.75;
}

.footer-header {
align-self: baseline;
}

.footer-categories a {
  font-size: 1.5;
  line-height: 1.75;
  align-self: baseline;
}

.footer-categories {
  align-self: baseline;}

.founder {
  background-color: rgb(156, 203, 203);
  border-radius: 100%;
}

.burger-menu,
.burger-menu-btn {
  display: none;
}

form h3 {
  margin-bottom: 10px;
  font-size: 1.8rem;
}

.footer-main-sitemap h3 {
  font-size: 1.5rem;
  color: #ffffff;
}

.footer-main-sitemap .footer-header hr {
  width: 50%;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #908f8f;
}

.footer-main-sitemap .footer-categories hr {
  width: 70%;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #908f8f;
}

.footer-main-sitemap .get-in-touch hr {
  width: 78%;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #908f8f;
}

/*Mobile Version*/



@media only screen and (max-width: 600px) {

  .burger-menu-btn {
    display: block;
    width: 50px;
    height: 50px;
    background-image: url(../Images/burger-bar.png), url(../Images/burger-bar.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center, center left 50px;
  }
  
  .burger-menu {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 900;
    background-color: #405364;
  }

  .burger-menu ul {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .burger-menu ul li {
    flex-basis: 100%;
    border-top: 2px solid #0a0808;
  }

  .burger-menu ul li:nth-child(3) {
    border-bottom: 2px solid #000000;
  }

  .burger-menu ul li a {
    display: block;
    height: 100%;
    font-size: 2.5rem;
    padding: 30px 0;
    flex-basis: 100%;
    text-align: center;
    font-weight: 600;
    color: aliceblue;
  }

  .button-1 button {
display: none;
  }

  .wrapper-main {
    width: calc(100% - 20px)
  }
  
  .header-main-logo img {
    border-radius: 100%;
    border: 1px solid;
    height: 65%;
  }

  .header-main-nav {
    display: none;
  }

  .header-main-sm {
    padding-right: 20px;}

  .header-main-logo {
    width: fit-content;
    height: 100%;
    display: flex;
    padding-left: 20px ;
    }

    /*
    .header-main {
      width: 80%;
    }
    */
    .footer-main {
      width: 100%;
      padding: 60px 0 100px;
      background-color: #405364;
      margin: auto;
      justify-content: center;
      align-items: center;
    }
    
    .footer-main-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    
    .footer-main-founder {
      display: none;
    }
    
    .footer-main-sm {
      width: fit-content;
      display: flex;
      align-items: center;
      column-gap: 25px;
      flex-basis: 100%;
      margin-left: 62px;
      flex-direction: row;
    }
    
    .footer-main-sm-fb {
      width: 35px;
      height: 35px;
      background-image: url(../Images/facebook.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .footer-main-sm-fb:hover {
      background-image: url(../Images/facebook-color.png);
    }
    
    .footer-main-sm-ins {
      width: 35px;
      height: 35px;
      background-image: url(../Images/instagram.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .footer-main-sm-ins:hover {
      background-image: url(../Images/instagram-color.png);
    }
    
    .footer-main-sm-in {
      width: 35px;
      height: 35px;
      background-image: url(../Images/106-1069562_linkedin-logo-bnw-png.png);
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .footer-main-sm-in:hover {
      background-image: url(../Images/106-1069562_linkedin-logo-png.png);
    }
    
    .footer-main-sitemap {
      flex-wrap: wrap;
    }
    
    .footer-main-sitemap ul:nth-child(1),
    .footer-main-sitemap ul:nth-child(2),
    .footer-main-sitemap ul:nth-child(3),
    .footer-main-sitemap ul:nth-child(4) {
      flex-basis: 100%;
      text-align: center;
      padding-bottom: 20px;
      align-self: center;
    }   
}