*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--dark-blue: #002C60;
--blue-color: #00387A;
--sky-blue: #6ECEF6;
/*--light-color: #E5EEF6;*/
--orange-color: #E12454;
--black-color: #000;
--white-color: #fff;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
/*.container{*/
/*padding: 0px;*/
/*}*/
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span{
color: var(--orange-color);
}

.underline-left , .underline-right {
display: inline-block;
position: relative;
padding: 5px;
}
.underline-left::after {
content: "";
position: absolute;
top: 26px;
bottom: 0;
left: 0;
width: 55%; 
border-bottom: 2px solid var(--orange-color);
}
.underline-right::after {
content: "";
position: absolute;
top: 26px;
bottom: 0;
right: 0;
width: 55%; 
border-bottom: 2px solid var(--orange-color);
}
p{
    font-size: 17px;
}
.light-color{
background-color: var(--light-color);
}
/*-------------modal-----------*/
.modal .modal-content{
width: 160%; 
transform: translateX(-15%); 
margin-top: 20%;
}
.modal .left{
background-color: var(--blue-color); 
color: var(--white-color);
border: 3px solid var(--sky-blue);
}
.modal .right{
background-color: var(--light-color);
border: 3px solid var(--sky-blue);
}
.modal-form input, .modal-form textarea{
margin-bottom: 15px;
padding: 10px 20px;
/*width: 20rem;*/
border: 1px solid;
}
.modal-form button{
background-color: var(--orange-color);
border: none;
padding: 7px 13px;
color: var(--white-color);

}
.modal-form img{
background-color: var(--light-color);
border-radius: 13px;
}

/*-----------top bar------------*/
.top {
  background-color: var(--white-color);
}
.top .container {
  display: flex;
  justify-content: space-between;
}
.top a,
.top i {
  color: var(--blue-color);
}
.top a:hover {
  color: var(--sky-blue);
}
.top img {
  color: var(--white-color);
  padding: 5px 10px;
}
.top .trial-btn {
  background-color: var(--orange-color);
  clip-path: polygon(16% 0, 100% 0%, 100% 84%, 0 84%);
  width: 330px;
  text-align: center;
  line-height: 50px;
}
.top .trial-btn a {
  color: var(--white-color);
}

/*----------- top header end------------*/

/*--------------build-hero start--------------*/
.build-hero {
  background-color: var(--blue-color);
  clip-path: polygon(0 0, 100% 0%, 100% 78%, 0 100%);
  height: 520px;
  position: relative;
}

.build-hero h1{
font-size: 51px;
font-family: "DM Serif Display", serif;
font-style: italic;
color: var(--white-color);
font-weight: 400;
font-style: normal;
letter-spacing: 7px;
margin-top: 50px;
}
.build-hero h1 span{
color: var(--sky-blue);
}
.build-hero h5 {
  color: var(--sky-blue);
  margin-top: 7px;
  font-size: 18px;
}
.build-hero .hero-img {
  color: var(--white-color);
  text-align: center;
}
.build-hero .hero-img img {
  background-color: var(--light-color);
  border-radius: 28px;
  border: 7px solid white;
}
.build-hero h6{
font-size: 18px;
font-style: italic;
color: var(--white-color);
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
.hero-form {
  margin-top: 30px;
  background-color: rgba(0, 0, 0, .5);
  color: white;
  width: 450px;
  border: 7px solid var(--orange-color);
  border-radius: 8px;
  padding: 20px;
  position: absolute;
  top: 120px;
  right: 60px;
}
.hero-form .form-item {
  display: flex;
}
.hero-form input,
.hero-form select,
.hero-form textarea {
  border: none;
  outline: none;
}
.hero-form .submit-btn input {
  background-color: var(--orange-color);
  color: var(--white-color);
  padding: 4px 25px;
  margin-top: 10px;
}

/*----------build-hero end----------*/

/*-----------hire best talent start----------*/
.hire-best-talent h5 {
  background-color: var(--light-color);
  padding: 3px;
  margin-bottom: 18px;
  border-radius: 20px;
  display: none;
}
.hire-best-talent span{
    margin-top: 8px;
}
.hire-best-talent a {
  background-color: var(--orange-color);
  color: var(--white-color);
  padding: 5px 15px;
}
.hire-best-talent .card {
  background-color: var(--sky-blue);
  color: var(--blue-color);
  border: 8px double var(--light-color);
}
.hire-best-talent .card:hover {
  background-color: var(--blue-color);
  color: var(--white-color);
}
.hire-best-talent .card:hover h5{
    display: block;
    margin-top: 15px;
    transition: 1s ease-in;
}
.hire-best-talent .card:hover h3, .hire-best-talent .card:hover i{
    display: none;
}
.hire-best-talent .card:hover a {
  background-color: var(--sky-blue);
  color: var(--blue-color);
  font-weight: 700;
}
.hire-best-talent .card:hover h5 {
  color: var(--blue-color);
}
/*-----------hire best talent end----------*/

/*-----------our services start----------*/
.our-services{
    background-color: var(--blue-color);
    color: var(--white-color);
  clip-path: polygon(3% 0, 97% 0%, 100% 100%, 0 100%);
}
.our-services li a{
 color: var(--white-color);
 font-size: 17px;
 font-weight: 600;
}
.our-services li{
  margin-bottom: 7px;
}
.our-services li a i{
  font-size: 18px;
  padding-right: 10px;
  color: var(--sky-blue);
}
.our-services li a:hover{
  color: var(--orange-color);
}
.our-services li a:hover i{
  padding-right: 16px;
}
/*---------our services end----------*/

/*-----------let help you start----------*/
.let-help-you{
    background-color: var(--blue-color);
}
.let-help-you a{
     color: var(--white-color);
}
/*-----------let help you end----------*/

/*---------data-security start----------*/
.data-security{
  background-color: var(--blue-color);
  color: var(--white-color);
}
.data-security img{
  background-color: var(--white-color);
  border-radius: 15px;
}
/*---------data-security end----------*/

/*---------benefits start--------*/
.ol-cards,
.ol-cards * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ol-cards {
  --flapWidth: 2rem;
  --flapHeigth: 1rem;
  --iconSize: 3rem;
  --numberSize: 3rem;
  --colGapSize: 2rem;
  
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  padding-inline-start: var(--flapWidth);
  font-family: sans-serif;
  color: #222;
  counter-reset: ol-cards-count;
  list-style: none;
}
.ol-cards > li {
width: 100%;
  display: grid;
  grid-template-areas:
    "icon title nr"
    "icon descr nr";
  gap: 0 var(--colGapSize);
  align-items: center;
  padding: var(--colGapSize) var(--flapWidth) var(--colGapSize) 0;
  border-radius: 1rem 5rem 5rem 1rem;
  background-image: linear-gradient(to bottom right, #e9eaec, #ffffff);
  counter-increment: ol-cards-count;
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
  box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
}

.ol-cards > li > .icon {
  grid-area: icon;
  background: var(--accent-color);
  color: white;
  font-size: var(--iconSize);
  width: calc(2 * var(--flapWidth) + var(--iconSize));
  padding-block: 1rem;
  border-radius: 0 5rem 5rem 0;
  margin-inline-start: calc(-1 * var(--flapWidth));
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25);
  position: relative;
  display: grid;
  place-items: center;
}
.ol-cards > li > .icon::before {
  content: "";
  position: absolute;
  width: var(--flapWidth);

  height: calc(100% + calc(var(--flapHeigth) * 2));
  left: 0;
  top: calc(var(--flapHeigth) * -1);
  clip-path: polygon(
    0 var(--flapHeigth),
    100% 0,
    100% 100%,
    0 calc(100% - var(--flapHeigth))
  );
  background-color: var(--accent-color);
  background-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.2)
  );
  z-index: -1;
}

.ol-cards > li > .title {
  grid-area: title;
  font-weight: 600;
  font-size: 1.5rem;
}
.ol-cards > li > .descr {
  grid-area: descr;
  font-size: 1.1rem;
}
.ol-cards > li::after {
  grid-area: nr;
/*  content: counter(ol-cards-count, decimal-leading-zero);*/
  color: var(--accent-color);
  font-size: var(--numberSize);
  font-weight: 700;
}
@media (max-width: 40rem) {
  .ol-cards {
    --flapWidth: 1rem;
    --flapHeigth: 0.5rem;
    --iconSize: 2rem;
    --numberSize: 2rem;
    --colGapSize: 1rem;
  }
}.ol-cards {
  /* Existing styles remain unchanged */
  grid-template-columns: repeat(2, 1fr); /* Add this line to create two columns */
}
@media (max-width: 976px){
   .ol-cards{
      grid-template-columns: repeat(1, 1fr);
   }
}
/*---------benefits end--------*/

/*----------start your 15 hrs free trial btn start----------*/
.start-free-trial-btn-first{
   background-color: var(--orange-color); 
   color: var(--white-color);
   font-size: 25px;
   
   border-radius: 28px;
}
.start-free-trial-btn-first:hover{
   background-color: var(--sky-blue); 
   color: var(--white-color);
   border-radius: 0px;
}
.start-free-trial-btn > a{
   background-color: var(--orange-color); 
   color: var(--white-color);
   font-size: 25px;
   margin-left: 55px;
   border-radius: 28px;  
}
.start-free-trial-btn a:hover{
   background-color: var(--sky-blue);
   color: var(--white-color);
   border-radius: 0px;
}
.start-free-trial-btn i{
background-color:green; 
color: var(--white-color);
}
/*----------start your 15 hrs free trial btn end----------*/

/*---------What Can You Expect Free Trial end--------*/
.infographic-cards {
  width: 100%;
  position: relative;
  display: flex;
  gap: 5%;
  justify-content: center;
  padding-left: 0px;
}
.infographic-cards li {
  list-style: none;
  width: calc(100% /4);
  height: 300px;
  padding: 20px 26px;
  background: #eee;
  position: relative;
  background-image: linear-gradient(to bottom right, #e9eaecda, #ffffff);
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.25));
  box-shadow: inset 2px 2px 2px white, inset -1px -1px 1px rgba(0, 0, 0, 0.25);
  text-align: center;
  display: inline-block;
  margin-bottom: 25px;
  border-radius: 20px;
}
.infographic-cards li h5 {
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 15px;
}
.infographic-cards li h6 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0;
}
.infographic-cards li.color-1 {
  border: 10px solid var(--orange-color);
}
.infographic-cards li.color-2 {
  border: 10px solid var(--blue-color);
}
.infographic-cards li.color-3 {
  border: 10px solid var(--sky-blue);
}
.infographic-cards li i {
  font-size: 35px;
  margin-bottom: 15px;
}
.infographic-cards li.color-1 i {
  color: var(--orange-color);
}
.infographic-cards li.color-2 i {
  color: var(--blue-color);
}
.infographic-cards li.color-3 i {
  color: var(--sky-blue);
}
.number-box {
  position: absolute;
  bottom: 0;
  padding: 15px;
  font-size: 23px;
  border-radius: 60px 60px 0 0;
  width: 60px;
  height: 50px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: inset 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.2), 0em 0.05em rgba(255, 255, 255, 0);
  font-weight: 800;
  color: #fff;
}
.infographic-cards li.color-1 .number-box {
  background: var(--orange-color);
}
.infographic-cards li.color-2 .number-box {
  background: var(--blue-color);
}
.infographic-cards li.color-3 .number-box {
  background: var(--sky-blue);
}
@media screen and (max-width:991px) {
  .infographic-cards {
    flex-wrap: wrap;
  }
  .infographic-cards li {
    flex: 0 0 auto;
    width: calc(100% /2.5);
  }
}
@media screen and (max-width:578px) {
  .infographic-cards li {
    width: calc(100% /1);
  }
  .infographic-cards {
    width: 80%;
    position: relative;
    display: flex;
    left: 50px;
    gap: 1%;
  }
}
/*----------What Can You Expect Free Trial end----------*/


/*----------how we work start-----------*/
.how-we-work{
    background-color: var(--blue-color);
    color: var(--white-color);
}
.how-we-work .container {
  text-align: center;
}
.how-we-work h5{
    color: var(--white-color) !important;
}
#nprogress-bar {
  -webkit-appearance: none;
  width: 700px;
  color: #CCC;
  height: 2px;
  margin: 0 auto;
}
#firsts,
#seconds,
#thirds,
#fourths {
  display: none;
}
#step span {
  height: 80px;
  width: 80px;
  border-radius: 100%;
  /*            border: 3px solid #CCC;*/
  background: var(--sky-blue);
  position: absolute;
  left: 0;
  color: #ffffff;
  top: -37px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
#step {
  height: 100px;
  width: 100%;
  position: relative;
}
#step span i {
  padding: 20px;
  text-align: center;
  font-size: 40px;
}
#step .firsts {
  left: calc(0% - -170px);
}
#step .seconds {
  left: calc(33.33% - -170px);
}
#step .thirds {
  left: calc(66.66% - -170px);
}
#step .fourths {
  left: calc(100% - -170px);
}
.detail {
  position: relative;
}
#nprogress-bar::-webkit-progress-value {
  /*            background: #049dfe;*/
  transition: all 0.4s ease-in-out;
}
#nprogress-bar::-webkit-progress-bar {
  background: #ccc;
}
#step .border-change {
  border: 3px solid rgba(0, 0, 0, .5);
  background: var(--orange-color);
  transition: all 0.4s ease-in-out;
}
.how-we-work #firsts,
.how-we-work #seconds,
.how-we-work #thirds,
.how-we-work #fourths {
  background-color: rgba(0, 0, 0, .5);
  color: var(--light-color);
  padding: 15px;
  border: 7px double var(--sky-blue);
  border-radius: 8px;
  transform: translateY(-25px);
}
.how-we-work .content {
  width: 60%;
  margin: auto;
}
.how-we-work #step h5 {
  position: absolute;
  bottom: -61px;
  color: var(--black-color);
}
/*----------how we work end-----------*/

/*----------softwares start----------*/
.software h2 {
display: inline-block;
position: relative;
margin-bottom: 30px;
padding: 8px;

}
.software h2::after {
content: "";
position: absolute;
top: 26px;
bottom: 0;
right: 0;
width: 45%; 
text-align: center;
border-bottom: 2px solid var(--orange-color);
}
.owl-carousel.software-logo .item img {
width: 75%;
filter: grayscale(0%);
}
.owl-carousel.software-logo .item img:hover {
filter: grayscale(100%);
}
/*----------softwares end----------*/

/*----------industry we serve start------------*/
  .industry-we-serve i {
    color: var(--orange-color);
  }

  .industry-we-serve p {
    font-size: 22px;
    font-weight: 700;
    color: rgba(0, 0, 0, .8);
  }

  .industry-we-serve .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 4px double var(--blue-color);
  }

  .industry-we-serve .content {
    width: 60%;
    margin: 0px auto;
  }
/*----------industry we serve end------------*/


/*----------screen fixed btn----------- */
/*call and book meeting start*/
.side-fixed-btn {
    position: fixed;
    bottom: 0;
    left: 1%;
    bottom: 1%;
    min-height: 60px;
    background-color: var(--blue-color);
    border: 3px solid var(--fourth-color);
    line-height: 60px;
    z-index: 10;
    text-align: center;
    border: 2px solid var(--orange-color);
    border-radius: 8px;
}
.side-fixed-btn i{
  color: var(--sky-blue);
}
.side-fixed-btn a {
    color: white;
    font-size: 18px;
    align-items: center;
    vertical-align: center;
}
.side-fixed-btn a:hover img {
    transform: rotateX(-180deg);
}
.side-fixed-btn a:hover {
    font-size: 18px;
}
/*call and book meeting end */

/* whatsapp*/
.fixed-btn {
position: fixed;
bottom: 20px;
right: 50px;
z-index: 1000;
}
.animated-image {
animation: floatAnimation 2s infinite;
}
@keyframes floatAnimation {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}

100% {
transform: translateY(0);
}
}
/*whatsapp end*/

/*----------screen fixed btn end----------- */




/*-------------------for mobile-------------------- */
/*-------------------**********-------------------- */

/*reponsive*/
@media only screen and (max-width: 580px) {
h2{
    font-size: 22px;
}
.underline-left , .underline-right {
display: inline-block;
position: relative;
padding: 3px;
}
.underline-left::after {
content: "";
position: absolute;
top: 24px;
bottom: 0;
left: 0;
width: 99%; 
border-bottom: 1px solid var(--orange-color);
}
.underline-right::after {
content: "";
position: absolute;
top: 24px;
bottom: 0;
left: 0;
width: 99%; 
border-bottom: 1px solid var(--orange-color);
}


  /* ------   top-bar---------*/
  .top .container {
    display: block;
    margin-left: 10px;
    height: 80px;
    position: relative;
  }
  .top img {
    position: absolute;
    top: 0px;
    right: 10px;
    width: 150px;
  }
  .top a {
    font-size: 14px !important;
  }
 .top .trial-btn {
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
  width: 230px;
  display: flex;
  margin: 0px auto;
  justify-content: center;
  border-radius: 11px;
  margin-top: 5px;
}
.top .trial-btn a {
  color: var(--white-color);
  text-align: center;
}


  /*-------- top-bar---------- end*/
  
/* ---------build-hero start----------*/
.build-hero{
  margin-top: 20px;
}
 .build-hero h1{
  font-size: 35px !important;
  }
.build-hero {
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%);
  height: 500px;
}
.build-hero  h5 {
  color: var(--sky-blue);
  margin-top: 6px;
}

.build-hero .hero-img img {
  background-color: var(--light-color);
  border-radius: 22px;
  border: 7px solid white;
  width: 80px;
}
  .hero-form {
    position: relative;
    top: unset;
    right: unset;
    margin-top: 30px;
    width: 99%;
    margin: 0 auto; 
    padding: 20px;
    border-radius: 8px;
    border: 7px solid var(--orange-color);
    background-color: var(--light-color);
    color: var(--black-color);
  }

  .build-hero {
    height: auto;
    padding-bottom: 20px; 
  }
  /* ---------build-hero end----------*/
  
  
  /*-----------our services start----------*/
.our-services{
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
}
 .our-services .col-md-5 {
    text-align: center;
  }

 .our-services .col-md-5 h2 {
    margin: 0 auto;
    text-align: center;
    font-size:25px;
  }
.our-services li a{
 color: var(--white-color);
 font-size: 16px;
 font-weight: 600;
}
.our-services li{
  margin-bottom: 6px;
}
.our-services li a i{
  font-size: 17px;
  padding-right: 7px;
}

.our-services li a:hover i{
  padding-right: 14px;
}
/*---------our services end----------*/

/*---------build-team-content-sec start---------*/
/*---------build-team-content-sec end---------*/

/*---------data-security start----------*/
.data-security img{
  background-color: var(--white-color);
  border-radius: 15px;
  width: 100px;
}
/*---------data-security end----------*/

/*----------start your 15 hrs free trial btn start----------*/

.start-free-trial-btn > a{
   background-color: var(--orange-color); 
   color: var(--white-color);
   font-size: 20px;
   margin-left: 0px;
   border-radius: 25px;  
}
.start-free-trial-btn a:hover{
   background-color: var(--sky-blue);
   color: var(--white-color);
   border-radius: 0px;
}

.start-free-trial-btn h5{
    font-size: 17px;
}
/*----------start your 15 hrs free trial btn end----------*/

/*--------- modal start--------*/
.modal .modal-content{
width: auto; 
transform: translateX(0%); 
margin-top: 0%;
display: flex;
margin: 0px auto;
}
/*--------- modal end--------*/

}
/*-------------------for mobile end-------------------- */
/*-------------------**********-------------------- */