@font-face {
  font-display: swap;
  font-family: "Gabriela";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gabriela-v23-latin-regular.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Gupter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/gupter-v14-latin-regular.woff2") format("woff2");
}

:root {
  --COLOURI: #845ec2;
  --COLOURII: #008dcd;
  --COLOURIII: #d8e4ea;
}

html { scroll-behavior: smooth; }

body { font-family: gabriola, "Gupter", "Times New Roman"; background: var(--COLOURIII); }

header { height: 100vh; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .8)), url("../images/businesshero.png") no-repeat center center /cover; }

.navMenu { background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .5)); padding: 0.5rem; transition: all 1s; }

.navbarbrandi { font-size: 1.4rem; }
.navbarbrandii { font-size: 2rem; }

.navButton { outline-color: var(--COLOURII) !important; border: none; }

.menuItem { font-size: 1.2rem; color: var(--COLOURIII); transition: color .5s; }
.menuItem:hover { color: var(--COLOURII); }

.active { color: var(--COLOURII); }

.line1, .line2, .line3 { /* hamburger */
  width: 2.5rem;
  height: 0.2rem;
  margin: 0.5rem;
  transition: all .5s;
}

.change .line1 { transform: rotate(-45deg) translate(-0.45rem, 0.52rem); }
.change .line2 { opacity: 0; }
.change .line3 { transform: rotate(45deg) translate(-0.45rem, -0.52rem); }

.customNavbar { padding: 0.01rem; background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .7)); }
/*! navigation end */

.banner {
  /* all the below properties perfectly center an element within its container. */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}

.bannerHeader { animation-name: animation; animation-duration: 3s; }

.banneri { font-size: 2.5rem; }
.bannerii { font-size: 4rem; }

.bannerParagraph {
  animation-name: animation;
  animation-duration: 3s;
  animation-delay: .9s;
  animation-fill-mode: backwards; /* this makes the P element invisible at the start of H1's animation. */
}

@keyframes animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*! banner end */

.mission { background: var(--COLOURII); }

.underline { width: 7rem; border: 0.15rem groove var(--COLOURIII); margin: auto; }

.fromLeft { animation-name: fromLeft; animation-duration: 4s; }

.fromRight { animation-name: fromRight; animation-duration: 4s; }

@keyframes fromLeft {
  0% {
    transform: translateX(-120px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fromRight {
  0% {
    transform: translateX(30px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*! mission end */

.card-shadow { box-shadow: 0.4rem 0.4rem 1rem var(--COLOURII); }

.heading {
  position: absolute;
  top: 75%;
  right: 0;
  font-size: 1.2rem;
  background: var(--COLOURII);;
  width: 70%;
  cursor: pointer;
  opacity: .7;
  transition: all .5s;
}

.heading:hover { opacity: 1; }
/*! collection end */

.underlineDark { width: 7rem; border: 0.15rem groove var(--COLOURII); margin: auto; }

.gallery-list-item { color:  var(--COLOURI); cursor: pointer; user-select: none; }

.activeItem { color:  var(--COLOURII); }
/*! gallery end */

.customers {
  background: #151f20;
}
/*! customers end */

.card1, .card2, .card3 {
  background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .5)), url("../images/businessi.jpg") no-repeat center /cover;
  box-shadow: 0.3125rem 1rem 2rem #555555;
  max-width: 15rem;
}

.card-list-item { border-bottom: 0.0625rem groove var(--COLOURI); width: 55%; margin: auto; }

.priceCardbutton {
  background: var(--COLOURI);
  width: 6rem;
  border-radius: 1.56rem;
  box-shadow: 0.1875rem 0.5rem 1.125rem #000000;
  transition: all .4s;
}

.priceCardbutton:hover { background: var(--COLOURI); transform: translateY(-0.325rem); } /* transform moves the button upwards. */

.moveFromleft { animation-name: moveFromleft; animation-duration: 4s; } /* card1 */
.moveFrombottom{ animation-name: moveFrombottom; animation-duration: 4s; } /* card2 */
.moveFromright { animation-name: moveFromright; animation-duration: 4s; } /* card3 */

@keyframes moveFromleft { /* card1 */
  0% {
    transform: translateX(-6.25rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes moveFrombottom { /* card2 */
  0% {
    transform: translateY(6.25rem); /* "translateY" for vertical movement of an element. */
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes moveFromright { /* card3 */
  0% {
    transform: translateX(6.25rem);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/*! pricing end */

.contact {
  background: linear-gradient(100deg, rgba(21, 31, 32, .9) 0%, rgba(21, 31, 32, .9) 50%, transparent 50%),
  url("../images/businessgalleryi.jpg") no-repeat center center /cover;
}

.input {
  background: transparent;
  border-color: transparent;
  border-bottom: 0.0625rem groove #ffffff;
  border-radius: 0;
  transition: all .5s; /* animation for bottom border. */
}

.input:focus {
  background: transparent;
  border-color: transparent;
  box-shadow: none; /* to remove the box-shadow effect around forms. */
  color: #ffffff;
  border-bottom: 0.0625rem groove var(--COLOURI);
}

.submitButton {
  background: var(--COLOURI);
  transition: all 1s;
}

.submitButton:hover {
  background: var(--COLOURII);
  color: #ffffff;
  transform: translateY(-0.2875rem);
}

.label { /* for label animation on typing. */
  color: #777777;
  display: block;
  margin-top: -4.375rem;
  margin-left: 0.35rem;
  font-size: 0.8125rem;
  transition: all .9s;
}

.input:placeholder-shown + .label { /* for label to be hidden. the plus (+) selects the next immediate sibling. */
  transform: translate(1.25rem, 1.25rem);
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 992px) { /* start of media query for subscribe form. */
  
  .contact { background: linear-gradient(rgba(21, 31, 32, 1), rgba(21, 31, 32, .95)); }
  .contactForm { width: 75%; margin: auto; }

}
/*! contact end */

footer .footerLink { color: #ffffff; font-size: 0.855rem; transition: all .5s; }
footer .footerLink:hover { color: var(--COLOURII); text-decoration: none; }

footer hr { background: #ffffff; }

footer .developer, #developer { font: bold 1.2rem "Gabriela"; color: #ffffff; text-shadow: 1px 1px 2px #ffd700, 0 0 25px #000000, 0 0 5px #000000; }
footer #developer { letter-spacing: 0.4rem; }