@import url('https://fonts.googleapis.com/css2?family=Edu+SA+Beginner:wght@400;500;600;700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Edu SA Beginner', cursive;
    
/* font-family: 'Open Sans', sans-serif; */
}
body{
  background-image: url(/images/evie-s-IPVdy-P8m_Q-unsplash.jpg);
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
.quote{ 
    color: rgb(255, 255, 87);
    font-size: 3em;
    font-family: 'Dancing Script', cursive;
}
/* Define the underline style and make it invisible by default */
.nav-item .nav-link {
  text-transform: uppercase;
    font-size: 1.5em;
    font-weight: 500;
    text-decoration: none; /* Remove the default underline */
    position: relative;    /* Needed to position the pseudo-element */
  }
  
  /* Apply the underline style on hover */
  .nav-item .nav-link:hover {
    text-decoration: none; /* Remove the default underline */
  }
  
  /* Create the underline pseudo-element */
  .nav-item .nav-link::after {
    content: '';                        /* Required for pseudo-elements */
    position: absolute;                 /* Position the underline absolutely */
    left: 0;                            /* Start the underline from the left */
    bottom: -2px;                       /* Adjust the distance from the text */
    width: 100%;                        /* Set the width of the underline */
    height: 2px;                        /* Set the thickness of the underline */
    background-color: #000000;             /* Choose your desired underline color */
    opacity: 0;                         /* Make the underline invisible by default */
    transition: opacity 0.3s ease;      /* Add a smooth transition effect */
  }
  
  /* Show the underline when hovering over the element */
  .nav-item .nav-link:hover::after {
    opacity: 1; /* Make the underline visible on hover */
  }
  .swiper-button-next,
.swiper-button-prev {
  /* Add margin or padding to adjust the distance */
  margin-right: 10px; /* Adjust the value as needed */
}

/* If you want to adjust the distance only horizontally */
.swiper-button-next {
  margin-right: -40px; /* Adjust the value as needed */
}

.swiper-button-prev {
  margin-left: -40px; /* Adjust the value as needed */
}
.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(10px); /* Adjust the blur intensity as needed */
  }
  .heading{
    font-size: 3em;
    font-weight: 600; 
    font-family: 'Open Sans', sans-serif;
  }
  .instagram{
    font-size: 1.5em;
    font-weight: 500;
  }
  .sub-heading{
    font-size: 1.5em;
    color: rgb(0, 0, 0);
    font-weight: 400; 
    font-family: 'Open Sans', sans-serif;
  }

  .button {
    background-color: black;
    color: white;
    padding: 10px 40px 10px;
  }
  /* ws */
  img {
    width: 100%;
    height: auto;
    background: transparent;
  }
  
  ul {
    padding-left: 1rem;
    list-style: none;
  }
  
  li {
    flex-shrink: 0;
    /* width: clamp(500px, 60vw, 800px); 
     padding-right: 1rem; */
  }
  
  .heading-1{
    font-size: 3em;
    font-weight: 600;
    font-family: 'Edu SA Beginner', cursive;
  }
  /* :-webkit-any-link { color: #4e9815; }
  
  :-moz-any-link { color: #4e9815; }
  
  :any-link { color: #4e9815; } */
  
  .df {display: flex}
  .aic {align-items: center}
  .jcc {justify-content: center} 
  
  .loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    color: white;
  }
  
  .demo-wrapper {
    overflow-x: hidden;
  }
  
  .wrapper {
    display: flex;
  }
  
  .demo-gallery:not(.last) {
    padding-bottom: 1rem;
  }
  
  .demo-text .text {
    font-size: clamp(8rem, 15vw, 16rem);
    line-height: 1;
    font-weight: 900;
  }
  .glass {
    -webkit-backdrop-filter: blur(8px);  
    padding: 1em 1em 1em;

    backdrop-filter: blur(8px); 

    /* Add box-shadow for more depth */

    box-shadow: 0px 10px 15px 10px rgba(0 ,0 ,0 ,0.15);

    background-color: rgba(228 ,228 ,228 ,0.10);
}