@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
    font-family: 'X7DesignFont'; /* Name you want to use */
    src: url('/fonts/x7design-Regular.woff2') format('woff2'),
        url('/fonts/x7design-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Optional but recommended */
}
  html {
    scroll-behavior: smooth;
  }
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body{
    background: #0d0b13;
    /*font-family: poppins;*/
    font-family: Poppins ,sans-serif;
    padding: 0;
    margin: 0;
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    place-items: center;
    position: relative;
}
::selection {
    background: #210055;  /* Selection background color */
    color: white;         /* Selection text color */
}
img{
    user-select: none;         /* Disable text selection */
    pointer-events: none;      /* Disable interaction (like dragging) */
    -webkit-user-drag: none;   /* Prevent dragging in WebKit browsers */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.menu{
    z-index: 1105;
    background: none;
    position: relative !important;
}
nav a:hover{
  color: #7650ff !important;
}
video::-webkit-media-controls {
  display: none !important;
}
.cover-section1-web{
    width: 100%;
    max-width: inherit;
    background: black;
    display: flex;
    place-content: center;
    position: relative;
    height: fit-content;
    overflow: hidden;
    min-height: 700px;
}
.sec1-container-web{
    width:100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    padding: 5% 5% 0% 5%;
    position: relative;
    z-index: 4;
    align-items: center;
}

.image-show-container-sec1-web{
    width: 60%;
    height: 100%;
    display: flex;
    flex-direction: column;
    place-content: end;
    align-items: end;
    position: relative;
    overflow: visible;
}

.behind-img-sec1-web{
    width: 90%;
    height: 100%;
    background-color: transparent;
    overflow: visible;
    padding: 0.4rem;
    position: absolute;
    border-radius: 10px;
    
}

.behind-glow-img-sec1-web{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #7104ff 100%);
  border-radius: 10px;
  overflow: visible;
  position: relative;
  padding: 0.1rem;
  filter: blur(7px);
  opacity: 1;
}
.behind-behind-glow-img-sec1-web{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #7104ff 100%);
  border-radius: 10px;
  overflow: visible;
  position: relative;
  padding: 0.1rem;
  filter: blur(64px);
  opacity: 0.9;

}
.main-img-sec1-web{
  width: 90%;
  height: 100%;
  border-radius: 0px;
  overflow: hidden;
  padding: 0.5rem;
}

.main-img-sec1-web::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleX(1.3) scaleY(2);
  background: linear-gradient(to top, rgb(0, 0, 0) 30%, transparent 50%);
  pointer-events: none;
  z-index: 10; /* Above glow, but below UI if needed */
}

.glow-around-main-img-sec1-web{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #7104ff 90%, #d1adff 95% , #7104ff 100%);
  border-radius: 9px;
  overflow: hidden;
  position: relative;
  padding: 0.12rem;
}

.main-content-img-sec1-web{
  width: 100%;
  height: 100%;
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  padding: 0rem;
  place-content: center;
  align-items: center;
  display: flex;
}
.img-sec1-web-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  overflow: hidden;
}
.img-sec1-web-details{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
  padding: 0%;
  opacity: 1;
  z-index: 1;
}
.img-sec1-web-gradient-around-img{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(41deg, #070a13 -40%, #040404 100%);
  opacity: 1;
  z-index: 2;
  position: relative;
  overflow: hidden;
}





.text-button-container-sec1-web{
    width: 40%;
    height: 100%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
    justify-content: center;
}
.text-button-container-sec1-web button{
  width: 13rem !important;
  height: 2.5rem !important;
  color: rgb(19, 0, 34);
  background: transparent;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  font-family: Poppins ,sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  transition: box-shadow 0.5s ease, background 2s ease;
  position: relative;
    box-shadow: 0px 0px 36px 1px rgba(162, 0, 255, 0.196) ;

}


.pClassButtonSec1Web{
z-index: 5;
  position: relative;
  font-weight: 600;
  background: linear-gradient(90deg, #b379ff 13%, #300666 40%, #300666 50%, #b379ff 100%);
    background-position-x: 0%;
    background-position-y: 0%;
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  background-position: 0px 0px;
  transition: background-position 1s ease;
}
.before-button-div-sec1-web{
  width: 90%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 5%;
  background: #7650ff;
  filter: blur(4px);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.text-button-container-sec1-web button:hover .pClassButtonSec1Web{
  background-position: 200px 0px;
}
.text-button-container-sec1-web button:hover .before-button-div-sec1-web{
  opacity: 1;
}
.button-div-sec1-web{
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 346px;
  top: 0;
  left: 0;
  padding: 0.15rem;
  background: transparent;
  pointer-events: none;
}
.button-div-div-sec1-web{
  width: 100%;
  height: 100%;
  background: linear-gradient(
      var(--angle, 45deg), 
      #3d0086 15%, 
      transparent 30%, 
      transparent 70%, 
      #3d0086 85%
    );
    
  background-size: 200% 200%;
  cursor: pointer;
  border-radius: 105px;
  padding: 0.05rem;
  transition: background 0.5s ease;
}
.button-div-div-sec1-web div{
  width: 100%;
  height: 100%;
  border-radius: 70px;
  background: linear-gradient(
    90deg,
    #d6d6d6 0%,
    white var(--white-start, 50%),
    white var(--white-end, 50%),
    #d6d6d6 100%
  );
  transition: background 0.5s ease;
}

.web-sec1{
    height: 100%;
    width: 100%;
    flex-wrap: wrap;
    max-width: 1200px;
    display: flex;
    scroll-behavior: smooth; /* Optional, for smooth behavior */
    justify-content: center;
    align-items: center;
    color: white;
    overflow: visible;
    transition: background-color 0.5s;
    position: relative;
    z-index: 12;
    
}
.mobile-sidebar{
  z-index: 103;
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #06000fb2 !important;
  transition: right 0.3s ease;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 20px;
  backdrop-filter: blur(15px);
}
.mobile-nav .menu-item{
  background-color: #3d394c !important;
}
.mobile-submenu #menu-item1:hover, .mobile-submenu #menu-item3:hover, .mobile-submenu #menu-item4:hover{
  background-color: #292633 !important;
}
.mobile-submenu #menu-item2:hover{
  background-color: transparent !important;
}

.mobile-nav .menu-item:hover{
  background-color: #292633 !important;
}
#ServicesContainer:hover{
  background-color: #3d394c !important;
}
.section-one-overlay{
  z-index: 102;
}
.background-effects-sec1-web{
    position: absolute;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1200px;
    display: flex;
    scroll-behavior: smooth;
    justify-content: center;
    align-items: center;
    color: white;
    overflow: visible;
    place-content: start;
}

.background-effects-top-sec1-web, .background-effects-bottom-sec1-web{
    width: 100%;
    height: 50%;
    display: flex;
}
.background-effects-top-sec1-web{
    place-content: start;
}
.glow-the-background-of-sec1-web-bottom{
    width: 5rem;
    height: 15rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
        background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(23.96% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 68%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 38%);
    padding: 24%;
    top: 18rem;
    left: 15rem;
}
.background-effects-bottom-sec1-web{
    place-content: end;
}
.glow-the-background-of-sec1-web-top{
    width: 25rem;
    height: 25rem;
    position: relative;
    top: -13rem;
    background: rgba(66, 0, 128, 0.36);
    border-radius: 50%;
    left: -9rem;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(50% at 50% 50%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 68%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 68%);
    padding: 24%;
}




.text-container-sec1-web-text{
    width: 100%;
    place-content: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 1rem;
}
.text-container-sec1-web-text h1{
    line-height: 1.7rem;
    padding-bottom: 1rem;
    width: 100%;
    height: fit-content;
    text-align: left;
}
.text-container-sec1-web-text h1 span{
    color: #7650ff;
}
.text-container-sec1-web-text p{
    color: rgb(223, 223, 223);
    text-align: left;
}
.texts-container-sec1-web{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    background-color: transparent;
    gap: 3rem;
    place-content: center;
    align-items: center;
}


.sec1-web-img-texts-container{
  width: 90%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  text-align: left; /* Align text to the left */
  display: inline-block; /* Ensure container hugs content */
  flex-direction: column;
  place-content: end;
  position: absolute;
  padding: 3rem 3rem 3rem 2rem;
  z-index: 9999999;
}

.h3-text {
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}

.sec1-web-img-texts-container h3{
  color: rgb(255, 255, 255);
  min-height: 1.2em; /* Prevents layout shift */
  display: inline-block; /* Keep h1 inline with cursor */
  margin: 0; /* Remove default margins */
  height: fit-content;
  font-weight: 600;
}
.sec1-web-img-texts-container h5{
  color: rgb(197, 197, 197);
  font-weight: 400;
}
.cursor {
  display: inline-block;
  width: 0.25rem; /* Cursor width */
  height: 2rem; /* Match text line height for top/bottom alignment */
  background-color: #333;
  vertical-align: text-bottom; /* Align cursor with text baseline */
  animation: blink 1s infinite;
  margin-left: 4px; /* Gap between text and cursor */
}
@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}



@media screen and (orientation: portrait) and (min-width: 1201px){
  .cover-section1-web{
    height: 100vh;
  }
  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: 50%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }
  .sec1-container-web{
    flex-direction: column;
    padding: 5% 5% 5% 5%;
  }
  .glow-the-background-of-sec1-web-top{
    width: 65rem;
    height: 65rem;
    overflow: visible;
    top: -20rem;
    left: -17rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 55rem;
    height: 55rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 10rem;
  }
}





@media screen and (orientation: portrait) and (max-width : 1200px){
  .cover-section1-web{
    height: 100vh;
  }
  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: 50%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }
  .sec1-container-web{
    flex-direction: column;
    padding: 5% 5% 5% 5%;
  }
  .glow-the-background-of-sec1-web-top{
    width: 65rem;
    height: 65rem;
    overflow: visible;
    top: -20rem;
    left: -17rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 55rem;
    height: 55rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 10rem;
  }
}






@media screen and (orientation: portrait) and (max-width : 992px){
  .cover-section1-web{
    height: fit-content;
  }
  .menu{
    position: relative !important;
  }

  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: 50%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }
  .sec1-container-web{
    flex-direction: column;
    padding: 5% 5% 5% 5%;
    gap: 5rem;
  }
  .glow-the-background-of-sec1-web-top{
    width: 55rem;
    height: 55rem;
    overflow: visible;
    top: -12rem;
    left: -15rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 55rem;
    height: 55rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 10rem;
  }
  .text-container-sec1-web-text h1{
    line-height: 2.3rem;
  }
    .text-button-container-sec1-web button{
    width: 15rem !important;
    height: 3rem !important;
    place-self: center;
  }
  .text-container-sec1-web-text p, .text-container-sec1-web-text h1{
    text-align: center;
  }
}





@media screen and (orientation: portrait) and (max-width : 768px){
  .cover-section1-web{
    height: fit-content;
    
  }
  .menu{
    position: relative !important;
  }
  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: 50%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
  }
  .sec1-container-web{
    flex-direction: column;
    padding: 5% 5% 5% 5%;
  }
  .glow-the-background-of-sec1-web-top{
    width: 35rem;
    height: 35rem;
    overflow: visible;
    top: -10rem;
    left: -8rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 35rem;
    height: 35rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 10rem;
  }
  .text-button-container-sec1-web button{
    width: 13rem !important;
    height: 3rem !important;
    place-self: center;
  }
  .text-container-sec1-web-text p, .text-container-sec1-web-text h1{
    text-align: center;
  }
}





@media screen and (orientation: portrait) and (max-width : 600px){
  .cover-section1-web{
    height: 70vh;
    max-height: 720px;
  }

  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: 50%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
    place-content: center;
    transform: translate(0%, 1rem);
  }
  .sec1-container-web{
    flex-direction: column;
    place-content: space-between;
    padding: 5% 5% 5% 5%;
    gap: 3rem;
    height: fit-content;
  }
  .glow-the-background-of-sec1-web-top{
    width: 25rem;
    height: 35rem;
    overflow: visible;
    top: -10rem;
    left: -8rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 15rem;
    height: 25rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 4rem;
  }
  .text-button-container-sec1-web button{
    width: 12rem !important;
    height: 2.65rem !important;
    color: rgb(19, 0, 34);
    font-family: Poppins ,sans-serif;
    font-weight: 400;
    place-self: center;
}
.text-container-sec1-web-text h1{
    line-height: 1.5rem;
    padding-bottom: 0rem;
    width: fit-content;
    height: fit-content;
    display: flex;
    background: transparent;
    flex-direction: column;
    text-align: center;
    padding: 0.5rem;
    border-radius: 10px;
    backdrop-filter: blur(6px);
}
.text-container-sec1-web-text{
  align-items: center;
}
.text-container-sec1-web-text p{
  text-align: center;
}
  .text-container-sec1-web-text h1 span{
    display: contents !important;
  }
}





@media screen and (orientation: portrait) and (max-width : 450px){
  .cover-section1-web{
    min-height: 620px;
    height: 70vh;
    max-height: 650px;
  }
  .image-show-container-sec1-web{
    height: fit-content;
    width: 110%;
    place-content: center;
    align-items: center;
  }
  .text-button-container-sec1-web{
    width: 100%;
    height: fit-content;
    gap: 2rem;
    display: flex;
    flex-direction: column;
    z-index: 5;
    place-content: end;
    transform: translate(0%, 1rem);
  }
  .sec1-container-web{
    flex-direction: column;
    place-content: center;
    padding: 5% 5% 5% 5%;
    height: fit-content;
  }
  .glow-the-background-of-sec1-web-top{
    width: 25rem;
    height: 35rem;
    overflow: visible;
    top: -10rem;
    left: -8rem;
  }
  .glow-the-background-of-sec1-web-bottom{
    width: 15rem;
    height: 25rem;
    position: relative;
    background: rgba(66, 0, 128, 0);
      background-image: none;
    background-image: none;
    border-radius: 50%;
    align-self: end;
    z-index: 100;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(29.09% at 50.97% 48.38%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 58%);
    padding: 24%;
    top: 11rem;
    left: 4rem;
  }
  .text-button-container-sec1-web button{
    width: 11rem !important;
    height: 2.5rem !important;
    color: rgb(19, 0, 34);
    font-family: Poppins ,sans-serif;
    font-weight: 400;
    place-self: center;
}
.text-container-sec1-web-text h1{
    line-height: 1.3rem;
    padding-bottom: 0rem;
    width: fit-content;
    height: fit-content;
    display: flex;
    background: transparent;
    flex-direction: column;
    text-align: center;
    padding: 0.5rem;
    border-radius: 10px;
    backdrop-filter: blur(6px);
}
.text-container-sec1-web-text{
  align-items: center;
}
.text-container-sec1-web-text p{
  text-align: center;
}
  .text-container-sec1-web-text h1 span{
    display: contents;
  }

}
@media screen and (orientation: portrait) and (max-width : 400px){
  .cover-section1-web{
    height: 80vh;
  }
  .text-container-sec1-web-text h1 span{
    display: contents;
  }
}









@media screen and (orientation: landscape) and (min-width: 1201px){
.cover-section1-web{
  min-height: 550px;
}
.text-container-sec1-web-text h1 span{
    display: contents;
  }
}
@media screen and (orientation: landscape) and (max-width: 1200px){
.cover-section1-web{
  min-height: 550px;
}
.text-container-sec1-web-text h1 span{
    display: contents;
  }
}
@media screen and (orientation: landscape) and (max-width: 992px){
  .text-container-sec1-web-text h1 span{
    display: contents;
    
  }
  .glow-around-main-img-sec1-web{
    padding: 0.08rem;
  }
  .text-container-sec1-web-text h1{
    line-height: 2.2rem;
    font-size: 1.8rem;
    gap: 0.5rem;
    padding-bottom: 1rem;
    width: 70% !important;
    height: fit-content;
    place-self: center;
    text-align: center;
}
 .text-container-sec1-web-text p{
  width: 70% !important;
  place-self: center;
 }
.sec1-container-web{
  flex-direction: column;
  gap: 2rem;
  padding: 8% 5% 0% 5%;
}
.text-button-container-sec1-web, .texts-container-sec1-web h1, .texts-container-sec1-web p{
  width: 100%;
  place-content: center;
  align-items: center;
  display: flex;
}
.image-show-container-sec1-web{
  width: 75%;
}
.text-button-container-sec1-web button{
  width: 11rem;
  height: 2.3rem;
  color: rgb(19, 0, 34);
  font-family: Poppins ,sans-serif;
  font-weight: 600;
}

.glow-the-background-of-sec1-web-top{
  height: 28rem;
  top: -10rem;
}
.glow-the-background-of-sec1-web-bottom{
  width: 26rem;
  height: 15rem;
  top: 9rem;
  left: 10rem;
}
.image-show-container-sec1-web{
  place-content: center;
  align-items: center;
}
.cover-section1-web{
  min-height: 550px;
}
.text-container-sec1-web-text h1 span{
    display: contents;
  }
}




@media screen and (orientation: landscape) and (max-width: 768px){
.text-container-sec1-web-text h1 span{
    display: contents;
  }
  .glow-around-main-img-sec1-web{
    padding: 0.08rem;
  }
  .text-container-sec1-web-text h1{
    line-height: 1.5rem;
    font-size: 1.5rem;
    gap: 0.5rem;
    padding-bottom: 1rem;
    width: 100%;
    height: fit-content;
    text-align: left;
}
.sec1-container-web{
  flex-direction: column;
  gap: 2rem;
  padding: 8% 5% 0% 5%;
}
.text-button-container-sec1-web, .texts-container-sec1-web h1, .texts-container-sec1-web p{
  width: 100%;
  place-content: center;
  align-items: center;
  display: flex;
}
.image-show-container-sec1-web{
  width: 85%;
}
.text-button-container-sec1-web button{
  width: 10rem;
  height: 2rem;
  color: rgb(19, 0, 34);
  font-family: Poppins ,sans-serif;
  font-weight: 600;
}
.glow-the-background-of-sec1-web-top{
  height: 28rem;
  top: -10rem;
}
.glow-the-background-of-sec1-web-bottom{
  width: 26rem;
  height: 15rem;
  top: 9rem;
  left: 10rem;
}
.image-show-container-sec1-web{
  place-content: center;
  align-items: center;
}

}

























































/*                                    Section 2                                  */
.cover-section2-web{
    width: 100%;
    height: fit-content;
    max-width: inherit;
    display: flex;
    place-content: center;
    background: #f0f2f4;
    position: relative;
    z-index: 13;
    overflow: hidden;
}

.web-sec2{
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1200px;
    display: flex;
    scroll-behavior: smooth; /* Optional, for smooth behavior */
    justify-content: start;
    align-items: start;
    color: white;
    transition: background-color 0.5s;
    padding: 5% 5% 0% 5%;
}

.top-part-sec2-web{
    width: 100%;
    height: fit-content;
    place-content: start;
    align-items: start;
    display: flex;
    flex-direction: column;
    padding: 0rem 0rem 3rem 0rem;
}

.top-part-sec2-web h1{
    color: black;
}
.top-part-sec2-web h4{
    color: gray;
}
.center-part-sec2-web{
    width: 100%;
    height: fit-content;
    background-color: transparent;
    padding: 0rem 0rem 3rem 0rem;
}
.table-sec2-web{
    width: 100%;
    height: 100%;
    gap: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
}
.row-top-sec2-web{
    width: 100%;
    height: 50%;
    display: flex;
    place-content: center;
    background-color: transparent;
    gap: 1rem;
}
.row-bottom-sec2-web{
    width: 100%;
    height: 50%;
    display: flex;
    place-content: center;
    background-color: transparent;
    gap: 1rem;
}
.bottom-part-sec2-web{
    width: 100%;
    height: fit-content;
    padding: 0rem 0rem 3rem 0rem;
}
.left-box-row-top{
    width: 45%;
    height: auto;
    background-color: black;
    border: none;
    border-radius: 10px;
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}
.right-box-row-top{
    width: 65%;
    height: auto;
    background-color: black;
    border: none;
    border-radius: 10px;
    position: relative;
    /*aspect-ratio: 2/1;*/
    overflow: hidden;
}
.left-box-row-bottom{
    width: 65%;
    height: auto;
    background-color: black;
    border: none;
    border-radius: 10px;
    position: relative;
    /* aspect-ratio: 2/1; */
    overflow: hidden;
}
.right-box-row-bottom{
    width: 45%;
    height: auto;
    background-color: black;
    border: none;
    border-radius: 10px;
    position: relative;
    aspect-ratio: 1/1;
    overflow: hidden;
}



.pattern-for-square-boxes-sec2{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(45.21% at 49.88% 49.86%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 68%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 78%);
    padding: 0%;
    position: absolute;
    z-index: 2;
    opacity: 0.7;
    pointer-events: none; /* allow hover to pass through */

}
.pattern-for-rectangle-boxes-sec2{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
    clip-path: circle(61.34% at 49.88% 49.86%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 68%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 100%);
    padding: 0%;
    position: absolute;
    opacity: 0.7;
    z-index: 2;
}
.left-box-row-top video, .right-box-row-top img, .left-box-row-bottom img, .right-box-row-bottom img{
    width: 100%;
    height: auto;
    /*max-height: 100%;*/
    display: flex;
    z-index: 1;
}
.left-box-row-top img{
    transition: transform 0.5s ease;
}
.left-box-row-top:hover .left-box-row-top img{
  transform: scale(1.05);}


.box-details-container-sec2{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to top, transparent 19%, black 40%);
    mask-image: linear-gradient(to top, transparent 19%, black 40%);
}
.box-details-container-sec2 video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}
.text-for-left-box-row-top{
    width: 100%;
    height: 100%;
    display: flex;
    place-content: start;
    align-items: end;
    position: absolute;
      padding: 1.5rem 1.5rem 1.5rem 1.5rem;
}
.text-for-left-box-row-top h4, .text-for-left-box-row-top span{
    width: 100%;
    height: fit-content;
    color: gray;
}


.bottom-part-details-container-sec2-web{
    width: 100%;
    height: 100%;
    display: grid;
    background-color: transparent;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
}

.card-one-inside-bottom-part-sec2-web{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    text-align: center;
    align-items: center;
    place-content: start;
}
.card-one-inside-bottom-part-sec2-web img{
    width: 4rem;
    height: auto;
}
.card-one-inside-bottom-part-sec2-web h2{
    color: #444;
  font-weight: 600;
}
.card-one-inside-bottom-part-sec2-web h4{
    color: #868686;
  font-weight: 300;
}

@media screen and (orientation: portrait) and (min-width: 1201px){
}
@media screen and (orientation: portrait) and (max-width: 1200px){
}
@media screen and (orientation: portrait) and (max-width: 992px){
    .text-for-left-box-row-top{
    padding: 1rem 1rem 1rem 1rem;
    line-height: 1.2rem;
  }
  .row-top-sec2-web, .row-bottom-sec2-web{
    flex-direction: column;
  }
  .left-box-row-top, .right-box-row-top, .left-box-row-bottom, .right-box-row-bottom{
    width: 100%;
  }
  .bottom-part-details-container-sec2-web{
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: auto;
  }
  .card-one-inside-bottom-part-sec2-web{
    text-align: left;
    align-items: start;
  }
}
@media screen and (orientation: portrait) and (max-width: 768px){
    .web-sec2{
    padding: 10% 5% 10% 5%;
  }
  .row-top-sec2-web, .row-bottom-sec2-web{
    flex-direction: column;
  }
  .right-box-row-bottom, .left-box-row-bottom, .left-box-row-top, .right-box-row-top{
    width: fit-content;
  }
  .row-bottom-sec2-web, .row-top-sec2-web{
    width: 100%;
  }
  .bottom-part-sec2-web{
    width: 100%;
    height: fit-content;
    padding: 0rem 0rem 3rem 0rem;
  }
  .bottom-part-details-container-sec2-web{
    width: 100%;
    height: 100%;
    display: grid;
    background-color: transparent;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(2,1fr);
  }
  .card-one-inside-bottom-part-sec2-web{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 0rem 0rem 0rem;
    align-items: start;
    place-content: start;
    text-align: left;
  }
  .card-one-inside-bottom-part-sec2-web img{
    width: 3.5rem;
  }
  .text-for-left-box-row-top{
    padding: 1rem 1rem 1rem 1rem;
    line-height: 0.9rem;
  }
}




@media screen and (orientation: portrait) and (max-width: 600px){
  .web-sec2{
    padding: 10% 5% 10% 5%;
  }
  .row-top-sec2-web, .row-bottom-sec2-web{
    flex-direction: column;
  }
  .right-box-row-bottom, .left-box-row-bottom, .left-box-row-top, .right-box-row-top{
    width: fit-content;
  }
  .row-bottom-sec2-web, .row-top-sec2-web{
    width: 100%;
  }
  .bottom-part-sec2-web{
    width: 100%;
    height: fit-content;
    padding: 0rem 0rem 3rem 0rem;
  }
  .bottom-part-details-container-sec2-web{
    width: 100%;
    height: 100%;
    display: grid;
    background-color: transparent;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(2,1fr);
  }
  .card-one-inside-bottom-part-sec2-web{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0rem 0rem 0rem;
    align-items: start;
    place-content: start;
    text-align: left;
  }
  .card-one-inside-bottom-part-sec2-web img{
    width: 2.8rem;
  }
  .text-for-left-box-row-top{
    padding: 1rem 0.6rem 1rem 0.6rem;
    line-height: 0.9rem;
  }
}





@media screen and (orientation: portrait) and (max-width: 450px){
  .web-sec2{
    padding: 10% 5% 10% 5%;
  }
  .row-top-sec2-web, .row-bottom-sec2-web{
    flex-direction: column;
  }
  .right-box-row-bottom, .left-box-row-bottom, .left-box-row-top, .right-box-row-top{
    width: fit-content;
  }
  .row-bottom-sec2-web, .row-top-sec2-web{
    width: 100%;
  }
  .bottom-part-sec2-web{
    width: 100%;
    height: fit-content;
    padding: 0rem 0rem 3rem 0rem;
  }
  .bottom-part-details-container-sec2-web{
    width: 100%;
    height: 100%;
    display: grid;
    background-color: transparent;
    grid-template-columns: repeat(1,1fr);
    grid-template-rows: repeat(2,1fr);
  }
  .card-one-inside-bottom-part-sec2-web{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0rem 0rem 0rem;
    align-items: start;
    place-content: start;
    text-align: left;
  }
  .text-for-left-box-row-top{
    padding: 1rem 0.6rem 0.4rem 0.6rem;
    line-height: 0.9rem;
  }
  .card-one-inside-bottom-part-sec2-web img{
    width: 2.5rem;
  }

}



@media screen and (orientation: landscape) and (min-width: 1201px){
      .text-for-left-box-row-top{
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
    .card-one-inside-bottom-part-sec2-web img{
    width: 4rem; 
  }
}
@media screen and (orientation: landscape) and (max-width: 1200px){
    .text-for-left-box-row-top{
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }
    .card-one-inside-bottom-part-sec2-web img{
    width: 4rem; 
  }
}
@media screen and (orientation: landscape) and (max-width: 992px){
  .text-for-left-box-row-top{
  padding: 1.5rem 1rem 1rem 1rem;
  }
  .card-one-inside-bottom-part-sec2-web img{
    width: 3rem; 
  }
}
@media screen and (orientation: landscape) and (max-width: 768px){
  .text-for-left-box-row-top{
  padding: 1.5rem 0.7rem 0.7rem 0.7rem;
  }
  .card-one-inside-bottom-part-sec2-web img{
    width: 2.5rem; 
  }
}















































/*                                Section 3                                    */

.cover-section3-web{
    width: 100%;
    height: 100%; /*fit-content-in-later*/
    max-width: inherit;
    display: flex;
    place-content: center;
    background: #050312;
    position: relative;
    z-index: 12;
    overflow: hidden;
}

.web-sec3 {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1300px;
    display: flex;
    scroll-behavior: smooth; /* Optional, for smooth behavior */
    justify-content: start;
    align-items: start;
    color: white;
    transition: background-color 0.5s;
    padding: 5% 5% 5% 5%;
}

.layer-div {

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

.layer1 {
    background: transparent; /* Red translucent layer */
    z-index: 1;
    padding: 0%;
    position: absolute;
}

.layer2 {
    background: transparent; /* Green translucent layer */
    z-index: 2;
    display: flex;
    gap: 4rem;
    flex-direction: column;
    position: relative;
}




.text-sec3-web{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    place-content: center;
    align-items: center;

}
.text-sec3-web h1{
    font-size: 2.5rem;
    text-align: center;
    place-content: center;
    width: 70%;
    height: fit-content;
    font-weight: 600;
}
.text-sec3-web p{
    text-align: center;
    place-content: center;
    width: 50%;
    height: fit-content;
    font-weight: 300;
    color: #d7d4ff80;
}
.buttons-sec3-web-container{
    width: 50%;
    place-content: center;
    align-content: center;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 0.5rem; 
    padding-top: 1.5rem;
}
.buttons-sec3-web-container button{
    font-family: Poppins ,sans-serif;
    padding: 0.3rem 1.5rem;
    border: none;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    z-index: 15;
    cursor: pointer;
}
.button-left-sec3-web{
    background-color: #965fef;
    transition: background-color 0.3s ease;
    opacity: 1;
}
.button-left-sec3-web:hover{
    background-color: #b485ff;
}
.button-right-sec3-web{
    background-color: #1c1b32;
    transition: background-color 0.3s ease;
    
}
.button-right-sec3-web:hover{
    background-color: #424069;
}
.button-left-sec3-web h3 , .button-right-sec3-web h3 {
  font-weight: 400;
  font-family: Poppins ,sans-serif;
}






@keyframes scroll-smooth {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Adjust as needed for seamless effect */
}

.web-portfolio-sec3-web{
  width: 100%;
  height: fit-content;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;

-webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: center;
}


.text-after-slideshow-container{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.text-after-slideshow-container h1{
    font-size: 1.8rem;
    text-align: center;
    place-content: center;
    width: 70%;
    height: fit-content;
    font-weight: 600;
}
.text-after-slideshow-container p{
    text-align: center;
    place-content: center;
    width: 50%;
    height: fit-content;
    font-weight: 300;
    color: #d7d4ff80;
}
.text-after-slideshow-container h5{
    font-weight: 300;
    color: #d7d4ff80;
}
.h5-container-sec3-text-after-slidshow{
    width: 50%;
    height: fit-content;
    place-content: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.before-h5-in-sec3-text-after-slideshow{
    width: 3rem;
    height: 1px;
    background-image: linear-gradient(90deg, transparent, #d7d4ff3a);
}
.after-h5-in-sec3-text-after-slideshow{
    width: 3rem;
    height: 1px;
    background-image: linear-gradient(90deg, #d7d4ff3a, transparent);
}



.webdes-carousel-container {
      width: 100%;
      max-width: 1200px;
      overflow: hidden;
      border-radius: 10px;
      padding: 1rem;
      background: transparent;
    }

    .webdes-carousel-track {
      display: flex;
      gap: 1rem;
      will-change: transform;
      transform: translateZ(0);
    }

    .webdes-card {
      position: relative;
      flex: 0 0 17rem;
      height: 27rem;
      border-radius: 10px;
      overflow: hidden;
      cursor: default;
      transition: backdrop-filter 0.3s ease, scale 0.3s ease, border 0.3s ease;
      isolation: isolate; /* helps backdrop-filter work cleanly */
    }

        /* Button on Left */
    .buttons-container{
      position: absolute;
      left: -50%;
      transition: left 0.3s ease;
      display: flex;
      flex-direction: column;
      width: fit-content;
      max-width: 25%;
      place-content: end;
      flex-wrap: wrap;
      height: 100%;
      gap: 0.5rem;
    }

    .webdes-card:hover .buttons-container{
      left: 10px;
    }


    .webdes-card:hover{
      scale: 1.05;
      border: 1px solid white;
    }
    
    .webdes-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top;
      transition: transform 0.4s ease;
    }

    .webdes-card:hover img {
      transform: scale(1.1);
    }
    .overlay-on-webdes-card{
      width: 100%;
      height: 100%;
      background: linear-gradient(to top, black 0%, transparent 40%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      position: absolute;
      overflow: hidden;
      border-radius: 10px;
      z-index: 2;
    }


    .webdes-card:hover .overlay-on-webdes-card{
      opacity: 1;
    }


    /* Button on Left */
    .webdes-slide-btn {
      position: relative;
      width: fit-content;
      align-items: center;
      display: flex;
      bottom: 10px;
      padding: 0.5rem;
      background: rgb(255, 255, 255);
      border: none;
      cursor: pointer;
      border-radius: 0.5rem;
      transition: left 0.4s ease, background 0.3s ease;
      z-index: 3;
    }
    .webdes-slide-btn:hover{
      background: rgb(211, 211, 211);
    }
    .webdes-slide-btn img{
      width: 1rem;
      height: 1rem;
    }
    /* Text on Bottom Right */
    .webdes-slide-text {
      position: absolute;
      bottom: -40px;
      right: 10px;
      text-align: center;
      width: fit-content;
      max-width: 60%;
      color: #fff;
      background: rgba(0,0,0,0.6);
      padding: 0.4rem 0.8rem;
      border-radius: 0.5rem;
      font-size: 0.8rem;
      transition: bottom 0.4s ease;
      z-index: 3;
    }
    
    .webdes-card:hover .webdes-slide-text {
      bottom: 10px;
    }
    .buttons-full-preview-container{
      position: absolute;
      width: fit-content;
      max-width: 30%;
      bottom: 10px;
      left: -50%;
      scale: 0.3;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      transition: left 0.3s ease, scale 0.3s ease;
    }
    
    .webdes-card:hover .buttons-full-preview-container{
      left: 10px;
      scale: 1;
    }

    .webdes-carousel-track {
  will-change: transform;
  transform: translateZ(0);
}



.top-part-l1-sec3-web{
    width: 100%;
    height: 40%;
    display: flex;
    position: relative;
    place-content: center;
    align-items: start;
}
.circle-glow-l1 {
    width: 6rem;
    height: 20rem;
    border-radius: 50%;
    background-color: #aa75ff4a;
    transform-origin: center top;
    position: absolute;
    rotate: 0deg;
    filter: blur(65px);
    top: -35%;
    mix-blend-mode: screen;
    box-shadow: 0px 0px 1px 39px #bb90ff24;
}
.img-rotation-l1{
width: 100%;
  height: 100%;
  top: 0;
  place-content: center;
  display: flex;
}
.img-rotation-l1 img{
width: auto;
  height: 100%;
  transform-origin: center;
  rotate: 0deg;
  aspect-ratio: 1/1;
  mix-blend-mode: overlay;
  top: -50%;
  position: relative;
  opacity: 0.3;
}









  /* Default size */
  .card-sec3-web {
    width: 30rem;
    height: 17rem;
  }


body.disable-scroll {
  overflow: hidden;
}


  .center-part-l1-sec3-web{
width: 100%;
  height: 40%;
  display: flex;
  place-content: center;
  position: relative;

  }
  .horizontal-circle-l1{
width: 25%;
  height: 25%;
  background-color: #262a60;
  border-radius: 50%;
  filter: blur(40px);
  rotate: 34deg;
  position: absolute;
align-self: end;
    transform-origin: center center; /* The center is the axis of rotation */
  animation: turn-off-on-center-circles-sec3-web1 5s infinite linear; /* Applying animation */
  }
  .vertical-circle-l1{
width: 5%;
  height: 25%;
  background-color: #4f5693;
  border-radius: 50%;
  filter: blur(22px);
  rotate: 0deg;
  top: -10%;
  align-self: end;
  position: relative;
      transform-origin: center center; /* The center is the axis of rotation */
  animation: turn-off-on-center-circles-sec3-web2 5s infinite linear; /* Applying animation */
  }

  @keyframes turn-off-on-center-circles-sec3-web1{
    0%{
        scale: 1;
        opacity: 1;
        filter: blur(40px);
    }
    50%{
        scale: 0.75;
        opacity: 0.75;
        filter: blur(20px);
    }
    100%{
        scale: 1;
        opacity: 1;
        filter: blur(40px);
    }
  }

  @keyframes turn-off-on-center-circles-sec3-web2{
    0%{
        scale: 1;
        opacity: 0.7;
    }
    50%{
        scale: 0.75;
        opacity: 0.45;
    }
    100%{
        scale: 1;
        opacity: 0.7;
    }
  }


    .lees-preview-image-container{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .coming-soon-preview-image-container{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.fullscreen-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(10px); 
}

.fullscreen-modal img {
  max-width: 90%;
  max-height: 90%;
}

.close-fullscreen {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  color: white;
  cursor: pointer;
  z-index: 10000;
}
#fullscreen-modal {
  touch-action: none;
  user-select: none;
}












/* Flip structure */
.webdes-card {
  perspective: 1000px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Front keeps your original look */
.card-front {
  background: #111;
}

/* Back side */
.card-back {
  background: #5156b0;
  color: white;
  padding: 1rem;
  transform: rotateY(180deg);
  font-size: 0.9rem;
  text-align: center;
}

/* When flipped */
.flipped .card-inner {
  transform: rotateY(180deg);
}






.buttons-sec3-web-container button.active {
  background: #965fef !important;
  color: white;
}
.buttons-sec3-web-container button {
  background: #1c1b32 !important;
  color: white;
}



.webdes-card.flipped:hover .webdes-slide-text,
.webdes-card.flipped:hover .buttons-container {
  display: none !important;
}

  /* Responsive */
  
  @media (orientation: portrait) and (min-width: 1201px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 33rem;
      height: 18rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 2.1rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.5rem 1.95rem; 
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: fit-content !important;
      text-align: center;
    }

  }









  @media (orientation: portrait) and (max-width: 1200px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 33rem;
      height: 18rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 2.1rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.5rem 1.95rem; 
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: fit-content !important;
      text-align: center;
    }

}








  @media (orientation: portrait) and (max-width: 992px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 30rem;
      height: 16rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 1.9rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.45rem 1.85rem; 
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: fit-content !important;
      text-align: center;
    }

  }








  @media (orientation: portrait) and (max-width: 768px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 27rem;
      height: 15rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 1.6rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.4rem 1.7rem; 
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: fit-content !important;
      text-align: center;
    }


  }










    @media (orientation: portrait) and (max-width: 600px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 24rem;
      height: 14rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 1.3rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.3rem 1.4rem; 
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: fit-content !important;
      text-align: center;
    }


  }





  @media (orientation: portrait) and (max-width: 450px) {
    .web-sec3{
      padding: 10% 5% 10% 5%;
    }
    .card-sec3-web { 
      width: 18.5rem;
      height: 13rem;
      font-size: 1rem; 
    }
    .text-sec3-web{
      gap: 0.8rem;
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 1rem;
      width: 100%;
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 90%;
    }
    .buttons-sec3-web-container{
      width: 80%;
    }
    .buttons-sec3-web-container button{
      padding: 0.2rem 1rem;
    }
    .h5-container-sec3-text-after-slidshow h5{
      width: 100% !important;
      text-align: center;
    }

  }










  @media (orientation: landscape) and (min-width: 1201px) {
    .card-sec3-web { 
        width: 36rem;
        height: 18rem;
        font-size: 1.25rem; 
    }

    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 2.5rem;
      width: 100%;
    }
        .layer2{
      gap: 4rem;
    }
            .text-sec3-web p, .text-after-slideshow-container p{
      width: 50%;
    }

  }
  @media (orientation: landscape) and (max-width: 1200px) {
  .card-sec3-web {
        width: 25rem;
        height: 17rem;
        font-size: 1.2rem;
  }

      .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 2.5rem;
      width: 100%;
    }
    .layer2{
      gap: 4rem;
    }
            .text-sec3-web p, .text-after-slideshow-container p{
      width: 50%;
    }

}
  @media (orientation: landscape) and (max-width: 992px) {
    .card-sec3-web { 
        width: 20rem;
        height: 14rem;
        font-size: 1.1rem; 
    }
    .text-sec3-web h1, .text-after-slideshow-container h1{
      font-size: 1.5rem;
      width: 100%;
    }
    .layer2{
      gap: 2rem;
    }
        .text-sec3-web p, .text-after-slideshow-container p{
      width: 50%;
    }

  }

  @media (orientation: landscape) and (max-width: 768px) {
    .card-sec3-web { 
        width: 17rem;
        height: 11rem;
        font-size: 0.9rem; 
    }
    .text-sec3-web p, .text-after-slideshow-container p{
      width: 70%;
    }

  }









































  
/*                                Section 4                                    */

.cover-section4-web{
    width: 100%;
    height: 100%;
    max-width: inherit;
    display: flex;
    place-content: center;
    background: transparent;
    position: relative;
    z-index: 11;
    background: #020202;
    overflow: hidden;
}

.web-sec4 {
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    max-width: 1300px;
    display: flex;
    scroll-behavior: smooth; /* Optional, for smooth behavior */
    justify-content: start;
    align-items: start;
    color: white;
    transition: background-color 0.5s;
    padding: 5% 5% 5% 5%;
}
.layer-div-sec4 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.layer1-sec4 {
    background: #0a0a14;
    z-index: 1;
    position: absolute;
}

.layer2-sec4 {
    background: #020202;
    z-index: 2;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
}

.content-in-sec4-web-container{
    width: 100%;
    height: 100%;
    padding: 0% 5% 5% 5%;
    display: flex;
    flex-direction: column;
    place-self: center;
    position: relative;
    user-select: text;
    z-index: 3;
}
.content-in-sec4-web-container h1{
    font-size: 2.5rem;
    text-align: center;
    place-content: center;
    width: 70%;
    height: fit-content;
    font-weight: 600;
    display: flex;
    align-self: center;
    z-index: 6;
}

.content-in-sec4-web-container p{
    text-align: center;
    place-content: center;
    width: 50%;
    height: fit-content;
    font-weight: 300;
    color: #d7d4ff80;
    display: flex;
    align-self: center;
    z-index: 6;
    
}
.content-in-sec4-web-container h1 span{
    background: linear-gradient(90deg, #8e94b0, #846db9);
    background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.pattern-glow-container-sec4-web{
    width: 100%;
    height: 20%;
    background-color: #0a0a14;
    z-index: 1;
    position: absolute;
    overflow: hidden;
}
.back-pattern-sec4-web{
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    place-content: center;
}
.back-pattern-top{
    width: 100%;
    height: 100%;
    place-content: center;
    display: flex;
}

.circle-1-for-glow-pattern-sec4-web{
    width: 20%;
    height: 100%;
    place-self: start;
    filter: blur(20px);
    background-color: #392aff;
    border-radius: 50%;
    transform: translate(-300%, 0%);
    animation: moveGlowUnderPatternSection4 6s linear infinite;
}
@keyframes moveGlowUnderPatternSection4{
    0%{
        transform: translate(-300%, 0%);
    }
    20%{
        background-color: #544475 ;
    }
    40%{
        background-color: #938bff;
    }
    60%{
        background-color: #544475 ;
    }
    80%{
        transform: translate(+300%, 0%);
    }
    80.01%{
        transform: translate(-300%, 0%);
    }
    100%{
        transform: translate(-300%, 0%);
    }
}
.pattern-sec4-web{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(/images/pattern-sec4-web.png);
    background-repeat: repeat;
    background-position: center;
    background-size: 50%;
    background-color: transparent;
    overflow: hidden; /* ensure pseudo-element doesn't overflow */
}
.pattern-sec4-web::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient( to bottom, rgb(2, 2, 2) 5%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, rgb(2, 2, 2) 100% );
    pointer-events: none; /* allow clicks through the overlay */


    }

  .circle-l3-sec4 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -90%);
    width: 70rem;
    height: 40rem;
    border-radius: 50%;
    background-image: linear-gradient(1441deg, #544475 0%,transparent 25%);
    pointer-events: none;
    z-index: 2;
    filter: blur(70px);
  }















.normal-card-1-sec4-web-container{
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 1.05rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 2;
}
.normal-card-1-sec4-web-glow{
    width: 50%;
    height: 91.1%;
    background: linear-gradient(90deg, transparent, #4a3c66 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    overflow: hidden;
    place-self: center;
    justify-self: center;
    display: flex;
    filter: blur(5px);
    align-self: center;
    z-index: 3;
    animation: normalCardGlow 5s linear infinite;
    pointer-events: none;
}
@keyframes normalCardGlow{
  0%{
    opacity: 1;
    filter: blur(8px);
  }
  50%{
    opacity: 0.2;
    filter: blur(5px);
  }
  100%{
    opacity: 1;
    filter: blur(8px);
  }
}
.normal-card-1-sec4-web-glow2{
    pointer-events: none;
    width: 70%;
    height: 92.1%;
    background: linear-gradient(90deg, transparent, #4a3c66 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    place-self: center;
    justify-self: center;
    overflow: hidden;
    display: flex;
    align-self: center;
    z-index: 4;
    animation: normalCardLine 5s linear infinite;
}
@keyframes normalCardLine{
  0%{
    width: 70%;
    opacity: 1;
  }
  50%{
    width: 50%;
    opacity: 0.5;
  }
  100%{
    width: 70%;
    opacity: 1;
  }
}
.normal-card-1-contents-container{
    width: 100%;
    height: 100%;
    background: rgb(2, 3, 7);
    background-size: auto;
    background-size: 60%;
    border-radius: 10px;
    position: relative;
    z-index: 5;

}
.normal-card-1-real-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 6;
    border-radius: 10px;
    overflow: hidden;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.1)' />\</svg>"), radial-gradient(circle at center, #c8a3ff4f -150%,black 100%);
    clip-path: circle(71.64% at 50% 50%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 4%, rgba(0,0,0,0) 158%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) -44%, rgba(0,0,0,0) 158%);
    position: absolute;
}
.normal-card-2-real-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 6;
    border-radius: 10px;
    overflow: hidden;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.1)' />\</svg>"), radial-gradient(circle at center, #f4f4f454 -150%,black 100%);
    clip-path: circle(71.64% at 50% 50%);
    object-fit: cover;
    -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 4%, rgba(0,0,0,0) 158%);
    mask-image: radial-gradient(circle, rgb(0, 0, 0) -44%, rgba(0,0,0,0) 158%);
    position: absolute;
}
.normal-card-1{
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 7;
    position: relative;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    place-content: space-between;
}
.normal-card-1 ul{
    list-style-type: none;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}
.normal-card-1 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
}
.normal-card-2{
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 7;
    position: relative;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    place-content: space-between;
}
.normal-card-2 ul{
        list-style-type: none;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}
.normal-card-2 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
}
.normal-card-1 button{
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    align-items: center;
    place-content: center;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #c8a3ff, #6e5199);
}
.normal-card-2 button{
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    align-items: center;
    place-content: center;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #dfdfdf, #8e8e8e);
}
#super1Button, #super2Button, #super3Button{
      display: flex;
    align-items: center;
    place-content: center;
}

.normal-card-1 button p{
  color: #08080c;
  font-weight: 500;
  transition: color 0.3s ease;
}

.normal-card-1-icon{
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
}
.normal-card-1-icon img{
  width: auto;
  height: 80%;
}
.normal-card-1 h2{
  color: #cfb0fd;
}


.normal-card-2-icon{
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;

}
.normal-card-2-icon img{
  width: auto;
  height: 80%;
}
.normal-card-2 h2{
  color: #a3a3a3;
}
.normal-card-2 button p{
  color: #08080c;
  font-weight: 500;
  transition: color 0.3s ease;
}
.normal-card-2-sec4-web-glow{
    width: 50%;
    height: 91.1%;
    background: linear-gradient(90deg, transparent, #919191 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    overflow: hidden;
    place-self: center;
    justify-self: center;
    display: flex;
    filter: blur(5px);
    align-self: center;
    z-index: 3;
    animation: normalCardGlow2 5s linear infinite;
    pointer-events: none;
}
@keyframes normalCardGlow2{
  0%{
    opacity: 1;
    filter: blur(8px);
  }
  50%{
    opacity: 0.2;
    filter: blur(5px);
  }
  100%{
    opacity: 1;
    filter: blur(8px);
  }
}
.normal-card-2-sec4-web-glow2{
    pointer-events: none;
    width: 70%;
    height: 92.1%;
    background: linear-gradient(90deg, transparent, #919191 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    place-self: center;
    justify-self: center;
    overflow: hidden;
    display: flex;
    align-self: center;
    z-index: 4;
    animation: normalCardLine2 5s linear infinite;
}
@keyframes normalCardLine2{
  0%{
    width: 70%;
    opacity: 1;
  }
  50%{
    width: 50%;
    opacity: 0.5;
  }
  100%{
    width: 70%;
    opacity: 1;
  }
}

.normal-card-3-real-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  z-index: 6;
  border-radius: 10px;
  overflow: hidden;
  background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.1)' />\</svg>"), radial-gradient(circle at center, #75ffe54f -150%,black 100%);
  clip-path: circle(71.64% at 50% 50%);
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, rgb(0, 0, 0) 4%, rgba(0,0,0,0) 158%);
  mask-image: radial-gradient(circle, rgb(0, 0, 0) -44%, rgba(0,0,0,0) 158%);
  position: absolute;
}
.normal-card-3-icon{
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
}
.normal-card-3-icon img{
  width: auto;
  height: 80%;
}
.normal-card-3 h2{
  color: #a3fff0;
}
.normal-card-3-sec4-web-glow{
    width: 50%;
    height: 91.1%;
    background: linear-gradient(90deg, transparent, #b5fff3 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    overflow: hidden;
    place-self: center;
    justify-self: center;
    display: flex;
    filter: blur(5px);
    align-self: center;
    z-index: 3;
    animation: normalCardGlow3 5s linear infinite;
    pointer-events: none;
}
@keyframes normalCardGlow3{
  0%{
    opacity: 1;
    filter: blur(8px);
  }
  50%{
    opacity: 0.2;
    filter: blur(5px);
  }
  100%{
    opacity: 1;
    filter: blur(8px);
  }
}
.normal-card-3-sec4-web-glow2{
    pointer-events: none;
    width: 70%;
    height: 92.1%;
    background: linear-gradient(90deg, transparent, #b5fff3 , transparent);
    padding: 0.05rem;
    border-radius: 10px;
    position: absolute;
    place-self: center;
    justify-self: center;
    overflow: hidden;
    display: flex;
    align-self: center;
    z-index: 4;
    animation: normalCardLine3 5s linear infinite;
}
@keyframes normalCardLine3{
  0%{
    width: 70%;
    opacity: 1;
  }
  50%{
    width: 50%;
    opacity: 0.5;
  }
  100%{
    width: 70%;
    opacity: 1;
  }
}
.normal-card-3 button{
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    align-items: center;
    place-content: center;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #dfdfdf, #bafff6);
}
.normal-card-3 button p{
  color: #065046;
  font-weight: 500;
  transition: color 0.3s ease;
}
.normal-card-3{
    width: 100%;
    height: 100%;
    background-color: transparent;
    z-index: 7;
    position: relative;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    place-content: space-between;
}
.normal-card-3 ul{
        list-style-type: none;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}
.normal-card-3 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
}



















  
.cards-gapper{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: start;
  gap: 2rem;
}
.card-text-pattern-all-container-sec4-web{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  place-content: center;
}
.price-cards-container-sec4-web{
    width: 90%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: repeat(2,1fr);
    place-self: center;
    align-items: center;
    background-color: transparent;
    column-gap: 1rem;
    row-gap: 3rem;
    z-index: 2;
}
.price-cards-container-sec4-web h1, .price-cards-container-sec4-web h5{
  place-content: center;
  align-items: center;
  display: flex;
}
.price-cards-border-sec4-web-super1{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 9px;
    overflow: hidden;
    padding: 0.5rem;
}
.glow-around-price-card-super1{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg,  transparent 0%, transparent 15%, transparent 85%, rgb(0, 174, 255) 90%,rgb(184, 233, 255) 95%,rgb(0, 174, 255) 100%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0.065rem;
}   

.main-price-card-sec4-web-super1{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 0.5rem;
    place-content: center;
    align-items: center;
    display: flex;
    
}

.behind-price-cards-border-sec4-web-super1{
    width: 100%;
    height: 100%;
    background-color: #020202;
    overflow: visible;
    padding: 0.4rem;
    position: absolute;
    border-radius: 10px;
    
}
.behind-price-cards-border-sec4-web-super1::before {
content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0px 0px 10px 7px #020202, inset 0px 0px 6px 0px #020202;
  z-index: 0;
  border-radius: 13px;
  width: 100%;
  height: 100%;
background-image: linear-gradient(var(--dynamic-gradient-angle, 25deg), #020202 0%, #020202 15%, #020202 85%, transparent 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'><circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.7)' /></svg>");
  transform: translate(var(--glow-translate-x, 0%), var(--glow-translate-y, 0%));
      outline: 2px solid #020202;
}

.behind-glow-around-price-card-super1{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #0472ff 100%);
    border-radius: 10px;
    overflow: visible;
    position: relative;
    padding: 0.1rem;
    filter: blur(4px);
    opacity: 0.7;
}

.each-card-container-sec4-web-super1{
width: 100%;
  height: 100%;
  position: relative;
  background: #020202;
  border: 1px solid #020202;
}
.price-card-details-container-super1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-image: radial-gradient(circle at top left, black, black), radial-gradient(circle at top right, black, black), radial-gradient(circle at bottom left, black, black), radial-gradient(circle at bottom right, black, black), radial-gradient(circle at center, black , black);
    overflow: hidden;
    outline: 1px solid #020202;
}
.price-card-details-super1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
   padding: 0%;
    opacity: 1;
    z-index: 1;
}
.price-card-gradient-around-super1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(41deg, #070a13 -40%, #040404 100%);    
    opacity: 1;
    z-index: 2;
      position: relative; /* Required for absolute positioning inside */
  overflow: hidden;    /* Keep shine inside */

}

.card-texts-price-super1{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    overflow: hidden;
    place-content: space-between;
}
.card-texts-price-super1 ul{
    list-style-type: none;
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}
.card-texts-price-super1 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
    text-align: left;
}
.card-texts-price-super1 h2{
  color: #5892ff;
}
.card-texts-price-super1 h1{
  color: #bed5ff;
}
/* Patterned shine beam */
.price-card-gradient-around-super1::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(45deg, transparent 39%, rgba(195, 231, 255, 0.123) 55%, transparent 61%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2.5' cy='2.5' r='.6' fill='white' /></svg>");
  background-repeat: repeat;
  background-size: auto;
  -webkit-mask-image: linear-gradient(45deg, transparent 39%,black 55%, transparent 61%);
  mask-image: linear-gradient(45deg, transparent 39%, black 55%, transparent 61%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  animation: patternShine 10s infinite;
  transform: rotate(0deg);
  opacity: 0.4;
  pointer-events: none;
}

/* Animate diagonally */
@keyframes patternShine {
  0% {
    transform: translate(100%, -100%);
  }
  50% {
    transform: translate(-100%, 100%);
  }
  100% {
    transform: translate(-100%, 100%);
  }
}


 .card-texts-price-super1 button {
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #1fd1f9, #a12dff);
    color: white;
    z-index: 1;
    font-weight: 500;
    transition: none; /* remove built-in transition */
  }


.card-icon-sec4-super1 {
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Common mask SVG */
:root {
  --svg-mask: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">\<path fill="white" d="M211.1 422.3c-24.3-31.8-68-89.1-97.2-127.3-29.2-38.2-61.8-81.1-72.5-95.2l-19.4-25.7 0-32.3 0-32.3 37.8-37.8 37.9-37.9 30.4 0.4c29.2 0.3 30.6 0.4 34.6 2.5 6.5 3.5 9.6 8.4 10.1 15.8 0.6 9.1-2.6 14.7-10.8 19.1-3 1.6-6.4 1.9-24.3 2.2l-20.7 0.4-28.5 27-28.5 27 0 17.4 0 17.4 97.7 128c53.7 70.4 97.9 128 98.3 128 0.4 0 44.6-57.6 98.3-128l97.7-128 0-17.4 0-17.4-28.6-27.1-28.5-27-88.7-0.3c-84.4-0.3-88.9-0.4-92.2-2.2-8.2-4.4-11.4-10-10.8-19.1 0.5-7.4 3.6-12.3 10.1-15.8l4.2-2.2 98.5-0.3 98.4-0.3 37.8 37.8 37.8 37.8 0 32.3 0 32.3-19.4 25.7c-10.7 14.1-43.3 57-72.5 95.2-29.2 38.2-72.9 95.5-97.2 127.3-24.3 31.7-44.5 57.7-44.9 57.7-0.4 0-20.6-26-44.9-57.7z"/>\</svg>');
}


/* Background with mask */
.icon-mask-super1 {
  width: 100%;
  height: 100%;
  background: linear-gradient(-22deg, #004cff 40%, transparent 39%);
  mask-image: var(--svg-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background 0.3s linear;
}

/* Glowing overlay using same mask */
.icon-glow-super1 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00aaff;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 0px #00aaff);
  mask-image: var(--svg-mask);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: opacity 1s, filter 1s;
}

.dropmenu-icons{
width: 1.3rem;
  height: 100%;
  display: flex;
  position: relative;
}







































.price-cards-border-sec4-web-super2{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 9px;
    overflow: hidden;
    padding: 0.5rem;
}
.glow-around-price-card-super2{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg,  transparent 0%, transparent 15%, transparent 85%, rgb(0, 174, 255) 90%,rgb(184, 233, 255) 95%,rgb(0, 174, 255) 100%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0.055rem;
}   

.main-price-card-sec4-web-super2{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 0.5rem;
    place-content: center;
    align-items: center;
    display: flex;
    
}

.behind-price-cards-border-sec4-web-super2{
    width: 100%;
    height: 100%;
    background-color: #020202;
    overflow: visible;
    padding: 0.4rem;
    position: absolute;
    border-radius: 10px;
    
}
.behind-price-cards-border-sec4-web-super2::before {
content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0px 0px 10px 7px #020202, inset 0px 0px 6px 0px #020202;
  z-index: 0;
  border-radius: 13px;
  width: 103%;
  height: 102%;
  background-image: linear-gradient(var(--dynamic-gradient-angle, 25deg), transparent 0%, #020202 15%, #020202 85%, transparent 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'><circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.7)' /></svg>");
  transform: translate(-1.4%, -1.4%);
  outline: 2px solid #020202;
  transform-origin: center;
}

.behind-glow-around-price-card-super2{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #0472ff 100%);
    border-radius: 10px;
    overflow: visible;
    position: relative;
    padding: 0.1rem;
    filter: blur(4px);
    opacity: 0.7;
}

.each-card-container-sec4-web-super2{
width: 100%;
  height: 100%;
  position: relative;
  background: #020202;
  border: 1px solid #020202;
}
.price-card-details-container-super2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-image: radial-gradient(circle at top left, black, black), radial-gradient(circle at top right, black, black), radial-gradient(circle at bottom left, black, black), radial-gradient(circle at bottom right, black, black), radial-gradient(circle at center, black , black);
    overflow: hidden;
    outline: 1px solid #020202;
}
.price-card-details-super2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
   padding: 0%;
    opacity: 1;
    z-index: 1;
}
.price-card-gradient-around-super2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(41deg, #070a13 -40%, #040404 100%);    
    opacity: 1;
    z-index: 2;
      position: relative; /* Required for absolute positioning inside */
  overflow: hidden;    /* Keep shine inside */

}

.card-texts-price-super2{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    overflow: hidden;
    place-content: space-between;
    background: linear-gradient(52deg,black, #5200801f , black);
}
.card-texts-price-super2 ul{
    list-style-type: none;
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}
.card-texts-price-super2 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
    text-align: left;
}
.card-texts-price-super2 h2{
  color: #c258ff;
}
.card-texts-price-super2 h1{
  color: #eabeff;
}
/* Patterned shine beam */
.price-card-gradient-around-super2::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(45deg, transparent 39%, rgba(195, 231, 255, 0.123) 55%, transparent 61%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2.5' cy='2.5' r='.6' fill='white' /></svg>");
  background-repeat: repeat;
  background-size: auto;
  -webkit-mask-image: linear-gradient(45deg, transparent 39%,black 55%, transparent 61%);
  mask-image: linear-gradient(45deg, transparent 39%, black 55%, transparent 61%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  animation: patternShine 10s infinite;
  transform: rotate(0deg);
  animation-delay: 0.5s;
  opacity: 0.4;
  pointer-events: none;
}



 .card-texts-price-super2 button {
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
    background: linear-gradient(135deg, #901ff9, #d55879 );
    color: white;
    z-index: 1;
    font-weight: 500;
    transition: none; /* remove built-in transition */
  }

.card-icon-sec4-super2 {
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Common mask SVG */
:root {
  --svg-mask-super2: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="464px" height="462px"%3E%3Cimage x="0px" y="0px" width="464px" height="462px" xlink:href="data:img/png;base64,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" /%3E%3C/svg%3E');
}


/* Background with mask */
.icon-mask-super2 {
  width: 100%;
  height: 100%;
  background: linear-gradient(-22deg, #9900ff 40%, transparent 39%);
  mask-image: var(--svg-mask-super2);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask-super2);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background 0.3s linear;
}

/* Glowing overlay using same mask */
.icon-glow-super2 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #bf5fff;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 0px #bf5fff);
  mask-image: var(--svg-mask-super2);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask-super2);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: opacity 1s, filter 1s;
}







































.price-cards-border-sec4-web-super3{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 9px;
    overflow: hidden;
    padding: 0.5rem;
}
.glow-around-price-card-super3{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg,  transparent 0%, transparent 15%, transparent 85%, rgb(0, 174, 255) 90%,rgb(184, 233, 255) 95%,rgb(0, 174, 255) 100%);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    padding: 0.055rem;
}   

.main-price-card-sec4-web-super3{
    width: 100%;
    height: 100%;
    background-color: #020202;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 0.5rem;
    place-content: center;
    align-items: center;
    display: flex;
    
}

.behind-price-cards-border-sec4-web-super3{
    width: 100%;
    height: 100%;
    background-color: #020202;
    overflow: visible;
    padding: 0.4rem;
    position: absolute;
    border-radius: 10px;
    
}
.behind-price-cards-border-sec4-web-super3::before {
content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0px 0px 10px 7px #020202, inset 0px 0px 6px 0px #020202;
  z-index: 0;
  border-radius: 13px;
  width: 103%;
  height: 102%;
  background-image: linear-gradient(var(--dynamic-gradient-angle, 25deg), transparent 0%, #020202 15%, #020202 85%, transparent 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'><circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.7)' /></svg>");
  transform: translate(-1.4%, -1.4%);
  outline: 2px solid #020202;
  transform-origin: center;
}

.behind-glow-around-price-card-super3{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, transparent 0%, transparent 15%, transparent 85%, #0472ff 100%);
    border-radius: 10px;
    overflow: visible;
    position: relative;
    padding: 0.1rem;
    filter: blur(4px);
    opacity: 0.7;
}

.each-card-container-sec4-web-super3{
width: 100%;
  height: 100%;
  position: relative;
  background: #020202;
  border: 1px solid #020202;
}
.price-card-details-container-super3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    background-image: radial-gradient(circle at top left, black, black), radial-gradient(circle at top right, black, black), radial-gradient(circle at bottom left, black, black), radial-gradient(circle at bottom right, black, black), radial-gradient(circle at center, black , black);
    overflow: hidden;
    outline: 1px solid #020202;
}
.price-card-details-super3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='3' height='3'>\<circle cx='2.5' cy='2.5' r='.6' fill='rgba(255,255,255,0.15)' />\</svg>");
   padding: 0%;
    opacity: 1;
    z-index: 1;
}
.price-card-gradient-around-super3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-image: linear-gradient(41deg, #070a13 -40%, #040404 100%);    
    opacity: 1;
    z-index: 2;
      position: relative; /* Required for absolute positioning inside */
  overflow: hidden;    /* Keep shine inside */

}

.card-texts-price-super3{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 1;
    padding: 0.5rem 1.5rem 1.5rem 1.5rem;
    gap: 1rem;
    overflow: hidden;
    place-content: space-between;
    background: linear-gradient(52deg,black, #120e09 , black);
    border-radius: 8px;
}
.card-texts-price-super3 ul{
    list-style-type: none;
  gap: 0.5rem;
  display: flex;
  flex-direction: column;
}
.card-texts-price-super3 ul li h5{
    gap: 0.5rem;
    display: flex;
    place-content: start;
    align-items: center;
    text-align: left;
}
.card-texts-price-super3 h2{
  color: #f80;
}
.card-texts-price-super3 h1{
  color: #ffe3be;
}
/* Patterned shine beam */
.price-card-gradient-around-super3::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background-image: 
    linear-gradient(45deg, transparent 39%, rgba(195, 231, 255, 0.123) 55%, transparent 61%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><circle cx='2.5' cy='2.5' r='.6' fill='white' /></svg>");
  background-repeat: repeat;
  background-size: auto;
  -webkit-mask-image: linear-gradient(45deg, transparent 39%,black 55%, transparent 61%);
  mask-image: linear-gradient(45deg, transparent 39%, black 55%, transparent 61%);
  mask-composite: intersect;
  -webkit-mask-composite: destination-in;
  animation: patternShine 10s infinite;
  transform: rotate(0deg);
  animation-delay: 1s;
  opacity: 0.4;
  pointer-events: none;
  z-index: 10;
}



 .card-texts-price-super3 button {
  font-weight: 500;
    position: relative;
    border: none;
    border-radius: 10px;
    padding: 0.4rem;
    width: 60%;
    display: flex;
    place-self: center;
    text-align: center;
    flex-direction: row;
    justify-content: center;
    cursor: pointer;
    font-family: Poppins, sans-serif;
    overflow: hidden;
   --stop1: 0%;
    --stop2: 30%;
    --stop3: 60%;
    --stop4: 100%;

    background: linear-gradient(
      135deg,
      #ac823e var(--stop1),
      #e7c377 var(--stop2),
      #c48d4b var(--stop3),
      #fef7b9 var(--stop4)
    );    
    color: white;
    transition: background 1s ease;
    z-index: 1;
  }
  #super3Button p {
    text-shadow: 0px 0px 3px white;
    animation: super3TextShadowPulse 2s ease-in-out infinite;

  }

   @keyframes super3TextShadowPulse {
    0%, 100% {
      text-shadow: 0px 0px 3px white;
    }
    50% {
      text-shadow: 0px 0px 30px white;
    }
  }

.card-icon-sec4-super3 {
  width: 100%;
  height: 1.2rem;
  display: flex;
  place-content: center;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  overflow: hidden;
}

/* Common mask SVG */
:root {
  --svg-mask-super3: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="420px" height="240px"%3E%3Cimage x="0px" y="0px" width="420px" height="240px" xlink:href="data:img/png;base64,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" /%3E%3C/svg%3E');
}


/* Background with mask */
.icon-mask-super3 {
  width: 100%;
  height: 100%;
  background: linear-gradient(-22deg, rgb(255, 180, 95) 40%, transparent 39%);
  mask-image: var(--svg-mask-super3);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask-super3);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background 0.3s linear;
}

/* Glowing overlay using same mask */
.icon-glow-super3 {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgb(255, 180, 95);
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 0px rgb(255, 180, 95));
  mask-image: var(--svg-mask-super3);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: var(--svg-mask-super3);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: opacity 1s, filter 1s;
}

.cardresult{
  display: none;
}


    :root {
      --bg-dark: rgba(0, 0, 0, 0.6);
      --form-bg: rgba(20, 20, 20, 0.75);
      --accent: #4fc3f7;
      --text: #fff;
      --selected-bg: #0d47a1;
    }



    .modal-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg-dark);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
    }
    #dropdown-menu li p{
      color: white;
    text-align: center;
    place-content: center;
    justify-content: center;
    }
    .modal-overlay.active {
      display: flex;
    }

    .contact-form {
      background: var(--form-bg);
      padding: 2rem;
      border-radius: 20px;
      max-width: 500px;
      width: 90%;
      position: relative;
      box-shadow: 0 0 30px rgba(0,0,0,0.6);
      transition: all 0.3s ease;
    }
    .contact-form h2{
      padding: 0rem 0rem 1rem 0rem;
      color: white;
    }
    #selected-text{
      color: white;
    }
    .close-btn {
      width: auto !important;
      padding: 0 !important;
      border: none !important;
      transition: color 0.1s ease !important;
      font-family: revert !important;
      color: white !important;
      background: transparent !important;
      border-radius: 0px !important;
      box-shadow: rgba(0, 0, 0, 0) 0px 2px 4px 0px !important;
      line-height: 0em !important;
      --outline-color: none !important;
      cursor: pointer !important;
      top: 0 !important;
      right: 0 !important;
      position: relative !important;
      left: 0 !important;
      float: right !important;
      font-size: 1.5rem !important;
    }
    .close-btn:hover{
      color: rgb(153, 153, 153) !important;
    }
    .form-group {
      margin-bottom: 1rem;
      display: flex;
      flex-direction: column;
    }

    .form-group input {
      padding: 0.6rem !important;
      border-radius: 8px !important;
      border: none !important;
      outline: none !important;
      width: auto !important;
      height: 100% !important;
      background: white !important;
      color: #242424 !important;
      box-shadow: none !important;
    }

    .submit-btn {
      padding: 0.7rem;
      width: 50%;
      border: none;
      border-radius: 10px;
      background:rgb(0, 204, 0);
      color: #fff;
      font-size: 1rem;
      cursor: pointer;
      transform: translate(50%, 0%);
      transition: background 0.3s ease, color 0.3s ease;
    }
    .submit-btn:hover{
      background: lightgreen;
      color: black;
    }
    /* Dropdown */
    .dropdown {
      position: relative;
      margin-bottom: 1.5rem;
    }

    .dropdown-toggle {
      background: rgba(255, 255, 255, 0.1);
      padding: 0.6rem;
      border-radius: 8px;
      cursor: pointer;
      place-content: space-between;
      display: flex;
      user-select: none;
      align-items: center;
      
    }

    .dropdown-toggle::after {
      content: 'E';
      font-family: 'X7DesignFont';
      font-size: 0.8rem;
      transform: rotate(0deg);
      transform-origin: center center;
      color: white;
      transition: transform 0.8s ease;
    }

    .dropdown.open .dropdown-toggle::after {
      transform: rotate(-180deg);
    }

    .dropdown-toggle span {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .dropdown-menu {
      list-style: none;
      padding: 0;
      margin: 0.5rem 0 0;
      background: #000;
      position: relative; /* changed from absolute */
      width: 100%;
      max-height: 0; /* collapsed */
      overflow: hidden;
      transition: max-height 0.4s ease;
      border-radius: 10px;
      scrollbar-width: thin;
      scrollbar-color: rgb(0, 207, 0) transparent;
      padding-right: 4px;
    }

    .dropdown.open .dropdown-menu {
      max-height: 200px; /* expanded */
      overflow-y: auto;
            border-radius: 10px;

    }

    /* Scrollbar styling for WebKit browsers (Chrome, Safari, Edge) */
    .dropdown-menu::-webkit-scrollbar {
      width: 1px; /* tiny scroll line */
      height: 1px;
            border-radius: 10px;

    }

    .dropdown-menu::-webkit-scrollbar-track {
      background: transparent;
            border-radius: 10px;

    }

    .dropdown-menu::-webkit-scrollbar-thumb {
      background-color: green;
      border-radius: 10px;
      border: none;
    }

    .dropdown-menu::-webkit-scrollbar-button {
      display: none;
      height: 0;
            border-radius: 10px;

    }

    .dropdown-menu li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0.2rem;
      width: 100%;
      height: 100%;
      cursor: pointer;
      color: white;
      opacity: 0.5;
      transition: background 0.5s ease, color 0.5s ease, opacity 0.3s ease;
      background: transparent;
    }
    
    .dropdown-menu li img {
width: 100%;
  height: 100%;
  border-radius: 10px;
  position: relative;
    }

    .dropdown-menu li:hover {
      color: #000;
      opacity: 1;
    }

    .dropdown-menu li.selected{
      background: transparent;
      border-radius: 10px;
      color: #fff;
      opacity: 1;
    }
    .dropdown-menu li.selected  .icon-text-li-container{
      background-color: #0b0b0b;
    }
    .icon-text-li-container{
      width: 100%; 
      height: 100%;
      display: flex;
      gap: 0.5rem;
      flex-direction: row;
      background: transparent;
      text-align: center;
      border-radius: 10px;
      place-content: start;
      padding: 0.6rem;
      transition: background 0.3s ease;
    }
    .icon-text-li-container:hover{
      background:#0b0b0b ;
    }
    .icon-text-li-container .selected {
      background:#0b0b0b ;
    }
.error-message {
  color: #f44336;
  font-size: 0.85rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-5px);
  transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.error-message.visible {
  max-height: 30px; /* enough to show one line of text */
  opacity: 1;
  transform: translateY(0);
}





.all-btn-container-web{
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  z-index: 5;
}




.preview-button-sec3-web, .fullscreen-button-sec3-web{
  width: 2rem;
  height: 2rem;
  background: white;
  border-radius: 5px;
  transition: background 0.3s ease;
  border: none;
  cursor: pointer;
  padding: 0.45rem;
}
.preview-button-sec3-web:hover, .fullscreen-button-sec3-web:hover{
  background: rgb(204, 204, 204);
}
.preview-button-sec3-web img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  place-content: center;
  align-items: center;
  display: flex;
}


    /* Responsive styles */
    
    @media screen and (orientation: portrait) and (min-width: 1201px) {
      .contact-form {
        max-width: 50%;
    padding: 3rem;
      }
            .price-cards-container-sec4-web{
        width: 90%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        place-self: center;
        align-items: start;
        background-color: transparent;
        column-gap: 1rem;
        row-gap: 3rem;
        z-index: 2;
      }
      .web-sec4{
        padding: 5% 0% 0% 0%;
      }
      .cover-section4-web{
        padding: 0rem 0rem 5rem 0rem;
      }
      .pattern-glow-container-sec4-web{
        height: 20%;
      }
      .content-in-sec4-web-container h1{
        font-size: 2.1rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
    }
    
    @media screen and (orientation: portrait) and (max-width: 1200px) {
      .contact-form {
        max-width: 50%;
    padding: 3rem;
      }
      .price-cards-container-sec4-web{
        width: 90%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,1fr);
        place-self: center;
        align-items: start;
        background-color: transparent;
        column-gap: 1rem;
        row-gap: 3rem;
        z-index: 2;
      }
      .web-sec4{
        padding: 5% 0% 0% 0%;
      }
      .cover-section4-web{
        padding: 0rem 0rem 5rem 0rem;
      }
      .pattern-glow-container-sec4-web{
        height: 20%;
      }
      .content-in-sec4-web-container h1{
        font-size: 2.1rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
    }





    @media screen and (orientation: portrait) and (max-width: 992px) {
      .contact-form {
        max-width: 60%;
        padding: 3rem ;
      }
      .web-sec4{
        padding: 10% 5% 10% 5%;
      }
      .cover-section4-web{
        padding: 0rem 0rem 5rem 0rem;
      }
      .pattern-glow-container-sec4-web{
        height: 10%;
      }
      .content-in-sec4-web-container h1{
        font-size: 1.9rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container{
        padding: 0;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
      .price-cards-container-sec4-web{
        width: 100%;
        grid-template-columns: repeat(2,1fr);
        row-gap: 1rem;
        transform: translate(0%, 2%);
        column-gap: 1rem;
      }
    }







    @media screen and (orientation: portrait) and (max-width: 768px){
      .contact-form {
        max-width: 70%;
        padding: 3rem 5rem;
      }
            .web-sec4{
        padding: 10% 5% 10% 5%;
      }
      .cover-section4-web{
        padding: 0rem 0rem 5rem 0rem;
      }
      .pattern-glow-container-sec4-web{
        height: 10%;
      }
      .content-in-sec4-web-container h1{
        font-size: 1.6rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container{
        padding: 0;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
      .price-cards-container-sec4-web{
        width: 80%;
        grid-template-columns: repeat(1,1fr);
        row-gap: 1rem;
        transform: translate(0%, 2%);
      }
    }





    @media screen and (orientation: portrait) and (max-width: 600px){
      .contact-form {
        max-width: 100%;
        width: 80%;
        padding: 3rem;
      }
      .web-sec4{
        padding: 10% 5% 10% 5%;
      }
      .cover-section4-web{
        padding: 0rem 0rem 5rem 0rem;
      }
      .pattern-glow-container-sec4-web{
        height: 10%;
      }
      .content-in-sec4-web-container h1{
        font-size: 1.3rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.3rem;
      }
      .content-in-sec4-web-container{
        padding: 0;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
      .price-cards-container-sec4-web{
        width: 80%;
        grid-template-columns: repeat(1,1fr);
        row-gap: 1rem;
        transform: translate(0%, 2%);
      }
    }




    @media screen and (orientation: portrait) and (max-width: 450px){
      .contact-form {
        max-width: 100%;
        width: 85%;
        padding: 2rem;
      }
      .form-group input {
        font-size: 0.9rem;
      }
      .submit-btn {
        font-size: 0.9rem;
      }



      .content-in-sec4-web-container h1{
        font-size: 1rem;
        text-align: center;
        place-content: center;
        width: 100%;
        height: fit-content;
        font-weight: 600;
        display: flex;
        align-self: center;
        z-index: 6;
        gap: 0.3rem;
      }
      .content-in-sec4-web-container p{
        width: 90%;
      }
      .price-cards-container-sec4-web{
        width: 80%;
        grid-template-columns: repeat(1,1fr);
        row-gap: 1rem;
        height: 100%;
        position: relative;
      }
    }

    

   









    @media screen and (orientation: landscape) and (min-width: 1201px){
      .contact-form {
        max-width: 50%;
        padding: 5% 10%;
      }
      .content-in-sec4-web-container h1{
        width: 100%;
        font-size: 2.5rem;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 50%;
      }
      .normal-card-1 ul, .normal-card-2 ul, .normal-card-3 ul{
        gap: 0.5rem;
      }
      .cards-gapper{
        height: 90%;
        gap: 2rem;
        position: relative;
      }
      .normal-card-1-sec4-web-glow2, .normal-card-2-sec4-web-glow2, .normal-card-3-sec4-web-glow2{
        height: 92.8%;
      }
      .price-cards-container-sec4-web{
        width: 90%;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr);
      }
     
    }
    @media screen and (orientation: landscape) and (max-width: 1200px){
      .contact-form {
        max-width: 50%;
        padding: 5% 10%;
      }
      .content-in-sec4-web-container h1{
        width: 100%;
        font-size: 2.5rem;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 50%;
      }
      .normal-card-1 ul, .normal-card-2 ul, .normal-card-3 ul{
        gap: 0.5rem;
      }
      .cards-gapper{
        height: 90%;
        gap: 2rem;
        position: relative;
      }
      .normal-card-1-sec4-web-glow2, .normal-card-2-sec4-web-glow2, .normal-card-3-sec4-web-glow2{
        height: 92.8%;
      }
      .price-cards-container-sec4-web{
        width: 90%;
        column-gap: 1rem;
        row-gap: 3rem;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr);
      }
      
    }
    @media screen and (orientation: landscape) and (max-width: 992px){
      .contact-form {
        max-width: 50%;
        padding: 5% 5%;
      }
      .content-in-sec4-web-container h1{
        width: 100%;
        font-size: 1.5rem;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 70%;
      }
      .price-cards-container-sec4-web{
        width: 100%;
        column-gap: 0rem;
        row-gap: 2rem;
        grid-template-columns: repeat(3,1fr);
        grid-template-rows: repeat(2,1fr);
      }
      .normal-card-1-sec4-web-glow2, .normal-card-2-sec4-web-glow2, .normal-card-3-sec4-web-glow2 {
        height: 90.5%;
      }
    }

    @media screen and (orientation: landscape) and (max-width: 768px){
      .contact-form {
        max-width: 50%;
        padding: 5% 5%;
      }
      .content-in-sec4-web-container h1{
        width: 100%;
        font-size: 1.5rem  !important;
        gap: 0.5rem;
      }
      .content-in-sec4-web-container p{
        width: 70%;
      }
      .normal-card-1-sec4-web-glow2, .normal-card-2-sec4-web-glow2, .normal-card-3-sec4-web-glow2 {
        height: 90.5%;
      }
      .price-cards-container-sec4-web{
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(3,1fr);
      }
    }






















































/*   ------------------------------Section 5 (Footer) ----------------------------------*/
#section7{
  overflow: hidden;
}
.cover-section7{
  background: #0d0b13;
  transition: height 0.5s ease;
  overflow: hidden;
}
   .cookie-banner {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #0d0d0d;
      color: #fff;
      padding: 1rem;
      display: none;
      justify-content: space-between;
      align-items: center;
      z-index: 9999;
      font-family: sans-serif;
    }

    .cookie-banner.show {
      display: flex;
    }

    .cookie-banner button {
      background-color: #5200b5;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      font-size: 0.9rem !important;
      cursor: pointer;
      border-radius: 5px;
    }










#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000; /* or any background color */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Spinner animation */
.spinner {
  border: 6px solid #200049;
  border-top: 6px solid #5400c2;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
#loader p{
  color: white;
  font-family: 'poppins';
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}







  @media screen and (orientation: landscape){
    .card-one-inside-bottom-part-sec2-web h4{
      text-align: justify;
    }

  }















    .fade-up-delay1, .fade-left-delay1, .fade-right-delay1, .zoom-delay1 { opacity: 0; will-change: transform, opacity; }



























.media-container-sec7 a:hover{
  background: #7650ff !important;
}




.not-allowed-yet:hover .not-allowed-link{
  background: #7650ff !important;
}
.not-allowed-yet li{
  color: rgba(112, 114, 139, 0.59) !important;
}



































.support-icon-container{
  background: #0b0913;
}
.support-icon-container:hover{
  background: #201c36;
}
.chat-back{
  background: #0b0913c9;
}
#start-chat{
  background: #1a1824;
  color: white;
}
#user-form p{
  color: white;
}
.button-title-cb-container{
  color: white;
}
.header-containers-container{
  background: #7d39e9;
}
.live-chat-box{
  background: orange;
}
#chat-header{
  color: rgb(230, 230, 230);
}

.bubble-wrapper{
  background: #a973ff;
  color: white;
}
.bubble-wrapper::after{
  border-right-color: #a973ff;
}

.bubble-wrapper2{
  background: black;
  color: white;
}
.bubble-wrapper2::after{
  border-left-color: black;
}

#new-chat-btn{
  background: white;
}
#new-chat-btn:hover{
  background: rgb(201, 201, 201);
}


















@media screen and (orientation: landscape) and (max-width: 600px){
  .text-container-sec1-web-text h1{
    display: flex;
    flex-direction: column;
  }
}










header{
  overflow: visible !important;
}



























.portfolio-links {
  display: none;
  margin-top: 10px;
  gap: 8px;
  grid-template-rows: auto;
  grid-template-columns: repeat(2,1fr);
}

.portfolio-links button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  color: white;
  font-family: 'poppins';
  cursor: pointer;
}
.web-btn-port, .graph-btn-port, .vid-btn-port, .app-btn-port{
  transition: transform 0.5s ease, opacity 0.5s ease, background 0.3s ease;
  background: rgb(98 94 213);
}

.web-btn-port:hover, .graph-btn-port:hover, .vid-btn-port:hover, .app-btn-port:hover{
  background: rgb(71, 68, 165);
}






#start-chat{
  background: rgb(98 94 213);
  color: white;
  text-shadow: 1px 1px 0px rgb(71, 68, 165);
}
#start-chat:hover{
  background: rgb(71, 68, 165);
}








#portfolio-links{
    opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, height 0.5s ease;
  overflow: hidden; /* important for height animation */
  display: grid;    /* keep display for layout */
  height: 0;        /* start hidden */
}
#portfolio-links.show {
  opacity: 1;
  transform: translateY(0);
  height: auto; /* expand to full content */
}




























.dsk-buttons{
  filter: hue-rotate(6deg);
}
#close-sidebar{
  font-size: 1.5rem !important;
}