*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;

user-select: none;
}

a {
  text-decoration: none;
  color: #fff;
  cursor: pointer !important; 
  position: relative;
  z-index: 10; 
}

html{
  font-size: 55.7%;
  background-color: black;
}



:root{
  --primary-text:"Montserrat", sans-serif;
  --secondary-text:"Inter", sans-serif;
  --thirdary-text:"Anta", sans-serif;
 --primary-text-color:#1853ff ;
 --gap: 10rem;
--border-color: rgba(255, 255, 255, 0.8);
  --grid-gap: 15px;

}

button{
  cursor: pointer;
  pointer-events: all;
  font-family: var(--thirdary-text);
    padding: 1rem 2rem;
  border-radius: .5rem;
  border: none;
  background-color: var(--primary-text-color);
  color: #fff;

}

/*? scrolling text animation */

.scrolling-text-div {

  width: 100%;
  height: 15rem;
  background: rgb(0, 11, 26);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.scrolling-tracker {
  display: flex;
  width: max-content;
  animation: scroll-move 15s linear infinite; 
  will-change: transform;
}

.scrolling-content {
  display: flex;
  flex-shrink: 0;
  padding-right: 50rem; 
}

.scrolling-content span {
  font-size: 12rem;
  color: white;
  font-family: sans-serif;
  font-weight: 700;
  margin-right: 3rem; 
  white-space: nowrap;
  transition: .5s ease ;
}

@keyframes scroll-move {
  0% {
    transform: translateX(0);
  }
  100% {
  
    transform: translateX(-50%);
  }
}

.scrolling-content .sp1, 
.scrolling-content .sp3 {
  color: var(--primary-text-color);
}

.scrolling-content .sp2, 
.scrolling-content .sp4 {
  color: #fff;
}

.scrolling-content .sp1:hover{
  /* color: #fff; */
  scale: 1.1;
}
.scrolling-content .sp3:hover{
   /* color: #fff; */
   scale: 1.1;
}
.scrolling-content .sp2:hover{
   
   scale: 1.1;
}

.scrolling-content .sp4:hover{
 
  scale: 1.1;
}



/*? ends animations scrolling  */


/*? starts scrolling text vertical animation  */


.ticker-stage {
  position: absolute;
  bottom: 30vh;
  left: 5vw;
  height: 320px; 
  overflow: hidden;
  z-index: 20;
  pointer-events: none;
  
  -webkit-mask-image: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%,      
    rgba(255, 255, 255, 1) 20%,     
    rgba(255, 255, 255, 1) 40%,     
    rgba(255, 255, 255, 0.1) 95%,   
    rgba(255, 255, 255, 0) 100%     
  );
  mask-image: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 1) 20%, 
    rgba(255, 255, 255, 1) 40%, 
    rgba(255, 255, 255, 0.1) 95%, 
    rgba(255, 255, 255, 0) 100%
  );
}

.ticker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: tickerScroll 5s linear infinite;
}

.ticker-list li {
  font-family: var(--secondary-text), sans-serif;
  font-size: 5rem;
  font-weight: bold;
  height: 100px;
  line-height: 100px;
  color: #fff;
  white-space: nowrap;
  transition: none;
}

.ticker-list li span {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.4);
  vertical-align: super;
  margin-left: 10px;
}

@keyframes tickerScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-400px); }
}


/*? ends scrolling text vertical animation  */

/*? bg gradiant ball start */
.gradient-ball-bg {
    width: 600px; /* Adjust size as needed */
    height: 600px;
    border-radius: 50%; /* Makes it a circle */
    
    /* Radial Gradient Logic:
       Inner: Full opacity #1853ff
       Outer: 0% opacity (transparent) #1853ff */
    background: radial-gradient(circle, 
        rgba(24, 82, 255, 0.404) 0%, 
        rgba(24, 82, 255, 0.144) 40%, 
        rgba(24, 82, 255, 0.014) 70%
    );

    /* Placement properties */
    position: absolute;
    pointer-events: none; /* So it doesn't block clicks */
    z-index: 0; 
    filter: blur(280px); /* Optional: adds extra softness to the glow */
}

/*? bg gradiant ball ends */


section{
  
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;

}

a{
  
  z-index: 1000;
}


/*? Global Grayscale Difference Cursor */
.global-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8rem; /* Increased size for better visibility */
  height: 8rem;
  background-color: white; 
  border-radius: 50%;
  pointer-events: none;
  z-index: 11000;
  
  /* The Magic: Inverts colors AND removes saturation */
  mix-blend-mode: difference;
  backdrop-filter: grayscale(100%);
  -webkit-backdrop-filter: grayscale(100%);
  
 
  
  transition: transform 0.1s ease-out;
  transform: translate(-50%, -50%);
}

/* Optional: Smooth transition for the circle appearing */
.global-cursor {
    opacity: 0;
    transition: opacity 0.3s ease;
}

body:hover .global-cursor {
    opacity: 1;
}

/* When hovering over clickable items, make the circle bigger */
.global-cursor.active {
  transform: translate(-50%, -50%) scale(2.5);
  background-color: #1853ff; /* This will create a unique color inversion */
}

/* Hide the default mouse for a cleaner look */
body {
  cursor: none;
}

/* --- CUSTOM VIDEO CONTROLS (APPENDED CODE) --- */

/* 1. Anchors the controls to the video instead of the whole screen */
.video-wrapper {
    position: relative !important; 
    width: 100%;
    max-width: 80rem; /* Keeps it aligned with your .t-vid-sec */
    margin: 0 auto;
    overflow: hidden;
    border-radius: 1.5rem;
    background: #000;
}

/* 2. Ensures the video sits perfectly in the wrapper */
.video-wrapper video {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* 3. Styles the control bar at the bottom */
.custom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    padding: 2rem;
    opacity: 0; /* Hidden until hover */
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* 4. Show controls only when hovering the video */
.video-wrapper:hover .custom-controls {
    opacity: 1;
}

/* 5. Aligns play button to left and fullscreen to right */
.controls-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left-side, .right-side {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* 6. Professional Progress Bar */
.progress-area {
    width: 100%;
    height: 5px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    margin-bottom: 1.5rem;
    border-radius: 10px;
    position: relative;
}

.progress-fill {
    height: 100%;
    width: 0%;
    background: #1853ff; /* Matches your primary blue */
    border-radius: 10px;
}

/* 7. Volume slider styling */
.volume-slider {
    width: 80px;
    cursor: pointer;
    accent-color: #1853ff;
}

/* 8. Icon scaling on hover */
.play-btn-trigger, .fullscreen-trigger {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.play-btn-trigger:hover, .fullscreen-trigger:hover {
    transform: scale(1.1);
}

/* --- END OF APPENDED CODE --- */

/*? global cursor ends  */


/*! navbar start */

nav{

backdrop-filter: blur(200px);
background-color: rgba(2, 8, 26, 0.499);
border: 1px solid rgba(255, 255, 255, 0.1);

width: 100%;
height: 8rem;
position: fixed;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10000;
font-family: var(--thirdary-text);
  
  
  & ul{
     display: flex;
     justify-content: center;
     align-items: center;
     gap:6rem;
     font-size: 2rem;
  }

  li{
    list-style: none;
    transition: .3s ease;
  }

}

nav img{
  width: 15rem;
}

ul li:hover{
  scale: 1.3;
  text-decoration: underline;
  text-decoration-color: #fff;
}

.contact-btn{
  padding-right: .5rem;
  
}

.contact-btn button{
  padding: 1rem 2rem;
  border-radius: .5rem;
  border: none;
  background-color: var(--primary-text-color);
  color: #fff;
  margin-right: 1.5rem;
  transition: .2s ease;
 

}

.contact-btn button:hover{
  scale: 1.2;
   border-radius: 2rem;
  
}

/*! navbar end */



/*! home sec start */
.home-sec{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}

.home-sec  video{
  position: absolute;
 /* top:8rem; */
  width: 100%;
  bottom: -10rem;
  z-index: -1;
}



.home-sec .main-text {
  margin-left: -100rem;
 
  
  
}

 
.home-sec .main-text h1{
  color: white;
font-size: 20rem;
font-family: var(--thirdary-text);


  
}





  
 .home-sec .main-text h1 span{
  color: var(--primary-text-color);
}
.home-sec .secondary-text {
  font-family: var(--primary-text);
margin-left: -100rem;
margin-top: -3rem;
}

.home-sec .secondary-text h2{
  color:#275dff ;
font-size: 6rem;
font-weight: 300 ;
letter-spacing: .55rem;

}

.home-sec .secondary-text h2 span{
  color: #fff;
}


.home-sec button {
  margin-left: -66rem;
  margin-top: 3rem;
  padding: 2.5rem 4rem;
  background-color: var(--primary-text-color);
  color: white;
  border: none;
  border-radius: 1rem;
  font-family: var(--thirdary-text);
  font-size: 2rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-radius 0.35s ease; /* keep button size stable */
  transition: .25s;
}

   .home-sec button:hover{
   
   border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
  border-top-right-radius: 2.5rem;
  scale: 1.2;


} 



/*! home sec ends */


/*!  elements section started  */
.elem-sec {
 
    width: 100%;
    height: 15rem; 
     background-color:white ; /*#02081a  */
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--primary-text-color);
}


.counter-box {
    text-align: center;
    font-family: var(--thirdary-text);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    

}



#day-count {
  
    font-size: 8rem;
    background-color:rgb(21, 21, 21);
    color:white;
    display: inline-block;
    width: 20rem;
    height: 10rem;
    border-radius: 1.5rem;
    font-weight: 900;
    font-family: var(--primary-text);
    /* background-color: #fff; */

}

.counter-box p{
 font-family: var(--primary-text);
  display: inline-block;
  font-size: 7rem;
  text-transform: uppercase;
  font-weight: 900;
  background: linear-gradient(to bottom, #002976 40%, #ecefff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;


}
/*!  elements section ends  */


/*! projects section starts */
.proj-sec{
  margin-top: 7rem;
  background: url(assets/1.png);
  background-repeat: no-repeat;
  background-size: cover;
  height: 150vh;
  padding-top: 10rem;
}
 
.proj-sec .click-text{
  display: none;
}
.adjustment-layer{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  background-color: #000;
  opacity: 0.7;
}

.proj-sec .heading {
  position: absolute;
  text-align: center;
  left: 50%;
  transform: translate(-50%);
  font-family: var(--secondary-text);
  text-align: center;
     background: linear-gradient(180deg, #4A59FF 0%, #0029FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none ;
  outline: none;


}

.proj-sec .heading h1{


 color: var(--primary-text-color); 
 font-family: var(--secondary-text);
 font-size: 10rem;
 
 /* text-transform: uppercase; */
}

.proj-sec img{
 width: 100%;
    height: 100%;
    object-fit: cover;
}

 .card{
 position: absolute; /* Allows cards to overlap for the fan effect */
    width: 30rem;
    height: 35rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #1a1a1a; 
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.5);
    overflow: hidden;
  
} 

.card a button{
  position: absolute;
  border-radius: 50%;
  padding: 3.5rem 2.5rem;
  font-size: 2rem;
  top: -19rem; 
  left: 10rem; 
  z-index: 20;
  transition: .3s ease;
  opacity: 0;
  background: linear-gradient(to top,black,rgb(41, 57, 136));
  
  
 }

.card:hover button{
   opacity: 70%;
}





.card1 {
  /* Starting point: 10vh from top, 10vh from left */
  transform: translate(23vh, 15vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 2;
  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card1:hover {
  transform: translate(23vh, 15vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 10;
}

.card2 {
  transform: translate(23vw, 21vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 3;
  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card2:hover {
  transform: translate(23vw, 21vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 11;
}


.card3 {
  transform: translate(36vw, 32vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 4;
  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card3:hover {
  transform: translate(36vw, 32vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 12;
}


.card4 {
  transform: translate(49vw, 43vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 5;
transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card4:hover {
  transform: translate(49vw, 43vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 13;
}


.card5 {
  transform: translate(62vw, 54vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 6;
  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card5:hover {
  transform: translate(62vw, 54vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 14;
}


.card6 {
  /* This ends the stack so that the right edge aligns with the 10vh margin */
  transform: translate(75vw, 65vh) rotate(-10deg) rotateY(10deg) rotateX(4deg);
  z-index: 7;
  transition: transform 0.3s ease, z-index 0s; /* Smooth transition */
}

.card6:hover {
  transform: translate(75vw, 65vh) scale(1.1) rotate(0deg) rotateY(0deg) rotateX(0deg) translateZ(100px);
  z-index: 15;
}

.ticker-stage {
  position: absolute;
  bottom: 30vh;
  left: 5vw;
  height: 320px; 
  overflow: hidden;
  z-index: 20;
  pointer-events: none;
  
  /* Dual Fade Mask: Fades out at the very top AND the very bottom */
  -webkit-mask-image: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%,      /* Invisible at the very top edge */
    rgba(255, 255, 255, 1) 20%,     /* Fully visible/Bright White here */
    rgba(255, 255, 255, 1) 40%,     /* Stays visible through the middle */
    rgba(255, 255, 255, 0.1) 95%,   /* Fades out near the bottom */
    rgba(255, 255, 255, 0) 100%     /* Invisible at the bottom edge */
  );
  mask-image: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 1) 20%, 
    rgba(255, 255, 255, 1) 40%, 
    rgba(255, 255, 255, 0.1) 95%, 
    rgba(255, 255, 255, 0) 100%
  );
}

.ticker-list {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: tickerScroll 5s linear infinite;
}

.ticker-list li {
  font-family: var(--secondary-text), sans-serif;
  font-size: 5rem;
  font-weight: bold;
  height: 100px;
  line-height: 100px;
  color: #fff;
  white-space: nowrap;
  transition: none;
}

.ticker-list li span {
  font-size: 1.8rem;
  color: rgba(255, 255, 255, 0.4);
  vertical-align: super;
  margin-left: 10px;
}

@keyframes tickerScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-400px); }
}

/*! projects section ends */


/*! testimonials section start */
.test-sec{
  background: #000;
 height: 200vh;
margin-bottom: 20rem;
}

.test-sec .f-img{
  width: 20rem;
  height: 20rem;
  padding-top: 4rem;
& img{
  width: 100%;
  animation: float-xy 6s ease-in-out infinite;
}
}

@keyframes float-xy {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, -15px); /* Thoda upar aur right */
  }
  50% {
    transform: translate(-5px, -25px); /* Mazeed upar aur halka left */
  }
  75% {
    transform: translate(-15px, -10px); /* Neeche ki taraf wapsi */
  }
  100% {
    transform: translate(0, 0); /* Wapis apni jagah par */
  }
}

.test-sec .heading{
  position: relative;
 font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-family: var(--secondary-text);
  margin-bottom: 10rem;
  text-align: center;
  background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none ;
  outline: none;
  
  

  & span {
   background: linear-gradient(180deg, #4A59FF 0%, #0029FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    border: none;
  -webkit-text-fill-color: transparent;
  }
}

.bg-img1{
  position: absolute;
  width: 150rem;
  height: 150rem;
  top:5rem;
  right: 0;
  z-index: 0;

 & img{
  width: 100%;
 } 
}



.t-vid-sec{
  position: relative;
  margin:auto;
  width: 80rem;
  /* height: 20rem; */
  border: 1px solid #0d2878;
  border-radius: 1.6rem;
}

.t-video{
  
width: 100%;
object-fit: cover;
}

.t-text h3 {
  margin-top: 5rem;
    font-family: var(--secondary-text);
    color: #fff;
    font-size: 3rem; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem; 
}

/* --- The Dash Styling --- */
.t-text h3 .dash {
    color: var(--primary-text-color); 
    font-size: 5rem;      
    font-weight: 900;     
    line-height: 0;       
    vertical-align: middle;
    display: inline-block;
    transform: translateY(-4px); 
}

.brand-slider {
    width: 100%;
    height: 40rem;
    overflow: hidden;
    position: relative;
    
    font-size: 0; 
}

.brand-track {
    display: inline-flex; 
    width: max-content;
    white-space: nowrap;
    /* Ensure the animation is perfectly linear */
    animation: scroll-brands 45s linear infinite ;
    will-change: transform;
}

.brand-track img {
    height: 20rem;
    width: auto;
    display: inline-block;
    vertical-align: middle; 
    margin: 0;
    padding: 0;
}

@keyframes scroll-brands {
    0% {
        transform: translateX(0);
    }
    100% {
        
        transform: translateX(-50%);
    }
}

.word-box{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-top: -15rem;
  width: 100%;
  height: 60rem;
  border-radius: 2rem;
  /* background-color: rgba(12, 13, 48, 0.293); */
  gap: 4rem;
}

.test-word{
  width: 50rem;
  height: 100%;
  /* border: 2px solid red; */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--secondary-text);
  background-color:rgb(0, 1, 24);
  border-radius: 2rem;
}

.test-word h3{
font-size: 3rem;
color: #fff;
/* margin-bottom: 12rem; */
}

.h3-1{
  margin-top: 13rem;
  margin-bottom: 3rem;
text-transform: capitalize;
}

.h3-2{
  margin-bottom: 15rem;
  text-align: center;
}

.test-p-sec{
  margin: auto;
  width: 45rem;
  font-size: 2.2rem;
  font-weight: 400;
  text-align: center;
}

.test-img-sec{
width: 8rem;
margin-top: 3rem;
margin-bottom: 3rem;
}

.test-img-sec img{
width: 100%;
}





/*! testimonials section end */


/*! services section start */
.serv-sec{
  
  padding-top: 5rem;
  background-repeat: no-repeat;
  background-size: cover;
  height: 90vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  
}
.serv-sec .heading{
 
  font-family: var(--secondary-text);
  margin-top: 2rem;
  margin-bottom: 10rem;
  text-align: center;
     background: linear-gradient(180deg, #4A59FF 0%, #0029FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none ;
  outline: none;

  
}
.serv-sec .heading h1{
  color: var(--primary-text-color);
  font-size: 10rem;
  font-family: var(--secondary-text);
  font-weight: 700;
}

.serv-sec .cards{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.serv-sec .top-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9rem;
  margin-bottom: 3.5rem;
  
}

.serv-sec .below-cards{
  
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8rem;
}

.serv-sec img{
  transition: .2s ease-in-out ;
}

.serv-sec img:hover{
  scale: 1.08;
}

.serv-sec .click-text {
  display: none; 
}





/*! services section end */

/*! operate section starts  */


.op-sec{
  height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 5rem;
  

}
.op-sec  .bg-img{
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; 
  opacity: 0.45;
  
}



.op-sec .heading {

  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-family: var(--secondary-text);
  margin-bottom: 15rem;
  text-align: center;
  background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, #9E9E9E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  border: none ;
  outline: none;

  & span {
   background: linear-gradient(180deg, #4A59FF 0%, #0029FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    border: none;
  -webkit-text-fill-color: transparent;
  }
}

.op-cards{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10rem;
  
}
.op-card{
  position: relative;
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  width: 38rem;
  height: 48rem;
  background-color:rgba(0, 1, 24, 0.64);
  border-radius: 2rem;
  border: 0.5px solid rgba(54, 55, 73, 0.518);
}

.op-card .bg-heading{
  position: absolute;
  top:10rem;
  left: 4.5rem;
  z-index: 0;
  font-size: 7rem;
  font-family: var(--secondary-text);
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(358.31deg, #000000 -22.52%, #4A59FF 132.35%);
  -webkit-background-clip: text; /* Clips the background to the text */
  -webkit-text-fill-color: transparent; /* Makes the original text color see-through */
  background-clip: text;
  color: #4A59FF;
}

.c-heading{
  line-height: 4.6rem;
  z-index: 1;
  width: 20rem;
font-size: 2rem;
color: #fff;
font-weight: 700;
font-family: var(--secondary-text);
text-align: center;
margin-top: 15rem;
}

.c-para{
  width: 30rem;
  margin-top: 2rem;
  line-height: 2.5rem;
  font-weight: 400;
  z-index: 1;
  text-align: center;
  font-size: 1.7rem;
  color: #fff;
  font-family: var(--secondary-text);
}
/*! operate section ends  */


/*! contact section starts  */
.contact-sec {
    position: relative !important;
    background-color: #020205 !important; /* Deep dark background */
    overflow: hidden;
    z-index: 1;
    padding-top: 10rem;
    height: 70vh;
}

/* Background Blue Grid Lines */
.contact-sec::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: 
        linear-gradient(rgba(24, 83, 255, 0.1) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(24, 83, 255, 0.1) 1px, transparent 1px) !important;
    background-size: 60px 60px !important; /* Lines ka darmayani fasla */
    z-index: -2 !important;
    pointer-events: none;
}

/* Central Blue Glow (Shadow effect) */
.contact-sec::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80% !important;
    height: 80% !important;
    background: radial-gradient(circle, rgba(24, 82, 255, 0.096) 0%, transparent 70%) !important;
    z-index: -1 !important;
    pointer-events: none;
}

.contact-heading {
  margin: auto;
  width: 45rem;
text-align: center;
}
.contact-heading h1{ 
color: #fff;
font-size: 5rem;
font-weight: 900;
font-family: var(--secondary-text);
}
.contact-heading h1 span{
  color: var(--primary-text-color);
}

.contact-sec-btn{
  margin-top: 3rem;
 text-align: center;
}

.contact-sec-btn button{
  padding: 1.5rem 2.5rem;
  font-size: 1.7rem;
  transition: .3s ease-in-out;
}
.contact-sec-btn button:hover{
  transform: scale(1.05);
  border-radius: 2rem;
}
.contact-sec .three-div{
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 30rem;
  margin-top: 7rem;
}



 .contact-sec .three-div .div1-heading {
  color: white;
  margin-bottom: 3rem;
  text-align: center;
  & h2{
    font-size: 3rem;
    font-family: var(--secondary-text);
    font-weight: 700;
  }
}

.contact-sec .three-div .div-1 .sm-icons{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
& a img{
  width: 4rem;
}
}

.contact-sec .three-div .div-2{
  text-align: left;
  & img{
  width: 33rem;
}
}

.contact-sec .three-div .div-3 ul{
  text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 2rem;
}

.contact-sec .three-div .div-3 ul li{
  color: #fff;
  list-style: none;
  font-size: 2.5rem;
  font-family: var(--secondary-text);
  font-weight: 700;
}



.modal-overlay {
    display: none; 
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    z-index: 10000;
    overflow-y: auto; /* Agar form bada ho to mobile par scroll ho sakay */
    padding: 20px; /* Sides se thoda gap */
}

/* Modal Content ko Center karne ka sab se best tareeqa */
.modal-content {
    background: #050510;
    padding: 30px 20px;
    border-radius: 15px;
    width: 100%;
    max-width: 400px; /* Mobile ke liye perfect width */
    margin: auto; /* Overlay ke flex-center ke saath mil kar center karega */
    position: relative;
    border: 1px solid #1853ff;
    box-shadow: 0 0 20px rgba(24, 83, 255, 0.3);
}

/* Navbar aur Body ka X-Axis Scroll khatam karne ke liye */
html, body {
    overflow-x: hidden; /* Ye line x-axis ka scroll bar khatam kar degi */
    width: 100%;
}
/* Inputs Styling */
#contact-form input, #contact-form textarea {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 1.2rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid #1853ff55;
    color: white;
    border-radius: 8px;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    line-height: 1;
    transition: 0.3s;
}

.close-btn:hover {
    color: #1853ff;
}

#submit-btn {
    width: 100%;
    padding: 1.5rem;
    background: #1853ff;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#submit-btn:hover {
    background: #003ccf;
    box-shadow: 0 0 15px rgba(24, 83, 255, 0.4);
}

#submit-btn:disabled {
    background: #555;
    cursor: not-allowed;
}


/*! contact section end  */








/*! responsive code  */

/* Laptop Fix (1366px) */
@media screen and (max-width: 1566px) {
    html {
        font-size: 50%; /* Scales down all REM units proportionally */
    }

    nav {
        padding: 0 2rem;
    }
    nav ul {
        gap: 4rem; /* Reduced from 6rem */
    }

    /** home section start */

    .home-sec .main-text, 
    .home-sec .secondary-text {
        margin-left: -90rem; /* Pulls text back into view */
    }

    .home-sec button {
        margin-left: -62rem;
    }

    .home-sec video {
        bottom: 0; /* Prevents video from sliding off the bottom */
        height: 100%; /* Ensures video covers the height */
        width: 100%;
        object-fit: cover; /* Prevents the video from stretching/distorting */
    }

    /** home section end */


/** element section start */
    
    .elem-sec {
        height: auto; /* Allow section to expand if needed */
        padding: 4rem 0;
    }
    
    .counter-box p {
        font-size: 5rem; /* Scaled down from 7rem */
    }

    #day-count {
        font-size: 6rem; /* Scaled down from 8rem */
        width: 16rem;
        height: 8rem;
    }

    /** element section end */


    /** projects section start  */
    
    .proj-sec {
        height: auto; /* Content ke mutabiq adjust ho */
        min-height: 120vh;
        padding-bottom: 10rem;
    }
    
    .proj-sec .heading h1 {
        font-size: 8rem;
    }

    /* Cards ko thoda nazdeek laana taaki screen se bahar na jayen */
    .card1 { transform: translate(10vw, 15vh) rotate(-10deg); }
    .card2 { transform: translate(22vw, 22vh) rotate(-10deg); }
    .card3 { transform: translate(34vw, 29vh) rotate(-10deg); }
    .card4 { transform: translate(46vw, 36vh) rotate(-10deg); }
    .card5 { transform: translate(58vw, 43vh) rotate(-10deg); }
    .card6 { transform: translate(70vw, 50vh) rotate(-10deg); }

    /* Hover fixes for small laptops */
    .card1:hover { transform: translate(10vw, 15vh) scale(1.1); }
    .card2:hover { transform: translate(22vw, 22vh) scale(1.1); }
    .card3:hover { transform: translate(34vw, 29vh) scale(1.1); }
    .card4:hover { transform: translate(46vw, 36vh) scale(1.1); }
    .card5:hover { transform: translate(58vw, 43vh) scale(1.1); }
    .card6:hover { transform: translate(70vw, 50vh) scale(1.1); }

    .ticker-stage{
      scale: 0.6;
      bottom: 1rem;
    }


    /** projects section end  */
    
    
    /** testimonial section start  */


    .test-sec {
        height: auto;
        padding-bottom: 10rem;
        margin-bottom: 10rem;
    }

    .t-vid-sec {
        width: 70rem;
    }

    .word-box {
        margin-top: 5rem; /* Negative margin hataya taaki overlap na ho */
        height: auto;
        padding: 0 2rem;
        gap: 2rem;
        display: flex;
        justify-content: center;
    }

    .test-word {
        width: 31%; 
        height: auto;
        padding: 4rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center; /* Horizontal centering */
        text-align: center;
    }

    .h3-1 { margin-top: 0 !important; margin-bottom: 2rem !important; font-size: 2.2rem; }
    .h3-2 { margin-bottom: 0 !important; font-size: 2.2rem; }

    .test-p-sec {
        width: 100% !important;
        margin: 2rem 0 !important;
        font-size: 1.8rem;
        line-height: 1.5;
    }

    /* .test-img-sec {
        width: 100%;
        display: flex;
        justify-content: center; 
        margin: 2rem 0;
        text-align: center;
    }

    .test-img-sec img {
        width: 15rem ;
        margin-left: 9rem;
        margin-right: 0;
        margin-top: 0 ;
        margin-bottom: 0; 
        display: block ;
    } */

    .test-img-sec{
width: 8rem;
margin-top: 3rem;
margin-bottom: 3rem;
}

.test-img-sec img{
width: 100%;
}






    /** testimonial section end  */




    /**services section start  */
.serv-sec {
    height: auto;
    min-height: 100vh;
    padding-top: 8rem;
    padding-bottom: 5rem;
  }

  .serv-sec .heading {
    margin-bottom: 6rem;
  }

  .serv-sec .heading h1 {
    font-size: 8rem;
  }

  /* Keeping 2x2 but reducing gap to fit screen */
  .serv-sec .top-cards, 
  .serv-sec .below-cards {
    grid-template-columns: 1fr 1fr; 
    gap: 4rem;
    margin-bottom: 3.5rem;
  }

  .serv-sec img {
    width: 100%;
    max-width: 500px; /* Adjusting card size for laptop */
  }

    /** services section end */




    /** contact section start */
.contact-sec {
        height: auto;
        margin-top: 3rem;
        padding-top: 15rem;
        padding-bottom:10rem ;
        /* padding: 20rem 2rem; */
    }

    .contact-heading {
        width: 100%; /* Heading width adjust ki */
    }

    .contact-heading h1 {
        font-size: 4rem;
    }

    .contact-sec .three-div {
        gap: 5rem; 
        justify-content: space-evenly;
        margin-top: 8rem;
    }

    .contact-sec .three-div .div-2 img {
        width: 25rem; 
    }




    /** services section end */


  }





/* Tablet Fix */
@media screen and (max-width: 1024px) {

.global-cursor{
  display: none;
  
}

nav img {
        width: 12rem;
    }
    nav ul {
        gap: 2rem;
    }
    nav ul li {
        font-size: 1.6rem;
    }

    /** home section start */

    .home-sec .main-text, 
    .home-sec .secondary-text,
    .home-sec button {
        margin-left: 0; /* Centers everything */
    }

    .home-sec .main-text h1 {
        font-size: 14rem;
    }

    .home-sec video {
        width: auto;
        height: 100%;
        object-fit: cover;
    }

    /** home section end */


    /** element section start */

    .counter-box {
        gap: 2rem;
    }

    .counter-box p {
        font-size: 4rem;
    }

    #day-count {
        font-size: 5rem;
        width: 14rem;
        height: 7rem;
    }

    /** element section end */


/** projects section start  */
.proj-sec {
        height: 120vh;
        padding-top: 5rem;
    }

    .proj-sec .click-text{
  display: inline;
}

    .proj-sec .heading h1 {
        font-size: 8rem;
    }

    /* Adjusting cards to stay within tablet bounds */
    .card {
        width: 17rem;
        height: 23rem;
    }



    .card1 { transform: translate(6vw, 15vh) rotate(-10deg); }
    .card2 { transform: translate(21vw, 22vh) rotate(-10deg); }
    .card3 { transform: translate(36vw, 29vh) rotate(-10deg); }
    .card4 { transform: translate(51vw, 36vh) rotate(-10deg); }
    .card5 { transform: translate(66vw, 43vh) rotate(-10deg); }
    .card6 { transform: translate(81vw, 50vh) rotate(-10deg); }

    /* Ticker adjustments for Tablet */
    .ticker-stage {
        bottom: 25vh;
        left: 5vw;
        height: 240px;
    }

    .ticker-list li {
        font-size: 3.5rem;
        height: 80px;
        line-height: 80px;
    }

    @keyframes tickerScroll {
        0% { transform: translateY(0); }
        100% { transform: translateY(-320px); } /* 80px * 4 items */
    }


/** projects section end  */


/** testimonials section start  */
.test-sec {
        height: auto;
        margin-bottom: 8rem;
    }

    .test-sec .heading h1 { font-size: 5rem; }

    .t-vid-sec {
        width: 90%;
        border: none;
    }

    .word-box {
        flex-direction: column; 
        align-items: center;
        height: auto;
        margin-top: 8rem;
        gap: 5rem;
    }

    .test-word {
        width: 80%;
        padding: 5rem 3rem;
    }

    .test-p-sec {
        width: 90% !important;
        font-size: 2rem;
        text-align: center;
    }

    .test-img-sec{
width: 8rem;
margin-top: 3rem;
margin-bottom: 3rem;
}

.test-img-sec img{
width: 100%;
}

    .brand-slider { height: 25rem; }
    .brand-track img { height: 12rem; }




/** testimonails section end  */


     /**services section start  */
.serv-sec {
    height: auto;
    padding-top: 3rem;
    margin-right: 4rem;
    /* margin-bottom:-20rem ; */
  }

  .serv-sec .heading h1 {
    font-size: 6rem;
  }

  .serv-sec .heading {
    margin-bottom: 5rem;
  }

  .serv-sec .cards{
    flex-direction: column;
    margin-right: 1.5rem;
  }

  /* Switching to 1 Column for Tablet */
  .serv-sec .top-cards, 
  .serv-sec .below-cards {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
    
  }

  .serv-sec img {
    max-width: 550px; /* Making cards look bold on tablet */
  }

  /* Showing help text for touch devices */
  .serv-sec .click-text {
    display: block;
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    font-family: var(--secondary-text);
  }

    /**services section end  */

    /** operate section start */

    .op-sec{
      height: 130vh;
      
    }

    .op-cards {
        flex-wrap: wrap; 
        gap: 4rem;
        padding: 0 2rem;
    }

    .op-card {
        width: 35rem; 
    }
    /** operate section end */



    /** contact section start */
.contact-sec {
        height: auto;
        padding-top: 6rem;
        padding-bottom: 4rem;
    }

    .contact-heading h1 {
        font-size: 3.5rem;
        
    }

    .contact-heading{
      margin-bottom: 6rem;
    }

    /* Footer elements ko stack kiya */
    .contact-sec .three-div {
        flex-direction: column; 
        gap: 6rem;
        margin-top: 6rem;
        text-align: center;
    }

    .contact-sec .three-div .div-1,
    .contact-sec .three-div .div-2,
    .contact-sec .three-div .div-3 {
        width: 100%;
        text-align: center;
    }

    .contact-sec .three-div .div-2 img {
        width: 20rem; 
        display: none; 
    }
    
    .contact-sec .three-div .div-2 {
        order: -1; 
        text-align: center;
    }    

    /** contact section end */
}
    
/* Mobile Fix */
@media screen and (max-width: 700px) {

  body{
    overflow-x: hidden;
  }

  nav {
        height: 7rem;
        padding: 0 1rem;
    }
    nav ul li{
     
        display: none; 
    }

    nav img {
        width: 10rem;
    }
    .contact-btn button {
        padding: 0.8rem 1.5rem;
        font-size: 1.4rem;
    }

/** home section start */

    .home-sec .main-text h1 {
        font-size: 10rem;
        margin-bottom: 2rem;
    }

    .home-sec .secondary-text h2 {
        font-size: 3rem;
        letter-spacing: 0.10rem;
    }

    .home-sec .secondary-text span{
      font-size: 3rem;
    }

    .home-sec video {
        width: 100%;
        height: 100%;
        left: 50%;
        transform: translateX(-50%); /* Centers the video horizontally on vertical phones */
    }

    .home-sec button{
      padding: 2.2rem 3.5rem;
      font-size: 1.5rem;
      letter-spacing: .1rem;
    }

    /** home section end */

    /** element section start */
  .elem-sec {
        height: auto;
        padding: 2rem 1rem;
    }

    .counter-box  {
      
        flex-direction: column; /* Stack number and text vertically */
        gap: 1.5rem;
    }

    .counter-box p {
        font-size: 2rem;
        text-align: center;
        line-height: 1.2;
    }

    #day-count {
        font-size: 5rem;
        width: 15rem;
        height: 8rem;
    }

    /** element section end */

    /** projects section start */
    .proj-sec {
        height: auto; /* Allow section to grow with cards */
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

        .proj-sec .click-text{
  display: inline;
}

    .proj-sec .heading {
        position: relative;
        left: 0;
        transform: none;
        margin-bottom: 3rem;
    }

    .proj-sec .heading h1 {
        font-size: 5rem;
    }

    /* Cards Layout: Vertical Stack */
    .card-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        transform: none !important;
    }

    .card {
        position: relative !important; /* Breaks the absolute overlap */
        width: 85vw !important;
        height: 35rem !important;
        transform: none !important;
        left: 0 !important;
        top: 0 !important;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.4);
    }
    
    .card:hover {
        transform: scale(1.05) !important;
    }

    /* Ticker adjustments for Mobile */
    .ticker-stage {
        position: relative !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 180px !important;
        margin-top: 5rem;
        -webkit-mask-image: none; /* Mobile par clean text behtar lagta hai */
        mask-image: none;
    }

    .ticker-list li {
        font-size: 2.5rem;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    @keyframes tickerScroll {
        0% { transform: translateY(0); }
        100% { transform: translateY(-240px); } /* 60px * 4 items */
    }
    /** projects section end */


    /** testimonials section start */

.test-sec{
  padding-top: 10rem;
}
    .test-sec .f-img {
        display: none;
    }

    .test-sec .heading h1 { font-size: 3.5rem; }

    .t-vid-sec {
        width: 95%;
    }

    .t-text h3 {
        font-size: 1.8rem;
        gap: 1rem;
    }

    .t-text h3 .dash { font-size: 3rem; }

    .word-box {
        margin-top: 5rem;
        gap: 3.5rem;
    }

    .test-word {
        width: 95%;
        padding: 4rem 2rem;
    }

    .test-word h3 { font-size: 2rem; }

    .test-p-sec {
        font-size: 1.6rem;
    }

    .test-img-sec{
width: 8rem;
margin-top: 3rem;
margin-bottom: 3rem;
}

.test-img-sec img{
width: 100%;
}

    .brand-slider { height: 18rem; }
    .brand-track img { height: 9rem; }

    /** testimonials section end */

     /**services section start  */
.serv-sec {
    padding-top: 4rem;
  }

  .serv-sec .heading h1 {
    font-size: 3.5rem;
  }

  .serv-sec .heading {
    margin-bottom: 4rem;
  }

  .serv-sec .cards{
    flex-direction: column;
  }

  /* Full width stack for mobile */
  .serv-sec .top-cards, 
  .serv-sec .below-cards {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
  }

  .serv-sec img {
    width: 90vw;
    max-width: 100%;
  }

  /* Disabling hover scale on mobile to prevent layout jumps */
  .serv-sec img:hover {
    scale: 1;
  }

  .click-text {
    font-size: 1.5rem;
  }

    

    /**services section end  */

     /** operate section start */

     .op-sec {
        margin-top: 2rem;
        padding: 4rem 1rem;
        height: auto;
        overflow: visible; /* Prevent text from getting cut off */
    }

    .op-cards {
        flex-direction: column; /* Stack cards vertically */
        align-items: center;
        gap: 2.5rem;
    }

    .op-card {
        width: 90vw; /* Responsive width for phone screens */
        height: auto; /* Let card height adapt to text length */
        min-height: 42rem;
        padding-bottom: 3rem;
    }

    .op-card .bg-heading {
        font-size: 4rem; /* Slightly smaller for mobile */
        left: 50%;
        transform: translateX(-50%); /* Center the "Phase" text */
        top: 3rem;
    }

    .c-heading {
        margin-top: 10rem; /* Adjust for smaller card size */
        width: 60%;
    }

    .c-para {
        width: 60%;
        font-size: 2rem;
        
    }
    
    .op-sec .heading {
        margin-bottom: 5rem;
    }

    /** operate section start */

}