@media only screen and (min-width:961px){
  /* .container{
  background:var(--lightGrayishBlue);
  width:1366px;
  margin:auto;
} */
  /* styles for navigation bar */
.nav-bar{
  display:flex;
  justify-content: space-around;
  align-items: center;
  height:10vh;
  background:var(--white);
  margin:auto 0;
  position:fixed;
  width:100%;
  top:0;
  z-index:3;
}
.logo-container{
  margin:0 .1em;
}
.nav-links-container{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width:50%;
  height: 10vh;
  /* background: black; */
}

.nav-link a{
  text-decoration:none;
  height: inherit;
  display: flex;
  align-items: center;
  color:var(--grayishBlue);
  transition:var(--mainTransition);
  -moz-transition: var(--mainTransition);
  -webkit-transition: var(--mainTransition);
  -o-transition: var(--mainTransition);
  letter-spacing: var(--mainSpacing);
}
.nav-link a:hover{
  border-bottom: 5px solid var(--primaryLimeGreen);
}
.request-invite-btn-container-nav{
  /* width:100%; */
  display: flex;
  justify-content: center;
  /* margin:0 auto; */
}
.request-invite-btn{
  padding:.9em 1.7em;
  border:none;
  letter-spacing: var(--mainSpacing);
  border-radius: 80px;
  font-weight: 700;
  color:var(--white);
  background: var(--primaryLimeGreen);
  cursor:pointer;
  transition:var(--mainTransition);
}
.request-invite-btn:hover{
  background: var(--white);
  border:1px solid var(--primaryLimeGreen);
  color:var(--primaryLimeGreen);
}
/* end of styles for navigation bar */
/* ======================================= */
/* styles for main content section*/
.main-content{
  position: relative;
  /* padding-right:5em; */
   padding-left:2em;
  /* margin-bottom:4em; */
  /* z-index: 1; */
}
/* end of style for main content section */
/* ======================================== */
/* styles for banner and image background */
.banner-and-background-img-container{
  display:flex;
  width:100%;
  justify-content: space-between;
  /* border:1px solid red; */
  /* align-items:center; */
}
.banner-container{
  width:40%;
  display:flex;
  flex-direction:column;
  /* align-items:center; */
  justify-content: center;
  /* border:2px solid; */
  height:90vh;
}
.banner-heading{
  font-size:3em;
  color:var(--primaryDarkBlue);
  margin-bottom:.5em;
}
.banner-text{
  color:var(--grayishBlue);
  margin-bottom:.5em;
}
/* ================= */
.background-image-container{
  width:70%;
  position: relative;
  right:0px;
  /* border:1px solid; */
}

.mockups-background-container{
  position:absolute;
  width:100%;
  right:-10px;
  top:-20px;
  /* top:-8em; */
  z-index: 1;
}
  .mockup-background-img{
    width:100%;
    position: absolute;
    right:-6em;
  }
.device-mockups-image-container{
 position: absolute;
 width:70%;
 right:0px;
  z-index:2;
}
  .device-mockup-img{
    /* background: url("../images/bg-intro-desktop.svg") center/cover no-repeat; */
    position: absolute;
    right:-30px;
    width:100%;
  }
  .request-invite-btn-container{
  margin-top:.5em;
}
/* end of styles for banner and image background */
/* ========================================== */
/* ============================================== */
/* styles for services container */
.service-heading-and-service-container{
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  height:80vh;
}
.service-banner-container{
  /* background:blue; */
  width:40%;
  height:15vh;
  display: flex;
  flex-direction:column;
  justify-content: space-around;
}
.service-banner-heading{
  font-size:2em;
  color:var(--primaryDarkBlue);
}
.service-banner-text{
  color:var(--grayishBlue);
}

/* individual services main container */
.services-container{
  display:flex;
}
.individual-service{
  /* background:grey; */
  margin:1%;
  width:30%;
  padding:1%;
  height:50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  transition:var(--mainTransition);
  cursor: pointer;
}
.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);
}
.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-left: 2em;
}
.articles-heading-container{
  margin:2em 0px;
}
.articles-heading{
  color:var(--primaryDarkBlue);
}
.articles-container{
  /* display: flex;
  justify-content: space-around; */
    display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    column-gap: 20px;
  row-gap:30px;
  justify-items: center;
  /* border:1px solid; */
  margin-bottom: 2em;
}
.individual-article{
  margin-right:3em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* height:60vh; */
  box-shadow:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);
  cursor: pointer;
}
.article-img{
  width:100%;
  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: .8rem;
  letter-spacing: 1.5px;
}
.article-heading{
  color:var(--primaryDarkBlue);
  font-weight: 500;
  transition: var(--mainTransition);
  font-size:1rem;
  letter-spacing: 1.5px;
}
.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;
  justify-content:space-between;
  height: 20vh;
  padding: 0px 7em;
}

.logo-and-social-links-container{
  display:flex;
  flex-direction: column;
  height:inherit;
  justify-content: space-around;
}

.social-links-container{
  display:flex;
  justify-content: space-around;
}
.social-icon{
  transition: var(--mainTransition);
  color:var(--white);
  /* background:var(--white); */
}

.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);
  margin:.7em;
  align-self: flex-start;
}
.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 of destop design */
  /* ================================= */
}