* {box-sizing: border-box;}
html {scroll-behavior: smooth;}
body{margin: 0; font-family: 'Bricolage Grotesque', sans-serif; background-color: #000000; color: #ffffff;}
/* -----------------------------------------------------Hero Section ------  */
.heroSection {
  padding-left: 50px;
  padding-right: 50px;
  overflow: hidden;
}
.header-txt{
  font-size: 38vw;
  padding: 0;
  margin-top: -5vw;
  opacity: 0.3;
  padding-bottom: 0.5rem;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:#ffffff;
}
.spanHeadText {
  margin-top: -40vw;
  margin-bottom: 20vw;
  font-size: 3vw;
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
  z-index: 4;
  font-style:oblique;
}
.anim-txt::after{
  content: "";
  border-right: 2px solid #4267B2;
  animation: txt-anim-two .6s linear infinite;
}
.anim-txt::before{
  content: "";
  animation: txt-anim-one 12s infinite;
}
@keyframes txt-anim-one {
  0%, 24%{ content: ""; }
  1%, 23%{ content: "w"; }
  2%, 22%{ content: "we"; }
  3%, 21%{ content: "web"; }
  4%, 20%{ content: "webs"; }
  5%, 19%{ content: "websi"; }
  6%, 18%{ content: "websit"; }
  7%, 17%{ content: "website"; }
  9%, 16%{ content: "websites"; }

  29%, 58%{content: "";} 
  30%, 57%{content: "m";}
  31%, 56%{content: "mo";}  
  32%, 55%{content: "mob";}
  33%, 54%{content: "mobi";}  
  34%, 53%{content: "mobil";} 
  35%, 52%{content: "mobile";} 
  36%, 51%{content: "mobile ";} 
  37%, 50%{content: "mobile a";} 
  38%, 49%{content: "mobile ap";} 
  39%, 48%{content: "mobile app";} 
  40%, 47%{content: "mobile apps";} 

  60%, 85%{content: "";} 
  61%, 84%{content: "s";} 
  62%, 83%{content: "so";} 
  63%, 82%{content: "sof";} 
  64%, 81%{content: "soft";} 
  65%, 80%{content: "softw";} 
  66%, 79%{content: "softwa";} 
  67%, 78%{content: "softwar";} 
  68%, 77%{content: "software";}
  69%, 76%{content: "softwares";}  
}
@keyframes txt-anim-two {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.heroSection video{
  position: absolute;
}
/* ------------------------------------------------- sec-one-box -------- */
.sec-one-box{
  padding:100px 50px 60px 50px;
  position: relative;
}
.sec-one-box mark{
  background:none; 
  color: #4267B2;
  font-size: 3vw;
  font-style: italic;
}
.sec-one-title{
  opacity: 0;
}
.main-title-h2-one{
  color: #4267B2;
  font-size: 4vw;
  font-weight: 800;
}
.supporting-h5-one{
  margin-top: -4vw;
  color: #ffffff;
  font-size: 1.5vw;
  text-decoration: underline;
  font-weight: 600;
}
.sec-one-box p{
  font-size: 2vw;
  color: #ffffff;
}
.para-part-one, .para-part-two, .para-part-three, .para-part-four, .para-part-five{
  opacity: 0.1;
}
/* ---------------------------------------------- sec-two-box -------------- */
.sec-two-box{
  margin-inline: 50px;
  padding-block: 80px;
  border-radius: 15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
 background-image: url(images/colorBlast.jpg);
  background-size: cover;
  background-attachment: fixed;
  overflow: hidden;
  column-gap: 25px;
}
.sec-two-box a{
  text-decoration: none;
}
.card{
  transform: translateX(-50px);
  opacity: 0;
  border-radius: 18px;
  width: 270px;
  background: rgba(255, 255, 255, 0.993);
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
  text-align: center;
  cursor: pointer;
}
.card img{
  width: 100%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.card-text{
  padding-inline: 20px;
}
.card-text h2{
  padding: 0;
  margin: 5px;
  font-size: 28px;
  color: #4267B2;
}
.date{
  margin-top: -10px;
  color: #ff0266;
  font-size: 13px;
  font-weight: 200;
}
.card-text p{
  color: gray;
  font-size: 15px;
  font-weight: 300;
}
.card-stats{
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: #4267B2;
}
.stat{
  text-align: center;
  color: white;
  padding-block: 10px;
}
.value{
  font-size: 22px;
  font-weight: 500;
}
.type{
  font-size: 11px;
  font-weight: 300;
}
/* --------------------------------------------------sec-three-box -----------  */
.sec-three-box {  
  display: grid;
  grid-template-columns: 25% 70%;
  gap: 50px;
  padding-top: 50px;
  padding-bottom: 60px;
  margin-inline: 50px;
}
.main-title-h2{
  color: #4267B2;
  font-size: 2vw;
  font-weight: 800;
}
.supporting-h5{
  margin-top: -1.5vw;
  color: #f7f7f7;
  font-size: 1.2vw;
  text-decoration: underline;
  font-weight: 600;
}
.sec-three-box p{
  font-size: 1.3vw;
}
.imgOne {
  width: 100%;
  height: 20vw;
  background-image: url(images/InstaPostFive.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.imgTwo {
  width: 100%;
  height: 20vw;
  background-image: url(images/InstaPostOne.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.imgThree {
  width: 100%;
  height: 20vw;
  background-image: url(images/InstaPostFour.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.imgFour {
  width: 100%;
  height: 20vw;
  background-image: url(images/InstaPostSeven.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.imgFive {
  width: 100%;
  height: 20vw;
  background-image: url(images/InstaPostSix.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.imgSix {
  width: 100%;
  height: 250px;
  background-image: url(images/InstaPost8.png);
  background-size:cover;
  background-repeat: no-repeat;
}
.main {
  margin-right: 50px;
}
.andapp {
  width: 100%;
  background:linear-gradient(90deg, #4267B2, #cf2b2b, #7c8581);
  height: 15vw;
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.andapp img{
  width: 18vw;
  height: 30vw;
  transition: .5s ease;
}
.andapp img:hover{
  transform: scale(1.1);
}
.textmargin{
  margin-top: 14vw;
  font-style: oblique;
  color: #4267B2;
}
.textmargin-two{
  font-style: oblique;
  color: #4267B2;
}
.textmargin-three{
  font-style: oblique;
  color: #4267B2;
}
.cadImg {
  background-image: url(images/caddraw.jpg);
  background-size:cover;
  background-repeat: no-repeat;
  height: 18vw;
  width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
/* --------------------------------------------------------sec-four-box ---  */
.sec-four-box{
    background: url(images/frti.jpg);
    background-size: cover;
    background-attachment: fixed;
    margin-inline: 50px;
    margin-top: 30px;
    border-radius: 15px;
    transform: translateX(50px);
    opacity: 0;
}
.sec-four-box-color{
  display: flex;
  flex-wrap: wrap;
  gap: 5%;
  background-color: #070707b2;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  border-radius: 15px 450px 15px 15px;
  padding: 60px 40px 60px 40px;
  justify-content: center;
  align-items: center;
}
.sec-four-box-color span{
  flex: 50%;
  color: white;
  text-align: center;
  font-size: 4vw;
}
.formitself{
  flex: 30%;
  color: white;
  text-align: center;
  z-index: 10;
}
fieldset{
  border-radius: 10px;
  background-color: #0000002a;
}
.formitself input, select{
  width: 85%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 4px;
  background-color: rgba(255, 255, 255, 0.555);
  border-radius: 5px;
}
.formitself .subbtn, .formitself .resetbtn{
  width: 42%;
  background-color: transparent;
   color: #ffffff;
   transition: .6s ease;
}
.formitself .subbtn:hover, .formitself .resetbtn:hover{
  background-color: rgba(165, 42, 42, 0.836);
}
.sucessStyle{
  background-color: chartreuse;
  color: black;
  border-radius: 6px;
  }
/* ------------------------------------------------sec-video-box ------- */
    .sec-video-box{
      font-size: larger;
      margin-block: 60px;
      margin-inline: 50px;
      text-align: center;
      transform: translateX(50px);
    opacity: 0;
        }
        .sec-video-box-child{
          text-align: center;
          padding-top: 30px;
        }
        .sec-video-box-child iframe{
          width: 40vw;
          height: 23vw;
          z-index: 10;
        }
/* ---------------------------------------------------------bsLocation ----- */
.bsLocation{
  text-align: center;
  margin-inline: 50px;
  margin-bottom: 60px;
  transform: translateX(-50px);
  opacity: 0;
}
.bsLocationBack{
  display: flex;
  flex-wrap: wrap;
  margin-top: 60px;
  border-radius: 15px;
  background-image: url(images/city.jpg);
  background-size: cover;
  background-color: #070707bd;
  background-blend-mode: overlay;
  background-attachment: fixed;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  align-items: center;
}
.mapIframe{
  flex: 40%;
  height: 29vw;
  width: 100%;
  border-radius: 15px 0 0 15px; 
  margin: 5px;
  background-image: url(images/map.png);
  background-size: cover;
}
.contactInfo{
  flex: 40%;
  color: #ffffff;
}
.contactInfo span{
  font-size: 4vw;
}
.contactInfo p{
  font-size: 15px;
  margin-left: 50px;
  text-align: left;
}



/* ------------------------------------------------------screen 1219px ----  */
  @media (max-width:1219px) {
    .sec-two-box{
      padding-top: 50px;
      padding-bottom: 50px;
      height: unset;
      column-gap: 20px;
      row-gap: 20px;
    }
  }



  /* -----------------------------------------------------  screen 800px ---   */
  @media screen and (max-width: 800px) {

/* ---------------------------------------------Hero Section 800px--  */
.heroSection {
  padding-left: 20px;
  padding-right: 20px;
}
.header-txt{
  font-size: 16vw;
  text-align: center;
  margin-top: 100px;
  opacity: 0.8;
}
.spanHeadText {
  margin-top: unset;
  margin-bottom: 0vw;
  font-size: 4vw;
}
.anim-txt::before{
  color: #4267B2;
}

/* ---------------------------------------------- sec-one-box 800px--- */
.sec-one-box{
  padding-left:20px;
  padding-right:20px;
}
.sec-one-box mark{
  font-size: 3vw;
}
.sec-one-title{
  opacity: 1;
}
.main-title-h2-one{
  font-size: 5vw;
}
.supporting-h5-one{
  font-size: 2.5vw;
}
.sec-one-box p{
  font-size: 2vw;
}
.para-part-one, .para-part-two, .para-part-three, .para-part-four, .para-part-five{
  opacity: 1;
}
/* --------------------------------------------- sec-two-box 800px------ */
.sec-two-box{
  margin-inline: 20px;
  background-attachment: unset;
  column-gap: 25px;
}
.card{
  transform: translateX(0px);
  opacity: 1;
}
/* ---------------------------------------sec-three-box 800px-----------  */
.sec-three-box {  
  grid-template-columns: auto;
  padding-bottom: 10px;
  margin-inline: 20px;
  gap: unset;
}
.main-title-h2{
  font-size: 5vw;
  line-height: 1;
}
.supporting-h5{
  margin-top: -2.5vw;
  font-size: 2.5vw;
}
.sec-three-box p{
  font-size: 2vw;
}
.imgOne {
  height: 70vw;
}
.imgTwo {
  height: 70vw;
}
.imgThree {
  height: 70vw;
}
.imgFour {
  height: 70vw;
}
.imgFive {
  height: 70vw;
}
.imgSix {
  height: 70vw;
}
.main {
  margin-right: 0px;
}
/* -----------------------------------------------sec-four-box -800px--  */
.sec-four-box{
    margin-inline: 20px;
    transform: translateX(0px);
    opacity: 1;
    background-attachment: unset;
}
.sec-four-box-color span{
  flex: 100%;
}
.formitself{
  flex: 100%;
}
/* ------------------------------------------------sec-video-box 800px----- */
.sec-video-box{
  transform: translateX(0px);
  margin-inline: 20px;
  text-align: left;
  opacity: 1;
    }
    .sec-video-box-child iframe{
      width: 70vw;
      height: 42vw;
    }
/* ---------------------------------------------------bsLocation 800px----- */
.bsLocation{
  text-align: left;
  margin-inline: 20px;
  transform: translateX(0px);
  opacity: 1;
}
.contactInfo span{
  display: block;
  text-align: center;
}
  }




  /* --------------------------------------------------------screen 750px ---  */
  @media screen and (max-width: 715px) {
   /* ---------------------------------------------------bsLocation 750px----- */

.mapIframe{
  flex: 100%;
  border-radius: 15px; 
  height: 40vw;
}
.contactInfo{
  flex: 100%;
  margin-top: 5vw;
  height: 29vw;
}
.contactInfo span{
  font-size: 5vw;
}
.contactInfo p{
  margin-left: 20px;
}
  }




  /* ------------------------------------------------------ screen 550 px ---  */
  @media screen and (max-width: 550px) {
    .heroSection{
      background-image: url(images/a2.jpg);
      background-color: #000000b6;
      background-blend-mode: overlay;
      background-size: cover;
      background-repeat: no-repeat;
      padding-bottom: 50px;
    }
    .header-txt{
      font-size: 16vw;
      opacity: 1;
    }
    .spanHeadText {
      margin-top: -13vw;
      margin-inline: 20px;
    }
/* ---------------------------------------------- sec-one-box 550px--- */
.sec-one-box{
  padding-top:20px;
  position: relative;
}
.sec-one-box mark{
  font-size: 5vw;
  color: burlywood;
}
.main-title-h2-one{
  font-size: 8vw;
}
.supporting-h5-one{
  font-size: 4.5vw;
}
.sec-one-box p{
  font-size: 4vw;
}
/* --------------------------------------------- sec-two-box 550px------ */
.sec-two-box{
  margin-inline: 0px;
}
/* ---------------------------------------sec-three-box 550px-----------  */
.main-title-h2{
  font-size: 8vw;
}
.supporting-h5{
  font-size: 4.5vw;
}
.sec-three-box p{
  font-size: 4vw;
}
/* -----------------------------------------------sec-four-box 550px------  */
.sec-four-box-color{
  padding: 20px 10px 20px 10px;
}
.sec-four-box-color span{
  font-size: 8vw;
  background-color: #0000009f;
}
/* ------------------------------------------------sec-video-box 550px----- */
.sec-video-box{
  margin-top: 30px;
  margin-inline: 10px;
    }
    .sec-video-box-child iframe{
      width: 83vw;
      height: 45vw;
    }
/* ---------------------------------------------------bsLocation 550px----- */
.bsLocationBack{
  background-attachment: unset;
}
.contactInfo{
  margin-top: 5vw;
  height: 40vw;
}
.contactInfo span{
  font-size: 8vw;
}
.contactInfo p{
  font-size: 4vw;
}
  }