/* google fonts */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/* bootstrap-icons */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

body {
  font-family: "Noto Serif", serif;
}

.bg-light {
  transition: 500ms ease;
  background-color: transparent !important;
}

.bg-light.scrolled {
  background-color: rgba(248, 249, 250, 0.9) !important;
}

.navbar-brand {
  color: rgba(0, 0, 0, 0.5) !important;
}

.hero-image {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    url(./images/bg1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

h1 {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-style: italic;
  line-height: 11rem;
}

/* animation h1 starts */
.text-focus-in {
  -webkit-animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: text-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

/* animation h1 ends */

h2 {
  text-align: center;
  font-style: italic;
  font-size: 2.5rem;
}

.arrow-right,
.arrow-left {
  font-size: 3rem;
  color: rgba(109, 88, 54, 0.8);
}

.arrow-right ::after {
  content: "scroll right";
  display: block;
  font-size: 0.9rem;
  font-style: italic;
}

.arrow-left::after {
  content: "scroll left";
  display: block;
  font-size: 0.9rem;
  font-style: italic;
}

.example {
  background-color: rgba(109, 88, 54, 0.8);
}

footer div ul li a {
  font-size: 1.7rem;
}

.footer-item {
  padding-left: 1.5rem;
}

.shadow-drop-2-center {
  transition: box-shadow 0.5s ease-in-out;
}

.shadow-drop-2-center:hover {
  -webkit-box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.35);
}

/* bootstrap settings starts */

.card {
  border: none;
}

.btn,
.card,
.card-img,
.card-img-top {
  border-radius: unset;
}

.btn-outline-secondary {
  color: rgba(109, 88, 54, 0.8);
  border-color: rgba(109, 88, 54, 0.8);
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: rgba(109, 88, 54, 0.8);
  border-color: rgba(109, 88, 54, 0.8);
}
/* bootstrap settings ends */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 576px) {
  h1 {
    font-size: 4rem;
    line-height: unset;
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (min-width: 577px) {
  h1 {
    font-size: 6rem;
  }
}
/* tablets */
@media (min-width: 768px) {
  h1 {
    font-size: 7rem;
  }
}

/* Medium devices (tablets, less than 992px) */
@media (min-width: 992px) {
  h1 {
    font-size: 8rem;
  }
}

/* Large devices (desktops, less than 1200px) */
@media (min-width: 1200px) {
}

/* monishka form styles start */

/* .wrapper {
  position: absolute;
  top: 30%;
  transform: rotateY(-50%);
  width: 100%;
  padding: 0 20px;
} */

.contact-form {
  max-width: 550px;
  margin: 0 auto;
  /* background: rgba(0, 0, 0, 0.8); */
  padding: 30px;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
}

.input-fields {
  display: flex;
  flex-direction: column;
  margin-right: 4%;
}

.input-fields,
.msg {
  width: 48%;
}

.input-fields .input,
.msg textarea {
  margin: 10px 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid white;
  padding: 10px;
  color: #c5ecfd;
  width: 100%;
}

.msg textarea {
  height: 212px;
}

::-webkit-input-placeholder {
  color: white;
}

::-moz-input-placeholder {
  color: white;
}

::-ms-input-placeholder {
  color: white;
}

.btn-outline-success {
  color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline-success:hover {
  color: rgba(109, 88, 54, 0.8);
  background-color: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.7);
}

@media screen and (max-width: 600px) {
  .contact-form {
    flex-direction: column;
  }
  .msg textarea {
    height: 80px;
  }
  .input-fields,
  .msg {
    width: 100%;
  }
}

input:focus,
textarea:focus {
  outline: none;
}
/* monishka form styles end */