html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      background-color:#000000;  
    }
.zoom-on-hover {
    overflow: hidden;
}

.zoom-on-hover img {
    transition: transform 0.3s ease-in-out;
}

.zoom-on-hover img:hover {
    transform: scale(1.1);
}

.hmbg {
    background-image: url('../img/pp-bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* Set the height of the container to 100% of the viewport height */
}

#imageContainer {
  position: relative;
  width: 600px;
  height: 800px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  max-width: 100%;
  filter: saturate(50%);
  transition: all ease 0.5s;
}

#imageContainer:hover {
  filter: saturate(100%)
}


#imageContainer > * {
  position: absolute;
  inset: 0;
  height: 100% !important;
  width: 100% !important;
  object-fit: cover;
}


.image-wrapper {
  display: flex;
  align-items: center;
  text-align: center;
  line-height: 1.6;
}
.image-wrapper img {
  height: auto;
  max-width: 100%;
}

.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  content: "";
  display: block;
  height: 100%;
  left: -75%;
  position: absolute;
  top: 0;
  transform: skewX(-25deg);
  width: 50%;
  z-index: 2;
}
.shine:hover::before, .shine:focus::before {
  -webkit-animation: shine 0.85s;
          animation: shine 0.85s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}


.fltimg {
    position: relative;
}

.fltimg img {
    animation: floatAnimation 5s linear infinite;
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}



    
 .stars {
            top: 0;
            left: 0;
            width: 50%;
            height: 70%;
            transform: rotate(-45deg);
        }

        .star {
            --star-color: #ffffff; /* Set your star color */
            --star-tail-length: 6em;
            --star-width: calc(var(--star-tail-length) / 6);
            --fall-duration: 6s;
            --fall-delay: 0s;
            position: absolute;
            top: var(--top-offset);
            left: 0;
            width: var(--star-tail-length);
            height: 2px;
            background: linear-gradient(45deg, var(--star-color), transparent);
            border-radius: 50%;
            filter: drop-shadow(0 0 6px var(--star-color));
            transform: translate3d(100vw, 0, 0);
            animation: fall var(--fall-duration) var(--fall-delay) linear infinite, blink 2s linear infinite;
        }
        
 

.star:nth-child(1) {
  --star-tail-length: 5.68em;
  --top-offset: 25.07vh;
  --fall-duration: 9.066s;
  --fall-delay: 0.841s;
}
.star:nth-child(2) {
  --star-tail-length: 5.26em;
  --top-offset: 65.66vh;
  --fall-duration: 9.636s;
  --fall-delay: 5.061s;
}
.star:nth-child(3) {
  --star-tail-length: 6.15em;
  --top-offset: 88.36vh;
  --fall-duration: 6.58s;
  --fall-delay: 7.317s;
}
.star:nth-child(4) {
  --star-tail-length: 5em;
  --top-offset: 13.34vh;
  --fall-duration: 9.931s;
  --fall-delay: 1.553s;
}
.star:nth-child(5) {
  --star-tail-length: 7em;
  --top-offset: 0.47vh;
  --fall-duration: 11.856s;
  --fall-delay: 5.566s;
}
.star:nth-child(6) {
  --star-tail-length: 5.07em;
  --top-offset: 66.8vh;
  --fall-duration: 6.149s;
  --fall-delay: 3.803s;
}
.star:nth-child(7) {
  --star-tail-length: 5.16em;
  --top-offset: 62.14vh;
  --fall-duration: 11.353s;
  --fall-delay: 4.099s;
}
.star:nth-child(8) {
  --star-tail-length: 5.88em;
  --top-offset: 37.39vh;
  --fall-duration: 10.278s;
  --fall-delay: 2.761s;
}
.star:nth-child(9) {
  --star-tail-length: 5.13em;
  --top-offset: 49.72vh;
  --fall-duration: 11.573s;
  --fall-delay: 5.079s;
}
.star:nth-child(10) {
  --star-tail-length: 5.84em;
  --top-offset: 48.52vh;
  --fall-duration: 9.561s;
  --fall-delay: 6.878s;
}
.star:nth-child(11) {
  --star-tail-length: 7.18em;
  --top-offset: 81.49vh;
  --fall-duration: 6.424s;
  --fall-delay: 6.113s;
}
.star:nth-child(12) {
  --star-tail-length: 7.03em;
  --top-offset: 29.77vh;
  --fall-duration: 9.563s;
  --fall-delay: 4.919s;
}
.star:nth-child(13) {
  --star-tail-length: 5.87em;
  --top-offset: 64.41vh;
  --fall-duration: 8.837s;
  --fall-delay: 0.268s;
}
.star:nth-child(14) {
  --star-tail-length: 5.07em;
  --top-offset: 1.4vh;
  --fall-duration: 6.666s;
  --fall-delay: 1.242s;
}
.star:nth-child(15) {
  --star-tail-length: 6.15em;
  --top-offset: 42.38vh;
  --fall-duration: 9.261s;
  --fall-delay: 0.077s;
}
.star:nth-child(16) {
  --star-tail-length: 5.25em;
  --top-offset: 17.03vh;
  --fall-duration: 7.84s;
  --fall-delay: 4.807s;
}
.star:nth-child(17) {
  --star-tail-length: 5.84em;
  --top-offset: 15.63vh;
  --fall-duration: 11.466s;
  --fall-delay: 9.696s;
}
.star:nth-child(18) {
  --star-tail-length: 5.54em;
  --top-offset: 96.24vh;
  --fall-duration: 8.027s;
  --fall-delay: 7.052s;
}
.star:nth-child(19) {
  --star-tail-length: 6.39em;
  --top-offset: 73.95vh;
  --fall-duration: 6.076s;
  --fall-delay: 8.036s;
}
.star:nth-child(20) {
  --star-tail-length: 7.42em;
  --top-offset: 70.14vh;
  --fall-duration: 10.116s;
  --fall-delay: 2.077s;
}
.star:nth-child(21) {
  --star-tail-length: 6.44em;
  --top-offset: 51.25vh;
  --fall-duration: 8.587s;
  --fall-delay: 9.176s;
}
.star:nth-child(22) {
  --star-tail-length: 6.39em;
  --top-offset: 40.44vh;
  --fall-duration: 9.787s;
  --fall-delay: 6.1s;
}
.star:nth-child(23) {
  --star-tail-length: 6.02em;
  --top-offset: 19.14vh;
  --fall-duration: 8.321s;
  --fall-delay: 3.498s;
}
.star:nth-child(24) {
  --star-tail-length: 7.14em;
  --top-offset: 76.13vh;
  --fall-duration: 11.643s;
  --fall-delay: 9.228s;
}
.star:nth-child(25) {
  --star-tail-length: 5.7em;
  --top-offset: 97.56vh;
  --fall-duration: 11.384s;
  --fall-delay: 8.597s;
}
.star:nth-child(26) {
  --star-tail-length: 7.07em;
  --top-offset: 3.18vh;
  --fall-duration: 7.389s;
  --fall-delay: 9.692s;
}


        @media screen and (max-width: 750px) {
            .star {
                animation: fall var(--fall-duration) var(--fall-delay) linear infinite;
            }
        }

        @keyframes fall {
            to {
                transform: translate3d(-100vw, 0, 0);
            }
        }

        @keyframes blink {
            50% {
                opacity: 0.6;
            }
        }
    
    
 .display-4 {
      position: relative;
      transition: transform 0.3s ease;
    }

    .move-left {
      transform: translateX(-20px);
    }

    .move-right {
      transform: translateX(20px);
    }

    .ps-5 {
      display: inline-block;
      transition: transform 0.3s ease;
    }

.abpara {
    font-size:1.2em;
    line-height:1.8em;
    font-weight:500;
    color:#d6ff56;
}

.colhvr {
    /* Add your initial background gradient and other styles here */
    background: linear-gradient(45deg, rgba(255, 138, 0, 0), rgba(229, 46, 113, 0), rgba(63, 0, 238, 0));
    transition: background 1s ease-in-out, transform 0.3s ease-in-out;
}

.colhvr:hover {
    /* Add any additional styles for the hover state */
    background: linear-gradient(45deg, #ff8a00, #e52e71, #d6ff56);
    transform: scale(1.05); /* Example: Scale effect on hover */
}

.colhvr:hover fcgrey {
    color:#000;
}


.serattl {
    font-size:4em;
}
.blkbg {
    background-color:#000;
}

.ofgrbg {
    background-color:#d6ff56;
}


.fcwhite {
    color:#fff;
}

.fcgrey {
    color:#aaa;
}

.fcpur {
    color:#d6ff56;
}

.fcblack {
    color:#000;
}

.bdrblk {
    border:solid 16px #000000;
}

.srcbox {
    border:solid 2px #fff;
    border-radius:20px;
}

.srcbox:hover {
    border:solid 2px #161616;
    background-color:#161616;
}

.srcbox:hover .fcgrey {
    color: white;
}

.srcbox:hover img {
    filter: brightness(200%);
}



.bdrhalf-400 {
    border-radius:400px 400px 0px 0px;
}

.bdr-400 {
    border-radius:400px;
}

.bdr-100 {
    border-radius:100px;
}

.bdr-50 {
    border-radius:50px;
}

.bdr-img400 {
    border-radius:400px;
}

.blackbg {
    background-color:#000000;
} 

.whitebg {
    background-color:#ffffff;
} 

.blckshd {
    background-color:#0D111A;
}

.purbg {
    background-color:#6600FF;
}

.fsoneem {
   font-size:1em; 
}
.linkawh {
  color: #000;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  font-size:1.2em;
  font-family: mulishbold;
  padding-bottom:4px;
}

.linkawh::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background-color: #d6ff56; /* Change the border color to orange */
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease;
}

.linkawh:hover {
  color: #d6ff56;
}

.linkawh:hover::after {
  width: 100%;
  left: 0;
}


.linkabl {
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  font-size:1.2em;
  font-family: mulishbold;
  padding-bottom:4px;
}

.linkabl::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background-color: #d6ff56; /* Change the border color to orange */
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease;
}

.linkabl:hover {
  color: #d6ff56;
}

.linkabl:hover::after {
  width: 100%;
  left: 0;
}


.linkaftr {
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  font-size:1em;
  font-family: mulishbold;
  padding-bottom:4px;
}

.linkaftr::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background-color: #d6ff56; /* Change the border color to orange */
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: width 0.3s ease, left 0.3s ease;
}

.linkaftr:hover {
  color: #d6ff56;
}

.linkaftr:hover::after {
  width: 100%;
  left: 0;
}



    
@font-face {
  font-family: mulishsb;
  src: url('../fonts/Mulish-SemiBold.ttf');
}

@font-face {
  font-family: mulishbold;
  src: url('../fonts/Mulish-Bold.ttf');
}

.bold {
    font-family: mulishbold;
}

.scrollservice {
    background-color:#000;
    padding:40px 0px;
    margin:0px 0px;
    overflow:hidden;
}

.scroll-top {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-right:-80%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    }
    
    @keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

  .mscroll-top {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-right:-80%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    animation: marquee 60s linear infinite; /* Adjust the duration as needed */
  }

    .scroll-topb {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-left:-80%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    }
    
.filled-title {
  margin: 0 35px;
  font-size: 80px;
  line-height: 1.5em;
  font-family: mulishsb;
  font-weight:700;
  color:#fff;
}

.ser-scroll-title {
  margin: 0 35px;
  font-size: 80px;
  line-height: 1.5em;
  font-family: mulishsb;
  display: inline-block;
  font-weight:700;
}

.filled-titleblack {
  margin: 0;
  font-size: 80px;
  line-height: auto;
  font-family: mulishbold;
  font-weight:700;
  color:#000;
}

.filledctitle {
  margin: 0 35px;
  font-size: 100px;
  line-height: 1em;
  font-family: mulishbold;
  font-weight:800;
  color:#fff;
}


.large-dot {
  width: 15px;
  height: 15px;
  min-height: 15px;
  min-width: 15px;
  background-color: #fff;
  border-radius: 50%;
  margin:60px 0px;
}

.stroke-title {
  color: #000;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  margin: 0 35px;
  font-size: 80px;
  line-height: 1.5em;
  font-family: mulishsb;
  font-weight:700;
}

.strokectitle {
  color: rgba(0, 0, 0, 0); /* Fully transparent text color */
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  margin: -10px 35px;
  font-size: 100px;
  line-height: 1.5em;
  font-family: mulishbold;
  font-weight: 700;
  text-transform: uppercase;
}

.innertitle {
  font-size: 55px;
  line-height: 1.2em;
  background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
  color:#000000;
  letter-spacing:5px;
  font-family: mulishbold;
  font-weight:600;
  -webkit-background-clip:text;
  -webkit-text-stroke:5px transparent;
}



@media only screen and (max-width: 600px) {
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color:#000000;  
}

 .stars {
            top: 0;
            left: 0;
            width: 50%;
            height: 70%;
            transform: rotate(-45deg);
        }
    
.filled-title {
  margin: 0 35px;
  font-size: 50px;
  line-height: 1.5em;
  font-family: mulishsb;
  font-weight:700;
  color:#fff;
}

.filledctitle {
  margin: 0 35px;
  font-size: 50px;
  line-height: 1em;
  font-family: mulishbold;
  font-weight:800;
  color:#fff;
}
.stroke-title {
  color: #000;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  margin: 0 35px;
  font-size: 60px;
  line-height: 1.5em;
  font-family: mulishsb;
  font-weight:700;
}

.strokectitle {
  color: #000000;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  margin: -10px 35px;
  font-size: 60px;
  line-height: 1.5em;
  font-family: mulishbold;
  font-weight:700;
  text-transform:uppercase;
}

.filled-titleblack {
  margin: 0;
  font-size: 40px;
  line-height: auto;
  font-family: mulishbold;
  font-weight:700;
  color:#000;
}

.scroll-top {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-right:-650%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    }
    
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

  .mscroll-top {
    display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-right:-80%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    animation: marquee 10s linear infinite; /* Adjust the duration as needed */
  }

    .scroll-topb {
      display: flex;
      white-space: nowrap;
      overflow: hidden;
      margin-left:-550%;
      transition: transform 0.3s ease-out; /* Smooth transition */
    }
}