.left-aligned-content {
        text-align: left;
    }
    
/* Initially hidden */
.animated {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}

/* Fade-in effect when scrolled into view */
.animated.in-viewport {
    opacity: 1;
    transform: translateY(0);
}


	@keyframes draw {
  0% {
    stroke-dashoffset: 5000; /* Start with the path fully hidden */
  }
  100% {
    stroke-dashoffset: 0; /* Fully reveal the path */
  }
}

.hero{
    height:75vh;
}

.mask {
    margin-left: 50px;
    margin-top: -650px;
    width: 300px;
    height: 500px;
    fill: transparent;
    stroke: white;
    stroke-width: 7;
    stroke-dasharray: 4700;
    stroke-dashoffset: 4700;
    animation: draw 5.5s ease-in forwards;
    filter: url(#outer-glow);
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@media screen and (max-width: 600px) {
    .mask {
        margin-left: 20px;
        margin-top: -550px;
        width: 150px;
        height: 250px;
    }
}


/* Responsive adjustments */
@media only screen and (max-width: 600px) {
    .mask {
        width: 150px;
        height: 250px;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

   .hee {
    position: relative;
  
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right 90%;
    color: white;
   
    height: 100vh;
}

          

@media only screen and (max-width: 600px) {
    
	@keyframes draw {
  0% {
    stroke-dashoffset: 5000; /* Start with the path fully hidden */
  }
  100% {
    stroke-dashoffset: 0; /* Fully reveal the path */
  }
  .navigation-menu {
       background-color: #332D39;
  }
}
    .mask {
  position: absolute;

  

  width: 50px;
  height:200px;

  animation: draw 6.5s ease-in  forwards; 
  fill: transparent;
  stroke: white;
  stroke-width: 7;
  stroke-dasharray: 4700; 
  z-index:1;
  filter: url(#glow);
 

}
.hero{
    height:150vh;
}
.fade-in {
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .fade-in.active {
            opacity: 1;
        }

   .hee {
      position: relative;
      
 background-size: 150%;
 background-repeat: no-repeat;
      background-position: top 10px center;
      width:500px;
      color: white;
      
      padding: 30px;
     
    }


.dating_application_in_sweden{
    padding:100px;
       text-align: justify;

}


        ul.li {
  list-style-type: circle;
  margin-top:30px;
}

        
 .ld1, .ld2, .ld3 {
    
    padding: 15px; /* Optional: Adding padding for better spacing */
    border-radius: 12px; /* Optional: Adding border-radius for rounded corners */
    height: 250px; /* Set a fixed height for the UL elements */
    overflow: auto; /* Add scroll if content exceeds the set height */
    
  list-style-type: circle;
    margin-top:30px;
}
        
        .slide-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        }

        .slide-up.active {
            opacity: 1;
            transform: translateY(0);
        }
        .paddingg{
            padding-right:100px;
        }
    
     
     @keyframes blinkScale {
  0%, 100% {
    opacity: 1;
    
  }
  50% {
    opacity: 0; /* Adjust the opacity for the blink effect */
     /* Adjust the scale factor for the zoom effect */
  }
}
     
     .rounded-lg{
         margin-left: 200px;
     }
     @media only screen and (max-width: 600px){
              .rounded-lg{
         margin-left: 50px;
     }
      .about::before {
      display: none;
  }
  .paddingg{
            padding-right:1px;
        }
     }
        
        .animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}



      body {
    margin: 0;
    padding: 0;
}

.animate {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*=== Optional Delays, change values here  ===*/
.one {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.one {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
/* Add an animation to move elements upwards */
 @keyframes moveUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        /* Apply the animation to elements as needed */
        .fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-up.animate {
  opacity: 1;
  transform: translateY(0);
}
/* Apply the animation to elements as needed */
.animated-element {
    animation: moveUp 0.5s ease-in-out forwards; /* Adjust duration and timing as needed */
    opacity: 0; /* Initially hide the elements */
}

.grid:hover .pricing:not(:hover) {
    transform: scale(0.9);
}


        @media (max-width: 767px) {
    .hee {
      background-position: top 550px center;
      
      
     
    }
  }
           #features{
              margin-top:550px;
                     }
                     fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .ld{
            color:white;
            text-align:left;
        }
        
         .ld1{
            color:white;
            text-align:left;
            padding-left:80px;
        }


        .ld2{
            color:white;
            text-align:left;
            padding-left:60px;
        }

        .fade-in.show {
            opacity: 1;
            transform: translateY(0);
        }
        .bxs{
            -webkit-box-shadow: 10px 10px 33px -8px rgba(152,44,92,0.72);
               -moz-box-shadow: 10px 10px 33px -8px rgba(152,44,92,0.72);
               box-shadow: 10px 10px 33px -8px rgba(152,44,92,0.72);
           
           border:1px solid #982c5c;
        }
        
@media only screen and (max-width: 600px) {

.dating_application_in_sweden{

    display:none;
}
.hiw{
            padding-left: 0;
            padding-right: 0px;
        }
    .hee {
      position: relative;
      
 background-size: 150%;
 background-repeat: no-repeat;
      background-position: top 200px center;
      width:500px;
      color: white;
      
      padding: 30px;
     
    }
    
}