.hee {
    position: relative;
    background-image: url('https://i.imgur.com/kXkSxmL.png'); 
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right 90%;
    color: white;
  
    height: 100vh;
}
@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;
}

 @keyframes blinkScale {
  0%, 100% {
    opacity: 1;
    
  }
  50% {
    opacity: 0; /* Adjust the opacity for the blink effect */
     /* Adjust the scale factor for the zoom effect */
  }
}

  .pricing{
    background: linear-gradient(to bottom, #A279A3 10%, #ffff);
    padding: 40px;
    border-radius: 30px;
}
.gradient-text {
    background: linear-gradient(to right, #C82C6D, #A279A3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.btn-get-started {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 10px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: #fff;
  background: linear-gradient(to right, #c82c6d, #a279a3);
}

.pricing h1{
    font-size: 25px;
    padding-bottom: 10px;
    font-weight: 500;
}
  .pricing {
      
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0); /* Initially no shadow */
}

.pricing:hover {
    transform: scale(1.1);
    -webkit-box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
    -moz-box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
    box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
}

  .how {
      
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0); /* Initially no shadow */
}

.how:hover {
    transform: scale(1.1);
    -webkit-box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
    -moz-box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
    box-shadow: 5px 5px 20px 5px rgba(199,46,110,0.71); /* Smaller shadow */
}

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


        @media (max-width: 767px) {
    .hee {
     
      
      
     
    }
  }
           #features{
              margin-top:550px;
                     }
    
.mask {
    position: absolute;
    width: 330px;
    height: 600px;
    fill: transparent;
    stroke: white;
    stroke-width: 7;
    stroke-dasharray: 4700;
    stroke-dashoffset: 4700;
    animation: draw 5.5s ease-in forwards;
    filter: url(#outer-glow); /* Apply the glow filter */
    z-index: 2;
}

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

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

    .hee {
    position: relative;
    background-image: url('https://i.imgur.com/fSAy6sD.png'); 
    background-size: 70%;
    background-repeat: no-repeat;
    background-position: right 90%;
    color: white;
    margin-bottom: 200px;
    
    height: 100vh;
}

@@media only screen and (max-width: 1920px){
    .mdimension{
        margin-left: -5
        0px;
    }
}

@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;
  top: 0;
  right: 0;
  bottom: 0;
  

  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);
  
background-position: center;
background-repeat: no-repeat;


}


}

}
.gradient-background-color{
    background: linear-gradient(to right, #C82C6D, #A279A3);
    color:white;
}
.black{
    color:black;
}

.abt-img{
    margin-left: 100px;
    margin-top: -80px;
}

.padg{
    margin-left:0px;
}


.sty{
    transform: scale(7); margin-top: -30px; background-image: url('https://i.imgur.com/kXkSxmL.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;

}

.her{
    margin-top:100px;
    margin-bottom: 100px;
}
#header {
    position: relative;
    z-index: 9999; /* Ensure the navbar is above other elements */
}

@media only screen and (max-width: 600px) {
   .services {
    margin-top: 320px;
}
.her{
    height: 80vh;
}

.animm {
    margin-top: -700px; /* Adjusted margin-top value */
    background-image: url('https://i.imgur.com/kXkSxmL.png');
}



.anim {
   
    display: flex;
    justify-content: center; /* Horizontally center */
}


    
    .hero{
        height: 150;
    }
    .abt-img{
    margin-left: 0px;
    margin-top: 0px;
}
.padg{
    margin-left:20px;
}

}
.pbtn{
     background-color:#A279A3;padding: 10px 30px; margin-left:10px; border-radius: 50px; color:white;
}

.mdimension{
    margin-left:-80px; 
    margin-top:-800px;
}



.cgradient{
    margin-top:-200px; 
    margin-left:-300px;
    width: 900px; 
    position: relative; 
    z-index: -1;
}

.headpart{
    margin-top:-100px;
}
.height{
    height:100vh;
}


@media only screen and (max-width: 600px){
    .height{
    height:600px;
}
 .cgradient{
    margin-top:30px; 
    margin-left:5px;
    width: 400px; 
    position: relative; 
    z-index: -1;
}
.height{
    margin-top:-10px;
}
.headpart{
    margin-top:20px;
}
.mdimension{
    margin-right:120px; 
    margin-top:500px;
    width:50px;
}
.mask{
    width:200px;
    height:400px;
    margin-right:130px;
     filter: url(#outer-glow); /* Apply the glow filter */
    
}
}