@import url("https://fonts.googleapis.com/css?family=Mukta:700");
* {
  box-sizing: border-box;
}
*::before, *::after {
  box-sizing: border-box;
}
/* 
body {
  font-family: "Mukta", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: #f3f8fa;
} */

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  background: transparent;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}
button.learn-more {
  width: 20rem;
  height: auto;
  
}
button.learn-more .circle {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: relative;
  display: block;
  margin: 0;
  width: 3.3rem;
  height: 3.3rem;
  background: #007bff;
  border-radius: 1.625rem;
}

@media  (max-width: 570px) {
  button.learn-more .circle {
    width: 2.8rem;
    height: 2.8rem;
    margin-left: 4%;
    
    }

    .button-mob{
     margin-left: -15%;
    }

    /* .modal-dialog-centered{
      margin-right: 0% !important; 
    }     */
} 
@media (min-width:769px) and (max-width:1024px){
  .button-mob{
    margin-left: -1%;
   }
}

button.learn-more .circle .icon {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  background: #fff;
}
button.learn-more .circle .icon.arrow {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  left: 0.625rem;
  width: 1.225rem;
  height: 0.125rem;
  background: none;
}
button.learn-more .circle .icon.arrow::before {
  position: absolute;
  content: "";
  top: -0.25rem;
  right: 0.0625rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 0.125rem solid #fff;
  border-right: 0.125rem solid #fff;
  transform: rotate(45deg);
}
button.learn-more .button-text {
  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem 0;
  margin: 0 0 0 1.85rem;
  color: #f1f1f1;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: left;
  /* text-transform: uppercase; */
  padding-left: 10%;
}
button:hover .circle {
  width: 95%;
}
button:hover .circle .icon.arrow {
  background: #fff;
  transform: translate(1rem, 0);
}


button:hover .button-text {
  color: #fff;
}

@supports (display: grid) {
  /* body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.625rem;
    grid-template-areas: ". main main ." ". main main .";
  } */

  #container {
    grid-area: main;
    align-self: center;
    justify-self: center;
  }
}

/*--------------------------------------------------------------
# X-EnerG Learn more buttons
--------------------------------------------------------------*/


.button1::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button1:hover::after {
   content: "Find out how X-EnerG can help!";
   font-size: small;
   font-family: "Raleway", sans-serif;
  }
  
.button1:hover span {
  display:none
}


.button2::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button2:hover::after {
   content: "Find out how X-EnerG can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button2:hover span {
  display:none
}


.button3::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button3:hover::after {
   content: "Find out how X-EnerG can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
   
  }
  
.button3:hover span {
  display:none
}



.button4::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button4:hover::after {
   content: "Find out how X-EnerG can help!";
   font-family:"Raleway",sans-serif;
   font-size: small;
  }
  
.button4:hover span {
  display:none
}


/*--------------------------------------------------------------
# X-MRP Learn more buttons
--------------------------------------------------------------*/

.button5::after {
  content: "Are you a food factory?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  
  }
  .button5:hover::after {
   content: "Find out how X-MRP can help!";  
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button5:hover span {
  display:none
}


.button6::after {
  content: "Are you a Medical Tech?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button6:hover::after {
   content: "Find out how X-MRP can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button6:hover span {
  display:none
}


.button7::after {
  content: "Are you a Fabrication?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button7:hover::after {
   content: "Find out how X-MRP can help!";
    font-family: "Raleway",sans-serif;
    font-size: small;
  }
  
.button7:hover span {
  display:none
}


.button8::after {
  content: "Are you a Retail Store?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button8:hover::after {
   content: "Find out how X-MRP can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button8:hover span {
  display:none
}

/*--------------------------------------------------------------
# X-Ops Learn more buttons
--------------------------------------------------------------*/

.button9::after {
  content: "Are you a SME?";
  font-size: large;
  font-family:"Raleway",sans-serif;
  }
  .button9:hover::after {
   content: "Find out how X-Ops can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button9:hover span {
  display:none
}

.button10::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button10:hover::after {
   content: "Find out how X-Ops can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button10:hover span {
  display:none
}

.button11::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button11:hover::after {
   content: "Find out how X-Ops can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
   
  }
  
.button11:hover span {
  display:none
}

.button12::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button12:hover::after {
   content: "Find out how X-Ops can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button12:hover span {
  display:none
}



/*--------------------------------------------------------------
# X-Safe Learn more buttons
--------------------------------------------------------------*/

.button13::after {
  content: "Are you a MNC?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button13:hover::after {
   content: "Find out how X-Safe can help!";
    font-family: "Raleway",sans-serif;
    font-size: small;
  }
  
.button13:hover span {
  display:none
}

.button14::after {
  content: "Are you a Retail Store?";
  font-size: large;
  font-family:"Raleway",sans-serif;

  }
  .button14:hover::after {
   content: "Find out how X-Safe can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button14:hover span {
  display:none
}

.button15::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button15:hover::after {
   content: "Find out how X-Safe can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button15:hover span {
  display:none
}

.button16::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button16:hover::after {
   content: "Find out how X-Safe can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button16:hover span {
  display:none
}


/*--------------------------------------------------------------
# X-Mon Learn more buttons
--------------------------------------------------------------*/

.button17::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button17:hover::after {
   content: "Find out how X-Mon can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button17:hover span {
  display:none
}



.button18::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button18:hover::after {
   content: "Find out how X-Mon can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button18:hover span {
  display:none
}

.button19::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button19:hover::after {
   content: "Find out how X-Mon can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button19:hover span {
  display:none
}

.button20::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button20:hover::after {
   content: "Find out how X-Mon can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button20:hover span {
  display:none
}


/*--------------------------------------------------------------
# X-Quote Learn more buttons
--------------------------------------------------------------*/

.button21::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button21:hover::after {
   content: "Find out how X-Quote can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button21:hover span {
  display:none
}



.button22::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button22:hover::after {
   content: "Find out how X-Quote can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button22:hover span {
  display:none
}

.button23::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button23:hover::after {
   content: "Find out how X-Quote can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button23:hover span {
  display:none
}

.button24::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button24:hover::after {
   content: "Find out how X-Quote can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button24:hover span {
  display:none
}

/*--------------------------------------------------------------
# X-TrueEdge Learn more buttons
--------------------------------------------------------------*/

.button25::after {
  content: "Are you a Micro Enterprise?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button25:hover::after {
   content: "Find out how  X-TruEdge can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button25:hover span {
  display:none
}



.button26::after {
  content: "Are you a Small Enterprise?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button26:hover::after {
   content: "Find out how  X-TruEdge can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button26:hover span {
  display:none
}

.button27::after {
  content: "Are you a Medium Enterprise?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button27:hover::after {
   content: "Find out how  X-TruEdge can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button27:hover span {
  display:none
}

.button28::after {
  content: "Are you a Large Enterprise?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button28:hover::after {
   content: "Find out how X-TruEdge can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button28:hover span {
  display:none
}

/*--------------------------------------------------------------
# X-Bench Learn more buttons
--------------------------------------------------------------*/

.button29::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button29:hover::after {
   content: "Find out how  X-Bench can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button29:hover span {
  display:none
}



.button30::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button30:hover::after {
   content: "Find out how  X-Bench can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button30:hover span {
  display:none
}

.button31::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button31:hover::after {
   content: "Find out how  X-Bench can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button31:hover span {
  display:none
}

.button32::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button32:hover::after {
   content: "Find out how X-Bench can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button32:hover span {
  display:none
}


/*--------------------------------------------------------------
# X-Authnz Learn more buttons
--------------------------------------------------------------*/

.button33::after {
  content: "Are you a MNC?";
   font-family: "Raleway",sans-serif;
   font-size: large;

  }
  .button33:hover::after {
   content: "Find out how  X-AuthNZ can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button33:hover span {
  display:none
}



.button34::after {
  content: "Are you a Corporate?";
  font-size: large;
  font-family: "Raleway",sans-serif;

  }
  .button34:hover::after {
   content: "Find out how  X-AuthNZ can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button34:hover span {
  display:none
}

.button35::after {
  content: "Are you a SME?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button35:hover::after {
   content: "Find out how  X-AuthNZ can help!";
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button35:hover span {
  display:none
}

.button36::after {
  content: "Are you a Largecap?";
  font-size: large;
  font-family: "Raleway",sans-serif;
  }
  .button36:hover::after {
   content: "Find out how X-AuthNZ can help!";   
   font-family: "Raleway",sans-serif;
   font-size: small;
  }
  
.button36:hover span {
  display:none
}


.abt-us1::after {
  content: "Solutions ";
  font-size: large;
  color: black;
  font-family: "Raleway",sans-serif;
  }
  .abt-us1:hover::after {
   content: "Click to know about the SOLUTIONS we offer";   
   font-family: "Raleway",sans-serif;
   font-size: 0.7rem;
  }
  
.abt-us1:hover span {
  display:none
}


.abt-us2::after {
  content: "Services";
  font-size: large;
  color: black;
  font-family: "Raleway",sans-serif;
  }
  .abt-us2:hover::after {
   content: "Click to know about the SERVICES we offer";   
   font-family: "Raleway",sans-serif;
   font-size: .7rem;
  }
  
.abt-us2:hover span {
  display:none
}