.strategy h3, h4{font-family: sans-serif;}
  .fixed_navbar {
  bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  left: 30%;
  width: 40%;
  border-radius: 50px;
  background-color: #343a40 !important;
  color: white;

  /* 3D curve effect */
  box-shadow: 
    6px 6px 16px rgba(0,0,0,0.6),   /* dark shadow */
    -6px -6px 16px rgba(255,255,255,0.1); /* light edge */
  
  z-index: 99;
  transition: all 0.3s ease-in-out;
}

.fixed_navbar:hover {
  box-shadow: 
    4px 4px 12px rgba(0,0,0,0.6),
    -4px -4px 12px rgba(255,255,255,0.15);
}

.fixed_navbar ul li a {
  color: #c8c8c8;
  font-size: 1.1rem;
  transition: color 0.2s ease-in-out;
}

.fixed_navbar ul li a:hover {
  color: #ffffff;
}

.header{z-index: +99; background: rgba(255, 255, 255, 0.15); /* transparent white */
      backdrop-filter: blur(4px); /* glass blur */}


.roboto-mono-t {
  font-family: "Dancing Script", monospace;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.banner-txt-row
{
    position: relative;
    left: 13%;
    z-index: +11;
}

  .banner_txt
{
  font-family: "ariel", sans-serif;
/*  font-size: 70px!important;*/
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.05em;
  line-height: 0%;
  text-decoration: none;
  text-transform: none;
  color: Gray;
}
.banner_txt h2{font-size: 45px}
.banner_txt h2 span{color: white}
.banner_txt img{ border-radius:50px; width: 75px; height: 45px;}
.banner_txt p{font-family: none}


.soft-btn {
  font-family: none;
    background: black;
    border: none;
    border-radius: 50px;
    padding: 20px 40px;
    font-size: 1.2rem;
    /* font-weight: 600; */
    color: #f3f3f3;
    cursor: pointer;
    box-shadow: 5px 5px 12px #1c1c1c, -20px 1px 17px -14px #3e3e3e;
    transition: all 0.2s ease-in-out;
    }

    .soft-btn:active {
      box-shadow: 
        inset 5px 5px 12px #1c1c1c, 
        inset -5px -5px 12px #3e3e3e;
    }

    .black_dot
    {
      width: 8px;
      height: 8px;
      background-color: white;
      display: block;
      border-radius: 50px;
    }
    .laptop_bg
    {
      background-image: url('media/laptop_mock.png');
      background-size: cover; /* or 'contain' depending on your image */
      background-repeat: no-repeat;
      background-position: top center;
      width: 400px;       /* adjust as needed */
      height: 500px;
    }
    .mobile_bg
    {
      background-image: url('media/mobile_mock.png');
      background-size: cover; /* or 'contain' depending on your image */
      background-repeat: no-repeat;
      background-position: top center;
/*      width: 400px;       /* adjust as needed */
      height: 415px;
    }
    .laptop-scroll-container {
          height: 211px;
          border: 2px solid #333;
          background-size: cover;
          background-repeat: no-repeat;
          background-position: top center;
          transition: background-position 2s linear;
          margin-top: 25%;
    }

    .laptop-scroll-container:hover {
      background-position: bottom center; /* scroll to bottom */
      transition: background-position 15s linear;
    }
    .mobile-scroll-container {
      height: 389px;
      width: 46%;
      margin-left: 27%;
      margin-top: 4%;
      border-radius: 20px;
      z-index: -1;
      position: relative;
      border: 2px solid #333;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: top center;
      transition: background-position 2s linear;
    }

    .mobile_bg:hover .mobile-scroll-container {
      background-position: bottom center; /* scroll to bottom */
      transition: background-position 15s linear;
    }
    .project_detail b{
      position: absolute;
    font-size: 20rem;
    z-index: -30;
    color: rgb(100 96 96 / 10%);
    }

    .progress_bar_row label{font-family: none;
    font-weight: 600;}

    .strategy label
    {
      color: #b6a7a7;
    }





/*    Services CSS*/
:root {
  --rotate-speed: 40;
  --count: 8; /* Default count, the DOM element should override this */
  --easeInOutSine: cubic-bezier(0.37, 0, 0.63, 1);
  --easing: cubic-bezier(0.000, 0.37, 1.000, 0.63);
}
.void {
  width: 200%;
  max-width: 900px;
/*  margin: auto;*/
  position: relative;
  aspect-ratio: 1 / 1;
  left: -70%;
}
.void ul:hover * {
  animation-play-state: paused;
}
.void ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  outline: 2px dotted magenta;
  z-index: 1;
}
.void li {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
/*  outline: 2px dashed cyan; */
  width: 100%;
  animation: rotateCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
.void .card {
  width: 27%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 24px;
  gap: 8px;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1), 0px 16px 32px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #535062;
  animation: rotateCCW calc(var(--rotate-speed) * 1s) var(--easing) infinite;
}
.void a {
  text-decoration: none;
  color: unset;
}
.model-name {
  font-weight: 500;
  font-size: 18px;
  line-height: 150%;
  color: #3B2ED0;
  display: block;
}
.void svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}

.void li:nth-child(2), .void li:nth-child(2) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -1s);
}
.void li:nth-child(3), .void li:nth-child(3) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -2s);
}
.void li:nth-child(4), .void li:nth-child(4) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -3s);
}
.void li:nth-child(5), .void li:nth-child(5) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -4s);
}
.void li:nth-child(6), .void li:nth-child(6) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -5s);
}
.void li:nth-child(7), .void li:nth-child(7) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -6s);
}
.void li:nth-child(8), .void li:nth-child(8) .card {
  animation-delay: calc((var(--rotate-speed)/var(--count)) * -7s);
}

@keyframes rotateCW {
  from {
    transform: translate3d(0px, -50%, -1px) rotate(-45deg);
  }
  to {
    transform: translate3d(0px, -50%, 0px) rotate(-315deg);
  }
}
@keyframes rotateCCW {
  from {
    transform: rotate(45deg);
  }
  to {
    transform: rotate(315deg);
  }
}
@keyframes pulseGlow {
  from {
    background-size: 60%;
  }
  to {
    background-size: 100%;
  }
}

.center-circle {
  position: absolute;
  width: 230px;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.second-circle {
  position: absolute;
  width: 40%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #F5F4FE;
  opacity: 0.5;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.last-circle {
  position: absolute;
  width: 66%;
  aspect-ratio: 1 / 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #F5F4FE;
  opacity: 0.25;
  box-shadow: 0px 18px 36px -18px rgba(12, 5, 46, 0.3), 0px 30px 60px -12px rgba(12, 5, 46, 0.25);
  border-radius: 50%;
}
.crop {
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1));
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 50%;
  animation: pulseGlow 5s linear infinite alternate;
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-image: radial-gradient(100% 50% at 100% 50%, rgba(60, 26, 229, 0.25) 0%, rgba(60, 26, 229, 0.247904) 11.79%, rgba(59, 26, 229, 0.241896) 21.38%, rgba(58, 26, 229, 0.2324) 29.12%, rgba(57, 26, 229, 0.219837) 35.34%, rgba(55, 26, 229, 0.20463) 40.37%, rgba(53, 26, 229, 0.1872) 44.56%, rgba(51, 26, 229, 0.16797) 48.24%, rgba(48, 26, 229, 0.147363) 51.76%, rgba(46, 26, 229, 0.1258) 55.44%, rgba(44, 26, 229, 0.103704) 59.63%, rgba(41, 26, 229, 0.0814963) 64.66%, rgba(39, 26, 229, 0.0596) 70.88%, rgba(36, 26, 229, 0.038437) 78.62%, rgba(34, 26, 229, 0.0184296) 88.21%, rgba(32, 26, 229, 0) 100%);
}
.mask:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0;
  display: block;
  background-image: linear-gradient(180deg, rgba(60, 26, 229, 0) 0%, #3C1AE5 50%, rgba(60, 26, 229, 0) 100%);
}
.contact_div
 {
    border: 1px solid #4d4d4d;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    box-shadow: 2px 5px 13px -3px gray;
    margin-left: 30px;
}
input:focus, textarea:focus{background: linear-gradient(-30deg, #1d1a19 0px, #282322 100%);}
.main_img_circle {
    position: absolute;
    right: 30px;
    width: 400px;
    height: 400px;
    background-image: url(https://images.unsplash.com/photo-1554118811-1e0d58224f24?fm=jpg&w=3000&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGNhZmUlMjBleHRlcmlvcnxlbnwwfHwwfHx8MA%3D%3D);
    border-radius: 50%;
    background-position: center;
    background-size: cover;
    box-shadow: 0px 0px 12px -6px black;
    animation-delay: 0.6s;
}
.img-circle-top
 {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 25px solid #212529;
    transform: translate(-190px, -100px);
    animation-delay: 1.2s;
}
.img-circle-bottom
 {
    width: 200px;
    height: 200px;
    background-color: #212529;
    border-radius: 50%;
    transform: translate(-52px, 70px);
    animation-delay: 0.9s;
}

footer h1{font-size: 8rem}
footer span{
  width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-family: monospace;
    color: gray;
}
footer a{
  text-decoration: none; 
  color: black; 
}
footer i
{
  display: flex;
  justify-content: center;
  gap :30px;
  margin-top: 1.5rem;
}
footer i hr{
    margin: 0;
    height: 0px;
    margin-top: auto;
    margin-bottom: auto;}

.strategy col-sm-3{height:450px}



















/*Media Query*/

@media only screen and (max-width: 1025px) {
  .banner_txt h2{font-size: 32px}
  .fixed_navbar{width: 50%; left: 25%}
  .laptop_bg{width: 33%; height: 300px;}
  .mobile_bg{height: 250px;width: 33%; background-size: contain;}
  .laptop-scroll-container
  {
    margin-top: 20%;
        margin-left: 8%;
        width: 228px;
        height: 129px;
        border-radius: 4px;
  }
  .mobile-scroll-container
  {
    height: 230px;
    width: 40%;
    margin-left: 30%;
    border-radius: 10px;
  }
  .project_detail {width:33%}
  .b-7 {
      font-size: 15rem!important
    }

    .b-ghoomtara {
      font-size: 3.5rem!important
    }

    .b-mansar {
      font-size: 5rem!important
    }
    .strategy .col-lg-3{height: 520px}
    .main_img_circle{width:300px; height:300px;}
    footer h1 {font-size: 6rem;}
    footer span{width: 70%}
    .void{max-width: 800px}
    .service_content_div{padding: 0px 30px}
}

@media only screen and (max-width: 770px) {
  .fixed_navbar{display:none;}
  .cdpn-mobile-menu{display: block}
  .banner_txt h2{font-size: 25px}
  .banner_txt p{font-size: 15px; line-height:15px}
  .laptop_bg{height: 250px;}
  .mobile_bg{height: 180px}
  .laptop-scroll-container 
  {
    margin-top: 24%;
    margin-left: 2%;
    width: 187px;
    height: 106px;
    border-radius: 4px;
  }
  .mobile-scroll-container{height: 164px}
  .b-ghoomtara{font-size: 2.7rem !important;}
  .b-mansar {font-size: 4rem !important;}
  .strategy .col-lg-3{height: 450px}
  .strategy .col-lg-3:nth-child(3), .strategy .col-lg-3:nth-child(4){margin-top:20px}
  .services_container_row
  {
    display: flex;
    flex-direction: column-reverse;
  }
  .void {max-width: 1000px;}
  .contact_div{margin-top: 70px; margin-left:0px}
  .main_img_circle {display:none}
  /*#contact_div{margin:0px}*/
  .contact_detail_row{padding-left:0px!important}
  .contact_div_col{width:100%!important}
  .contact_div_col{padding-right: 0px}
  .contact_div_col .col-sm-6:nth-child(2){display: flex; justify-content: end;padding-right: 0px}
}

@media only screen and (max-width: 500px) 
{
  .cdpn-mobile-menu{display: none}
.banner-container{overflow-x:hidden}
.void{left: -100%!important;}
.banner-txt-row{left:0px; position: absolute;min-height:450px!important}
.banner_txt h2{font-size:20px}
.banner_txt{letter-spacing: 0em}
.video_bg_div{left: 30%; min-height: 450px!important}
.laptop_bg{width:50%}
.mobile_bg{width:50%}
.project_detail{width:100%}
.laptop-scroll-container{margin-left:-8%; margin-top: 28%;width: 181px;height: 108px;border-radius: 0px;}
.mobile-scroll-container{width: 48%;margin-left: 26%;height: 166px;border-radius: 2px}
.project_detail b{display:none}
.strategy section p{font-size: 13px}
.contact_div{margin-top:30px; margin-right: 0px}
/*.contact_div{margin:0px; padding:0px}*/
.contact-row{padding:10px}
.badge{padding:0.6rem!important}
footer{height: 400px}
footer h1{font-size: 3rem}
footer span{width:100%; font-size: 14px}
footer i{gap:15px}
footer a{font-size: 14px}
.cdpn-mobile-menu__toggle{position: initial;}
}