body::before {
    display: block;
    content: '';
    height: 20px;
  }

#background {
  min-height: 550px;
  overflow: hidden;
}

/* CSS for mobile view */
@media (max-width: 768px) {
  .video {
   width: 100%;
  }
}

/* CSS for larger screens */
@media (min-width: 769px) {
  .video {
    width: 100%;
    height: 100%; /* Full height */
  }
}


@media (max-width: 767px) { /* Apply styles for devices smaller than 768px */
  .navbar-nav {
      width: 100%;
      text-align: center; /* Align items to center */
  }

  .navbar-nav .nav-item {
      width: 100%;
      display: block;
  }

  .navbar-nav .nav-link {
      display: inline-block;
      padding: 1rem 1rem; /* Adjust padding as needed */
      margin: 0.5rem auto; /* Center vertically */
  }
}


.google-map {
  width: 100%; /* Default width */
  height: 400px; /* Default height */
}

/* Media query for smaller devices */
@media (max-width: 768px) {
  .google-map {
      height: 200px; /* Adjusted height for smaller devices */
  }
}


/* Typewriter effect 1 */
@keyframes typing {
  0%, 24% { content: ""; }
  1%, 23% { content: "P"; }
  2%, 22% { content: "Ph"; }
  3%, 21% { content: "Pho"; }
  4%, 20% { content: "Phot"; }
  5%, 19% { content: "Photo"; }
  6%, 18% { content: "Photog"; }
  7%, 17% { content: "Photogr"; }
  9%, 16% { content: "Photogra"; }
  10%, 15% { content: "Photograp"; }
  11%, 14% { content: "Photograph"; }
  12%, 13% { content: "Photography"; }

  25%, 43.5% { content: "P"; }
  25.5%, 43% { content: "Pr"; }
  26%, 42.5% { content: "Pre"; }
  26.5%, 42% { content: "Pre-"; }
  27%, 41.5% { content: "Pre-W"; }
  27.5%, 41% { content: "Pre-We"; }
  28%, 40.5% { content: "Pre-Wed"; }
  28.5%, 40% { content: "Pre-Wedd"; }
  29%, 39.5% { content: "Pre-Weddi"; }
  29.5%, 39% { content: "Pre-Weddin"; }
  30%, 38.5% { content: "Pre-Wedding"; }
  30.5%, 38% { content: "Pre-Wedding "; }
  31%, 37.5% { content: "Pre-Wedding P"; }
  31.5%, 37% { content: "Pre-Wedding Ph"; }
  32%, 36.5% { content: "Pre-Wedding Pho"; }
  32.5%, 36% { content: "Pre-Wedding Phot"; }
  33%, 35.5% { content: "Pre-Wedding Photo"; }

  45%, 63.5% { content: ""; }
  45.5%, 63% { content: "B"; }
  46%, 62.5% { content: "Bu"; }
  46.5%, 62% { content: "Bus"; }
  47%, 61.5% { content: "Busi"; }
  47.5%, 61% { content: "Busin"; }
  48%, 60.5% { content: "Busine"; }
  48.5%, 60% { content: "Busines"; }
  49%, 59.5% { content: "Business"; }
  49.5%, 59% { content: "Business "; }
  50%, 58.5% { content: "Business P"; }
  50.5%, 58% { content: "Business Po"; }
  51%, 57.5% { content: "Business Por"; }
  51.5%, 57% { content: "Business Port"; }
  52%, 56.5% { content: "Business Portr"; }
  52.5%, 56% { content: "Business Portra"; }
  53%, 55.5% { content: "Business Portrai"; }
  53.5%, 55% { content: "Business Portrait"; }

  65%, 79% { content: ""; }
  65.5%, 78.5% { content: "F"; }
  66%, 78% { content: "Fa"; }
  66.5%, 77.5% { content: "Fam"; }
  67%, 77% { content: "Fami"; }
  67.5%, 76.5% { content: "Famil"; }
  68%, 76% { content: "Family"; }
  68.5%, 75.5% { content: "Family "; }
  69%, 75% { content: "Family P"; }
  69.5%, 74.5% { content: "Family Ph"; }
  70%, 74% { content: "Family Pho"; }
  70.5%, 73.5% { content: "Family Phot"; }
  71%, 73% { content: "Family Photo"; }

  80%, 98.5% { content: ""; }
  80.5%, 98% { content: "A"; }
  81%, 97.5% { content: "Ar"; }
  81.5%, 97% { content: "Art"; }
  82%, 96.5% { content: "Arti"; }
  82.5%, 96% { content: "Artis"; }
  83%, 95.5% { content: "Artist"; }
  83.5%, 95% { content: "Artisti"; }
  84%, 94.5% { content: "Artistic"; }
  84.5%, 94% { content: "Artistic "; }
  85%, 93.5% { content: "Artistic P"; }
  85.5%, 93% { content: "Artistic Po"; }
  86%, 92.5% { content: "Artistic Por"; }
  86.5%, 92% { content: "Artistic Port"; }
  87%, 91.5% { content: "Artistic Portr"; }
  87.5%, 91% { content: "Artistic Portra"; }
  88%, 90.5% { content: "Artistic Portrai"; }
  88.5%, 90% { content: "Artistic Portrait"; }
  
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 16.5s infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.5s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

.typewriter.nocaret::after {
  border-right: 0;
}

#background {
  position: relative;
  height:500px;
  width:100%;
  overflow: hidden;
}

#background-video {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  min-height: 100%;
  height:auto;
  width:auto;
  z-index: -100;
}

.blurWhite {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.6px);
  -webkit-backdrop-filter: blur(3.6px);
}

.blurBlack {
  background: rgba(0, 0, 0, 0.56);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(3.4px);
  -webkit-backdrop-filter: blur(3.4px);
}

.photos{
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 40px auto;
}
.photos ul{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
section ul li{
  list-style: none;
  background: #eee;
  padding: 12px 20px;
  margin: 5px;
  letter-spacing: 1px;
  cursor: pointer;
}
section ul li.active{
  background: #058dc7;
  color: #fff;
}
.product{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.product .itemBox{
  position: relative;
  width: 300px;
  height: 300px;
  margin: 5px;
  display: block;
}
.product .itemBox.hide{
  display: none;
}
.product .itemBox img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.animated-text {
  opacity: 0;
}