@media only screen and (max-width: 400px){
  body{
    overflow-x:hidden;
  }
/* styles for main container */
.container{
  background:var(--lightGrayishBlue);
  width:1366px;
  overflow-x: hidden;
  max-width:100%;
  margin:0 auto;
  margin-top:70px;
  /* margin:auto; */
}
/* end of styles for main container */
/* styles for navbar */
.nav-bar{
  /* for some webkit browsers */
  /* position:-webkit-sticky; */
  /* position: sticky; */
  position: fixed;
  top:0;
  width:100%;
  height:60px;
  display:flex;
  justify-content: space-between;
  /* padding:0 1%; */
  align-items:center;
  z-index:3;
  background:var(--white);
  transition: var(--mainTransition);
}

.nav-link{
list-style-type: none;
text-transform: capitalize;
/* background-color:brown ; */
}
.nav-link a{
  text-decoration:none;
  letter-spacing: var(--mainSpacing);
  color:var(--primaryDarkBlue);
  transition:var(--mainTransition);
}
.nav-link a:hover{
  color:var(--White);
  background:var(--primaryColor);
}

  /* responsive nav bar styles */
  .burger{
    width:40px;
    height:40px;
    margin:10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    cursor:pointer;

  }
  .line1,.line2,.line3{
    background:var(--primaryDarkBlue);
    width:30px;
    height:3px;
    margin:3px;
    transition:var(--mainTransition);
  }
  .nav-links-container{
    position: absolute;
    right:0px;
    left:0px;
    top:15vh;
    width:80%;
    margin:auto;
    height:85vh;
    height: 70vh;
    display:flex;
    flex-direction:column;
    align-items: center;
    transform:translateX(100%);
    background:transparent;
    transition:var(--mainTransition);
    justify-content: space-evenly;
    border-radius: 10px;
  }
  .nav-links-container .nav-link{
    opacity: 0;
  }
  .nav-active{
    transform:translateX(0%);
    max-width:calc(100% - 40px);
    background:var(--white);
  }
  @keyframes navLinkFade{
    from{
      opacity:0;
      transform:translateX(50px);
    }
    to{
      opacity:1;
      transform:translateX(0px);
    }
  }
  .toggle .line1{
    transform:rotate(-45deg) translate(-5px,6px);
  }
  .toggle .line2{
    opacity:0;
  }
  .toggle .line3{
    transform:rotate(45deg) translate(-5px,-6px);
  }
  /* this hides the Request Invite btn in the tablet mode */
  .request-invite-btn-container-nav{
    display: none;
  }

  /* end of responsive nav bar styles */

  /* styles for backround  */
  .banner-and-background-img-container{
    display: flex;
    flex-direction: column-reverse;
  }
  .background-image-container{
    /* overflow: hidden; */
    background: url("../images/bg-intro-mobile.svg") center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
  }
  .mockups-background-container{
    width:100%;
    position: absolute;
    left:0;
    z-index: 1;
  }
  .mockup-background-img{
    width:100%;
  }
  .device-mockups-image-container{
    position: relative;
    z-index: 2;
  }
  .device-mockup-img{
    width:100%;
  }
  /* end of styles for background */

  /* styles for banner container */
  .banner-container{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding:2em;
    margin:0 10px;
    border:1px;
  }
  .banner-heading{
    color:var(--primaryDarkBlue);
    font-weight: 700;
    font-size:2em;
    text-align: center;
    text-transform: capitalize;
    margin-bottom:5px;
  }
  .banner-text{
    /* border:1px solid; */
    margin:0 2em;
    padding:2em;
    color:var(--grayishBlue);
    text-align: center;
    line-height: 1.5;
    letter-spacing: 1.2px;
    font-size:.9em;
  }
  .request-invite-btn-container{
    width:100%;
    margin:20px;
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .request-invite-btn{
    background: var(--primaryLimeGreen);
    padding:1em 2em;
    color:var(--white);
    text-transform: capitalize;
    letter-spacing: 2px;
    font-weight:400;
    border:none;
    border-radius: 30px;
    cursor: pointer;
    transition: var(--mainTransition);
  }
  .request-invite-btn:hover{
    color:var(--primaryLimeGreen);
    border:1px solid var(--primaryLimeGreen);
    background:var(--white);
  }
  /* end of styles for banner container */
  /* ============================================== */
/* styles for services container */
.service-heading-and-service-container{
  display:flex;
  flex-direction:column;
  align-items: center;
  width: 100%;
  margin:40px auto;
}
.service-banner-container{
  width:100%;
  padding:5px 40px;
  margin-bottom: 5em;
  height:15vh;
  display: flex;
  flex-direction:column;
  align-items: center;
  text-align:center;
  justify-content: space-around;
}
.service-banner-heading{
  font-size:2em;
  color:var(--primaryDarkBlue);
  margin:5px 0px;
}
.service-banner-text{
  color:var(--grayishBlue);
  line-height: 25px;
  letter-spacing: 1px;
  margin:7px 0px;
}

/* individual services main container */
.services-container{
  display: grid;
  /* set the size of the grid items from the minmax function below */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  column-gap: 20px;
  row-gap: 10px;
}
.individual-service{
  padding:10px 10px;
  height:50vh;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content: space-evenly;
  transition:var(--mainTransition);
  cursor: pointer;
  /* border:1px solid; */
}
.individual-service:hover{
    box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
}
.service-img{
  transition:var(--mainTransition);
  /* width:50px; */
  margin:auto;
}
.individual-service .service-img:hover{
  transform:rotate(180deg);
}
.service-heading{
  color:var(--primaryDarkBlue);
  font-size:1.5em
}
.service-description{
  color:var(--grayishBlue);
}
/* end of individual services main container */
/* end of styles for service container */
/* ======================================== */
/* =============================================== */
/* styles for articles container */
.articles-section{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  width: 100%;
  padding:1%;
}
.articles-heading-container{
  margin:2em 0px;
}
.articles-heading{
  color:var(--primaryDarkBlue);
  text-align: center;
}
.articles-container{
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    column-gap: 20px;
  row-gap:30px;
  justify-items: center;
  /* margin:auto; */
}
.individual-article{
  margin:auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height:70vh; */
  box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
  cursor: pointer;
}
.service-img-container{
  width:100%;
  display: flex;
  justify-content: center;
}
.article-img{
  width:100%;
  margin:0 auto;
  /* height: 12em; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.article-author-heading-preview-container{
  padding:0px 2em;
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* background: blue; */
  width:100%;
}
.article-author-heading-preview-container > div{
  margin-bottom:.8em;
  width:100%;
}
.article-author{
  color:var(--grayishBlue);
  font-weight: 300;
  font-size: .9rem;
  letter-spacing:1.3px;
}
.article-heading{
  color:var(--primaryDarkBlue);
  font-weight: 500;
  transition: var(--mainTransition);
  font-size:1rem;
}
.article-heading:hover{
  color:var(--primaryLimeGreen);
}
.article-preview-text-container{
  display:flex;
  width:100%;
}
.article-preview-text{
  color:var(--primaryDarkBlue);
  font-weight: 300;
  font-size:.8rem;
}
/* end of style for articles container */
/* ========================================== */
/* ========================================== */
/* styles for footer container */
.footer-section{
  background:var(--primaryDarkBlue);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items:center;
  /* padding: 0px 7em; */
  margin:20px 0px 0px;
}

.logo-and-social-links-container{
  display:flex;
  flex-direction: column;
  height:inherit;
  justify-content: space-around;
  width:100%;
}
.logo-container{
  margin:10px auto;
  width:100%;
  display: flex;
  justify-content: center;
}
.footer-logo{
  color: var(--white);
  width:40%;
  text-align: center;
  margin:0 auto;
}

.social-links-container{
  display:flex;
  width:90%;
  justify-content: space-around;
  margin:10px auto;
}
.social-icon{
  transition: var(--mainTransition);
  color:var(--white);
  font-size: 1.5em;
}

.social-icon:hover{
  color:var(--primaryLimeGreen);
  transform:translateY(-10px);
}

.footer-links-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /* width:40%; */
  /* align-items:flex-start; */
}

.footer-link{
  text-decoration:none;
  color:var(--white);
  letter-spacing: 1px;
  margin:.7em;
  align-self: flex-start;
  transition:var(--mainTransition);
}
.footer-link:hover{
  color:var(--primaryLimeGreen);
}
.request-invite-btn-container{
  width:100%;
  display: flex;
  justify-content: center;
  margin:10px auto;
}
.request-invite-btn-container-copyright-info{
  display:flex;
  flex-direction:column;
  justify-content:space-around;
  align-items: flex-end;
}
.copy-container{
  color:var(--white);
}
/*end of styles for footer container */
/* ================================= */
  /* end mobile styles  */
  /* ===================================== */
}