:root {
  --clr-theme: #123251;
  --clr-darkgrey: #4b4b4b;
  --clr-black: #000000;
  --clr-charcoal: #1c1c1c;
  --clr-lightblue: #def2ff;
  --clr-white: #ffffff;
  --clr-grey: #f0f0f0;
  --clr-lightblack: #0e0e0e;
  --clr-blue: #def1ff;
  --clr-offwhite: #fbfcfdf0;

  --fw-bold: 700;
  --fw-regular: 400;

  --fs-700: 2.5rem;
  --fs-600: 2.375rem;
  --fs-500: 1.5rem;
  --fs-400: 1.5rem;
  --fs-body: 1rem;
  --fs-btn: 1rem;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--clr-darkgrey);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}

h1,
h2,
h4 {
  color: var(--clr-theme);
  font-weight: var(--fw-bold);
  line-height: 1.5;
}

h1 {
  font-size: var(--fs-700);
}

h2 {
  font-size: var(--fs-600);
}

h3 {
  font-weight: var(--fw-regular);
  font-size: var(--fs-500);
  color: var(--clr-lightblack);
}

h4 {
  font-size: var(--fs-400);
  color: var(--clr-charcoal);
}

li {
  list-style: none;
}

a:hover {
  text-decoration: none;
}

.btn {
  box-shadow: none;
  outline: 0;
  border: none;
}

.btn:focus {
  outline: 0;
  box-shadow: none;
}

.cta-btn {
  background: var(--clr-theme);
  font-size: var(--fs-btn);
  color: var(--clr-white);
  border-radius: 3.563rem;
  padding: 0.5em 1.1em;
  line-height: 1.6;
  transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.cta-btn:hover {
  color: var(--clr-white);
}

.text-blue {
  color: #1c97cf;
}

.section-padding {
  padding: 4rem 0;
}

.banner-section {
  background: url(../img/banner-bg.png) no-repeat, var(--clr-lightblue);
  background-size: 50%;
  background-position: left top;

}

.banner-img{
  margin-top: 5rem;
}

.accordion_btn {
  padding: 18px 0;
  font-size: var(--fs-400);
  font-weight: 500;
}

.accordion_btn[aria-expanded="true"] .plusIcon {
  transform: rotate(-135deg);
}

.plusIcon {
  transition: transform 0.2s ease-in;
}

.expertise-section {
  background: url(../img/ellipse1.png) no-repeat right top -20%,
    url(../img/ellipse2.png) no-repeat center bottom -12%, var(--clr-grey);
  background-size: 10%;
}

.expertise-section span a:hover {
  color: #1c97cf;
}

.services-section h2 {
  max-width: 26ch;
  margin: auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.sprite {
  display: inline-block;
  background-image: url(../img/mulesoft-sprites.png);
}

.bg-api_icon {
  width: 68px;
  height: 67px;
  background-position: -10px -10px;
}

.bg-integration_icon {
  width: 67px;
  height: 67px;
  background-position: -98px -10px;
}

.industries-section {
  background: url("../img/ellipse2.png") no-repeat left -7% top -9%,
    url("../img/ellipse2.png") no-repeat left 17% bottom -22%, var(--clr-grey);
  background-size: 16%, 13%;
}

.whyMindwagon-section ul li,
.industries-section ul li {
  position: relative;
  padding-bottom: 20px;
}

.whyMindwagon-section ul li::before,
.industries-section ul li::before {
  content: "";
  background: url("../img/check.png") no-repeat;
  position: absolute;
  top: 7px;
  width: 20px;
  height: 20px;
  padding: 10px;
  left: -31px;
}

footer {
  background: url("../img/ellipse1.png") no-repeat right top -24%,
    url("../img/ellipse2.png") no-repeat left -5% bottom -25%, var(--clr-blue);
  background-size: 10%, 16%;
}

.footer-heading {
  font-size: 1.875rem;
  font-weight: var(--fw-regular);
  color: var(--clr-black);
}

.text-black {
  color: var(--clr-black);
}

hr {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--clr-white);
  color: var(--clr-white);
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.banner-section {
  position: relative;
  margin-top: 5rem;
}

.navbar-light .navbar-nav .nav-link.active {
  color: var(--clr-theme);
}

.navbar-light .navbar-nav .nav-link {
  color: var(--clr-darkgrey);
}

.form-control {
  box-shadow: none !important;
  outline: 0 !important;
  border: none !important;
  border-radius: 10px;
  color: var(--clr-black);
  padding: 25px 0.75rem;
}

.form-group input:focus,
.form-group textarea:focus {
  border-radius: 10px;
  color: var(--clr-black);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #00000080;
}

.footer-text {
  display: inline-block;
  text-align: center;
  width: 100%;
}

button[type="submit"] {
  background-color: #123251;
  border-radius: 20px;
  padding: 8px 25px;
}

.form-group {
  margin-bottom: 13px;
}

/* media queries */

@media screen and (min-width: 1600px) {
  :root {
    --fs-700: 2.5rem;
    --fs-600: 2.875rem;
    --fs-500: 1.5rem;
    --fs-400: 1.5rem;
    --fs-body: 1.125rem;
    --fs-btn: 1.125rem;
  }

  .container {
    max-width: 1440px;
  }

  .footer-heading {
    font-size: 2.5rem;
  }

  .industries-section {
    background: url("../img/ellipse2.png") no-repeat left -7% top -9%,
      url("../img/ellipse2.png") no-repeat left 16% bottom -26%, var(--clr-grey);
    background-size: 13%, 11%;
  }

  .banner-bg {
    background-size: 39%;
  }

  footer {
    background-size: 8%, 14%;
  }

  .expertise-section {
    background-size: 8%;
  }
}

@media screen and (max-width: 1199px) {
  :root {
    --fs-700: 2.188rem;
    --fs-600: 2.063rem;
    --fs-400: 1.375rem;
  }

  footer h4 {
    max-width: 31ch;
  }

  footer {
    background: url("../img/ellipse1.png") no-repeat right top -16%,
      url("../img/ellipse2.png") no-repeat left -5% bottom -16%, var(--clr-blue);
    background-size: 10%, 17%;
  }

  .expertise-section {
    background: url(../img/ellipse1.png) no-repeat right top -14%,
      url(../img/ellipse2.png) no-repeat center bottom -9%, var(--clr-grey);
    background-size: 10%;
  }

  .banner-bg {
    height: 24rem;
    background-size: 42%;
  }

  .banner-row {
    max-width: 568px;
  }
}

@media screen and (max-width: 991px) {
  :root {
    --fs-700: 1.625rem;
    --fs-600: 1.625rem;
    --fs-400: 1.25rem;
  }

  .banner-bg {
    background: url("../img/banner-img.png") no-repeat center bottom 0;
    background-size: 389px;
    height: 34rem;
    padding-top: 3rem;
    display: block;
  }

  .banner-row {
    max-width: 100%;
    text-align: center;
  }

  .expertise-section {
    background-size: 13%;
  }

  .section-padding {
    padding: 3rem 0;
  }

  .navbar-light .navbar-toggler {
    border: none;
  }

  .navbar-toggler .icon-bar {
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 1px;
    background: #686868;
    transition: 0.4s;
  }

  .navbar-toggler .icon-bar + .icon-bar {
    margin-top: 4px;
  }

  .change .bar1 {
    transform: translate(0, 3px) rotate(-45deg);
  }

  .change .bar2 {
    opacity: 0;
  }

  .change .bar3 {
    transform: translate(0, -11px) rotate(45deg);
  }

  footer {
    background: url(../img/ellipse1.png) no-repeat right top -16%,
      url(../img/ellipse2.png) no-repeat left -5% bottom -16%, var(--clr-blue);
    background-size: 12%, 17%;
  }
}

@media screen and (max-width: 767px) {
  :root {
    --fs-400: 1.125rem;
  }

  .container {
    max-width: 90%;
  }

  .banner-section {
    text-align: center;
    padding-top: 3rem;
  }

  .contact-block{
    padding-top: 2rem !important;
  }

  .banner-section img,
  .process-section img,
  .expertise-section img,
  .whyMindwagon-section img {
    width: 60%;
    padding-top: 3rem;
  }

  .expertise-section {
    background: url(../img/ellipse1.png) no-repeat right top -14%,
      url(../img/ellipse2.png) no-repeat left bottom -9%, var(--clr-grey);
    background-size: 16%;
  }

  .industries-section {
    background-size: 16%, 15%;
  }

  .whyMindwagon-section ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .footer-heading {
    font-size: 1.625rem;
  }

  footer h4 {
    max-width: 40ch;
    padding-bottom: 2rem;
    margin: auto;
    text-align: center;
  }

  footer {
    background: url("../img/ellipse1.png") no-repeat right top -9%,
      url("../img/ellipse2.png") no-repeat left -5% bottom -7%, var(--clr-blue);
    background-size: 14%, 17%;
  }

  .banner-img{
    margin-top: 0;
  }
}

@media screen and (max-width: 575px) {
  :root {
    --fs-700: 1.5rem;
    --fs-600: 1.5rem;
    --fs-body: 0.938rem;
  }

  .container {
    max-width: 95%;
  }

  .banner-bg {
    background-size: 305px;
    height: 29rem;
    padding-top: 2rem;
  }

  .services-grid,
  .whyMindwagon-section ul {
    grid-template-columns: 1fr;
  }

  .industries-section,
  .expertise-section,
  footer {
    background-image: none;
  }

  .section-padding {
    padding: 2rem 0;
  }

  .banner-section img,
  .process-section img,
  .expertise-section img,
  .whyMindwagon-section img,
  .industries-section img {
    width: 80%;
    padding-top: 2rem;
  }
}

@media screen and (max-width: 398px) {
  :root {
    --fs-700: 1.25rem;
    --fs-600: 1.25rem;
    --fs-400: 1.125rem;
    --fs-btn: 0.875rem;
  }

  .process-section svg {
    width: 18px;
  }

  .logo-img {
    width: 120px;
  }

  .expertise-section h2 {
    max-width: 23ch;
    margin: auto;
  }

  .banner-bg {
    background-size: 266px;
    height: 27rem;
  }
}