@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*======= Scroll bar =======*/
::-webkit-scrollbar {
  background: #fff;
  width: 11px;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background: #0d6efd;
  width: 100%;
  border-radius: 2em;
}

::-webkit-scrollbar-thumb:hover {
  background: #0d6efd;
}

/* Scroll Progress Bar */
.progress-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0;
  background: #4299e1;
  transition: width 0.1s ease;
}

/* _-_-_-_-_-_-_-_-_-_- */

.cursor {
  width: 20px;
  height: 20px;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 50%;
  position: absolute;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
  animation: cursorAnim 0.5s infinite alternate;
  pointer-events: none;
}
.cursor::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  border: 8px solid gray;
  border-radius: 50%;
  opacity: 0.5;
  top: 0px;
  left: 0px;
  animation: cursorAnim2 0.5s infinite alternate;
}
@keyframes cursorAnim {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.7);
  }
}
@keyframes cursorAnim2 {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.4);
  }
}
@keyframes cursorAnim3 {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(3);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.expand {
  animation: cursorAnim3 0.5s forwards;
  border: 1px solid rgb(111, 2, 2);
}

/* _-_-_-_-_-_-_-_-_-_- */

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
blockquote {
  font-family: "DM Serif Display", serif;
}

h1,
.h1 {
  font-size: 65px;
}

h2,
.h2 {
  font-size: 45px;
}

img {
  max-width: 100%;
}

blockquote {
  font-size: 28px;
}
body {
  /* background-color: aqua; */
}

sup,
.sup {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 16px;
}

.underline::after {
  content: " ";
  border-bottom: 3px solid;
  position: relative;
  display: block;
  width: 50px;
  padding-top: 1rem;
}

.toast {
  bottom: 1rem;
  right: 1rem;
}

.underline.text-center::after {
  margin-left: auto;
  margin-right: auto;
}

.section-inverse {
  margin-top: 180px;
  padding: 1px 0px;
}

.section-inverse > div {
  margin-top: -180px;
}

.card-footer {
  background-color: white;
  padding: 1rem 1rem;
}

.background-image {
  background-position: center center;
  background-size: cover;
}

.navbar-light .navbar-nav .nav-link {
  text-transform: uppercase;
  padding-right: 1rem;
  padding-left: 1rem;
}

.circle {
  border-radius: 500px;
}

header.p-section {
  padding: 160px 0px 120px;
}

.p-section {
  padding: 50px 0px;
}

.p-section-lg {
  padding: 160px 0px;
}

.container-lg {
  max-width: 900px;
}

.w-md {
  max-width: 600px;
}

.w-sm {
  max-width: 400px;
}

.btn {
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.65rem 1.5rem;
}

.btn-group-lg > .btn,
.btn-lg {
  padding: 0.75rem 2rem;
}

.btn-group-sm > .btn,
.btn-sm {
  padding: 0.3rem 0.75rem;
}

.testimonial-item {
  max-width: 800px;
  padding: 40px;
}

.testimonial-item:nth-child(even) {
  margin-left: auto;
}

.testimonial-image {
  max-width: 100px;
  float: left;
  margin-right: 25px;
}

.marker-highlight {
  position: relative;
  display: inline-block;
}

.marker-highlight:before {
  content: "";
  background-color: #0b6efd87;
  width: 102%;
  height: 0.2em;
  position: absolute;
  z-index: -2;
  filter: url(#marker-shape);
  left: -0.05em;
  padding: 0 0.25em;
  bottom: 0.2em;
}

.marker-highlight-y {
  position: relative;
  display: inline-block;
}

.marker-highlight-y:before {
  content: "";
  background-color: #eaff0087;
  width: 102%;
  height: 0.2em;
  position: absolute;
  z-index: -2;
  filter: url(#marker-shape);
  left: -0.05em;
  padding: 0 0.25em;
  bottom: 0.2em;
}

.marker-highlight-r {
  position: relative;
  display: inline-block;
}

.marker-highlight-r:before {
  content: "";
  background-color: #ff2f2f87;
  width: 102%;
  height: 0.2em;
  position: absolute;
  z-index: -2;
  filter: url(#marker-shape);
  left: -0.05em;
  padding: 0 0.25em;
  bottom: 0.2em;
}

.marker-highlight-sr {
  position: relative;
  display: inline-block;
}

.marker-highlight-sr:before {
  content: "";
  background-color: #00ff8c87;
  width: 102%;
  height: 1em;
  position: absolute;
  z-index: -2;
  filter: url(#marker-shape);
  left: -0.05em;
  padding: 0 0.25em;
  bottom: 0.2em;
}

.scribble {
  position: relative;
  background-image: none;
  background-color: transparent;
  color: #636363;
}
.scribble::after {
  content: "";
  position: absolute;
  bottom: -10%;
  left: 0;
  height: 30%;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='247' height='22' fill='none'%3E%3Cmask id='a' width='246' height='23' x='0' y='1' maskUnits='userSpaceOnUse' style='mask-type:alpha'%3E%3Cpath fill='%23D9D9D9' d='M0 1h246v23H0z'/%3E%3C/mask%3E%3Cg mask='url(%23a)'%3E%3Cpath fill='%2300a661' d='M.225 13.987c40.77-3.247 81.218-6.304 122.486-5.61 40.217.68 80.07 3.493 119.823 8.284 4.828.577 4.966-4.727.193-5.301-40.597-4.886-82.029-7.082-123.059-6.436-39.896.627-80.713 2.548-119.53 8.822-.233.04-.132.263.087.25v-.009z'/%3E%3C/g%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 95%;
  width: 100%;
  background-image: linear-gradient(
    to right,
    currentcolor 40%,
    transparent 50%
  );
  background-repeat: no-repeat;
  animation: background-size-300 0.4s 1.5s ease-in both;
  background-size: 300%;
}

.transparent {
  background-color: transparent;
  height: 90px;
  position: fixed;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 100%
  );
  /* Soft gradient at bottom */
  mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 50%
  );
  -webkit-mask-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 50%
  );
  /* background-color: #ffffff10; */
  backdrop-filter: blur(4px);
}

.responsive-grid {
  display: flex !important;
  flex-wrap: wrap !important; 
 
}