/* stylelint-disable selector-list-comma-newline-after */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');

/* Reserve scrollbar space to prevent horizontal layout shift between pages */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}
ul,
h1,
h2,
body,
li {
  margin: 0;
  padding: 0;
  font-family: 'Cormorant Garamond', serif;
}

.author{
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}

p {
  font-size: 19px;
}

header {
  background-color: #AD9B86;
  padding: 20px 30px;
  text-align: left;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.banner {
  position: relative;
}

.banner img {
  max-width: 100%
}

.banner .aboutUs {
  color: #675347;
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

nav {
  position: initial;
  top: 50px;
  z-index: 1;
}

nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 40px;
  white-space: nowrap;
  max-width: 1300px;
  margin: 0px auto;
}

nav li {
  display: block;
  font-size: 30px;
}

/* Push logo to the far left */
nav li:first-child { margin-right: auto; }

nav li a.aboutUs {
  color: #675347;
}

/* Remove hard positioning in favor of flex */
nav li a.logo { position: static; }

nav li a { text-decoration: none; color: #675347; }
/* Keep link color consistent across states */
nav li a:visited { color: #675347; }
nav li a:hover, nav li a:focus { color: #675347; text-decoration: underline; }
nav li a:active { color: #675347; }


nav li a:hover {
  text-decoration: underline;
}

nav li a.logo:hover {
  text-decoration: none;
}

/* Active link for Blog page */
nav li a.blog { text-decoration: underline; }
/* Non-active links default to no underline, but underline on hover */
nav li a.home, nav li a.logo, nav li a.aboutUs { text-decoration: none; }
nav li a.home:hover, nav li a.logo:hover, nav li a.aboutUs:hover { text-decoration: underline; }
/* Ensure only Blog is active on blog pages */
nav li a.home,
nav li a.logo,
nav li a.aboutUs { text-decoration: none; }


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: #E5DBCD;
}

.wrapper{
  margin-top: 4%;
}

.wrapper h1{
  font-family: Garamond, serif;
  font-size: 50px;
  color: #675347;
  margin-bottom: 85px;
  text-align: center;
}

.team{
  display: flex;
  justify-content: center;
  width: auto;
  flex-wrap: wrap;
  text-align: justify;
  text-justify: inter-word;
}

.team .team_member{
  background: #F9F4EC;
  margin: 25px;
  margin-bottom: 50px;
  width: 490px;
  padding: 20px;
  line-height: 25px;
  color: #795f4b;  
  position: relative;
}

.team .team_member h3{
  color: #492D18;
  font-size: 26px;
  margin-top: 50px;
  text-align: center;
}

.team .team_member p.role{
  color: #492D18;
  margin: 12px 0;
  font-size: 12px;
  text-transform: uppercase;
  text-align: center;
}

.team .team_member .team_img{
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #E5DBCD;
}

.team .team_member .team_img img{
  width: 100px;
  height: 100px;
  padding: 0;
}

section.query {
  background: #F7F2E9;
  text-align: center;
  padding: 60px 20px;
  color: #4b4b4b;
}

section.query h2 {
  font-size: 36px;
}

form input {
  margin: 20px 0;
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 28px;
  border: 4px solid white;
}

form input:focus {
  border: 4px dashed #4b4b4b;
  outline: none;
}

form input:valid {
  border: 4px solid #71d300;
}

footer {
  background: #AD9B86;
  color: #391F0F;
  padding: 13px;
  text-align: center;
}

footer p.copyright{
  font-size: 20px;
  padding: 17px;
}


/* responsive styles */

@media screen and (max-width: 1400px) {
  .banner .aboutUs {
    font-size: 40px;
}

@media screen and (max-width: 960px) {
  .banner .aboutUs {
    font-size: 35px;
  }
  nav li {
    font-size: 18px;
  }
}

@media screen and (max-width: 700px) {
  .banner .aboutUs {
    font-size: 30px;
    position: absolute;
    text-align: center;
  }
  nav li {
    font-size: 18px;
  }
  .wrapper h1{
    font-size: 32px;
  }
}

@media screen and (max-width: 560px) {
  .banner .aboutUs {
    font-size: 25px;
    position: absolute;
    text-align: center;
  }
  nav li {
    display: block;
    width: 100%;
    margin: 12px 0;
  }
  .wrapper h1{
    font-size: 30px;
  }
  header,
  nav {
    position: relative;
    top: 0;
  }
}


h1, h2, h3, h4, h5, h6 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif/*rtl:Amiri, Georgia, "Times New Roman", serif*/;
}

.display-4 {
  font-size: 2.5rem;
}
@media (min-width: 768px) {
  .display-4 {
    font-size: 3rem;
  }
}

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

/* .nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  
} */

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

/* Pagination
.blog-pagination {
  margin-bottom: 0rem;
}
.blog-pagination > .btn {
  border-radius: 0rem;
} */

/*
 * Blog posts
 */
.blog-post {
  margin-bottom: 4rem;
}
.blog-post-title {
  margin-bottom: .25rem;
  font-size: 2.5rem;
}
.blog-post-meta {
  margin-bottom: 1.25rem;
  or: #727272;
}

/*
 * Footer
 */
.blog-footer {
  padding: 2.5rem 0;
  color: #727272;
  text-align: center;
  background-color: #f9f9f9;
  border-top: .05rem solid #e5e5e5;
}
.blog-footer p:last-child {
  margin-bottom: 0;
}

/* Fine-tune rendering inside the article textbox without changing its look */
.article-inner { margin: 8px 10px; padding: 14px 28px; line-height: 1.7; overflow-wrap: anywhere; word-wrap: break-word; max-width: 100%; }
.article-inner h1, .article-inner h2, .article-inner h3,
.article-inner h4, .article-inner h5, .article-inner h6 { margin: 1rem 0 .5rem; }
.article-inner p { margin: .75rem 0; }
.article-inner ul,
.article-inner ol { list-style-position: inside; padding-left: 1.75rem; margin: .5rem 0 1rem; }
.article-inner li { padding-left: .25rem; }
.article-inner li { margin: .25rem 0; }
.article-inner img { display: block; margin: 1rem 0; }
.article-inner video,
.article-inner canvas,
.article-inner iframe { max-width: 100%; height: auto; }
.article-inner blockquote { border-left: 4px solid rgba(255,255,255,0.5); margin: 1rem 0; padding: .5rem 1rem; }
.article-inner pre { background: rgba(0,0,0,0.15); padding: .5rem .75rem; border-radius: 4px; overflow: auto; }
.article-inner table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: collapse; margin: 1rem 0; }
.article-inner th, .article-inner td { padding: .35rem .6rem; border: 1px solid rgba(255,255,255,0.25); }
.article-inner code { background: rgba(0,0,0,0.1); padding: 0 .2rem; border-radius: 3px; }