body {
  font-family: "Inter", sans-serif !important;
}

.newLandingPage {
  overflow-x: hidden;
}

.headline.fs-3 {
  font-size: 2.25rem !important;
  color: #343a40;
}

.form-control.fs-6 {
  font-size: 1.25rem !important;
}

.intro.px-5 {
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
}

.glide__slide .card {
  box-shadow: none !important;
}

.company {
  top: 1.25rem !important;
  color: #58585a !important;
  font-weight: 400;
  font-size: 1.1rem;
}

.form-control,
.form-control:focus {
  border-color: transparent !important;
}

.send-btn.btn-primary,
.send-btn.btn-primary:not(:disabled):not(.disabled):focus,
.send-btn.btn-primary:not(:disabled):not(.disabled).focus,
.send-btn.btn-primary:focus,
.send-btn.btn-primary:hover {
  background-color: #2b72d9;
}

.main.card {
  border-radius: 2.7rem !important;
}

.inner-card1,
.inner-card2,
.inner-card3,
.inner-card4 {
  width: 425px;
  min-height: 190px;
  border-radius: 10px !important;
}

.inner-card1.orange-card:hover {
  background-color: #ffedd9e8 !important;
}

.inner-card1.red-card:hover {
  background-color: #ffdfdfcc !important;
}

.inner-card2:hover {
  background-color: #ceffe8e3 !important;
}

.inner-card3:hover {
  background-color: #cee0f7e3 !important;
}

.inner-card4:hover {
  background-color: #f0e1fee0 !important;
}

.inner-dep1 h6,
.inner-dep2 h6,
.inner-dep3 h6,
.inner-dep4 h6 {
  color: #4e4e4e !important;
}

.grid-img {
  width: 50rem;
  height: 25rem;
  position: absolute;
  left: 50%;
  top: 3rem;
  transform: translateX(-50%);
  z-index: -2;
  opacity: 0.45;
  border-radius: 50%; /* makes it a circle */
  background-image: radial-gradient(
      circle at center,
      transparent 65%,
      rgba(249, 249, 249, 1) 100%
    ),
    url(../img/background/background-hero.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}

.oracle-highlight {
  color: #ec1d22;
  font-size: 3rem !important;
}

.oracle-highlight::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  height: 4px;
  width: 100%;
  background-color: #ec1d2048; /* light red */
  z-index: -1;
  opacity: 0.5;
  border-radius: 6px;
}

.intro .glide__track::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(249, 249, 249) 0%,
    transparent 10%,
    transparent 90%,
    rgba(249, 249, 249) 100%
  );
  z-index: 2;
  border-radius: inherit;
  margin-bottom: 6.85rem;
}

.intro .glide--carousel {
  cursor: auto !important;
}

.intro .glide--carousel .glide__slides {
  cursor: grab !important;
}

.company-logos {
  transform: rotateY(180deg);
}

.img-fluid.grayscale.opacity-75 {
  max-width: 120px !important;
  object-fit: contain !important;
  aspect-ratio: 16/9;
  filter: grayscale(1);
}

.direct-btn {
  border: none;
  background: transparent;
}

.btn-icon:has(.chevron-left) {
  position: relative;
  bottom: 23.5rem;
  right: 28.5rem;
  color: #7b7c7ce3 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.btn-icon:has(.chevron-right) {
  position: relative;
  bottom: 23.5rem;
  left: 28.5rem;
  color: #7b7c7ce3 !important;
  background-color: transparent !important;
  border-color: transparent !important;
}

.btn-icon-only.btn-outline-primary {
  box-shadow: none !important;
}

.btn-icon svg {
  width: 25px;
  height: 25px;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show
  > .btn-outline-primary:not(:disabled):not(
    .disabled
  ).dropdown-toggle:active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary:not(:disabled):not(.disabled),
.show > .btn-outline-primary:not(:disabled):not(.disabled).dropdown-toggle {
  color: #535353e3 !important;
  box-shadow: none !important;
}

.glide__bullets {
  position: relative !important;
  bottom: 2em !important;
  left: 0% !important;
}

.glide__bullets .glide__bullet,
.glide__bullets .glide__bullet.glide__bullet--active {
  width: 16px;
  height: 16px;
  padding: 5px;
}

.glide__bullets .glide__bullet.glide__bullet--active {
  background-color: #7b7c7ce3 !important;
}

.glide__bullets .glide__bullet {
  background-color: #dddddd !important;
}

.glide__bullet:hover,
.glide__bullet:focus {
  border: 0px !important;
  box-shadow: none !important;
}

.row a {
  text-decoration: none !important;
}

.container .input-group {
  max-width: 750px;
  min-height: 55px;
  border: 2px solid #2b72d9;
  border-radius: 13px;
  background-color: #fff;
}

.container .input-group .input-group-text {
  border: none;
  border-radius: 13px;
  background-color: #ffffff;
}

.input-group-text img {
  width: 28px;
  height: 28px;
}

.container .input-group .form-control {
  border-left: none;
  border-right: none;
  box-shadow: none;
  color: #136beb;
}

.company-logos .glide__track {
  cursor: auto !important;
}

/* footer */
.footer {
  background-color: #101823;
}

.footer-section {
  padding-top: 65px !important;
}

.footer-logo {
  max-width: 90%;
}

.footer-img {
  height: 42px;
  object-fit: fill !important;
}

.social-icons {
  border-radius: 50%;
  background-color: #3d444d;
  width: 34px;
  height: 34px;
}

.social-icons:hover {
  background-color: #2b72d9 !important;
}

.social-icons:hover svg,
.social-icons:focus svg,
.social-icons:active svg {
  fill: #fff !important;
}

.domain-name h5 {
  color: #9ca3af;
  font-size: 16px;
  margin-bottom: 10px;
}

.domain-name h5:hover,
.domain-name h5:active,
.domain-name h5:focus {
  color: #60a5fa !important;
}

.contact li img {
  height: 24px;
  width: 24px;
}

.contact a,
.contact p {
  color: #9ca3af;
  font-size: 16.5px;
}

.contact a:hover {
  color: #2b72d9 !important;
}

.footer-last {
  color: #a0a2ac;
  font-size: 14.5px;
}

.footer-bottom hr {
  border-width: 1px !important;
  border-style: inset;
  opacity: 0.15;
}

/* header */
.navbar {
  height: 80px;
  position: sticky !important;
  top: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
  background-position: center;
  z-index: 100;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08),
    0 1.5px 4px 0 rgba(0, 0, 0, 0.06);
}

.yecclogo {
  width: 100% !important;
  height: 35px;
  object-fit: contain !important;
}

.contact-btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 6.5px !important;
}

.contact-btn:hover,
.contact-btn:active,
.contact-btn:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus {
  color: #ffffff !important;
  background-color: #2b72d9 !important;
  border-color: transparent !important;
}

.login-btn {
  background-color: #2b72d9 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 5px 11px !important;
  border-radius: 6.5px !important;
}

.login-modal .btn-close:focus,
.login-modal .btn-close:hover,
.login-modal .btn-close:active,
.login-modal .btn-close:hover:after,
.login-modal .btn-close {
  background-color: #f5e1e2 !important;
  color: #ff0000 !important;
  box-shadow: none !important;
  background-image: url(../img/icons/close.svg) !important;
}

.login-modal .modal-header .modal-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #161c2d !important;
}

.login-modal .form-control {
  border-color: #dddddd !important;
  font-size: 17px;
}

.login-modal .form-control:focus,
.login-modal .form-control:active {
  border-color: #335eea !important;
}

.login-modal .modal-footer .btn-primary {
  background-color: #2073bd !important;
  border-color: transparent !important;
  min-height: 46px;
  font-size: 18px;
  font-weight: bold;
}

/* small mobile-view */
@media (min-width: 355px) and (max-width: 415px) {
  .form-control.fs-6 {
    font-size: 1rem !important;
  }

  .company-logos .glide__slide,
  .company-logos .glide__slide--active {
    max-height: 120px;
    max-width: 200px;
  }

  .intro.px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .card .card-body {
    padding: 12px !important;
  }

  .main .card-body h1 {
    font-size: 24px !important;
  }

  .card-body h2 {
    font-size: 14.5px !important;
  }

  .inner-dep1 h4,
  .inner-dep2 h4,
  .inner-dep3 h4,
  .inner-dep4 h4 {
    margin-top: 4px;
    font-size: 16.5px !important;
  }

  .col-md-6 {
    display: flex;
    justify-content: center;
  }

  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    width: 295px;
    min-height: fit-content;
  }

  .inner-card1 .text-black,
  .inner-card2 .text-black,
  .inner-card3 .text-black,
  .inner-card4 .text-black {
    font-size: 20px !important;
  }

  .inner-dep1 svg,
  .inner-dep2 svg,
  .inner-dep3 svg,
  .inner-dep4 svg {
    width: 22px !important;
    height: 22px !important;
  }

  .glide__bullets {
    bottom: 1.2rem !important;
    left: 11.5% !important  ;
  }

  .btn-icon:has(.chevron-left) {
    display: none;
  }

  .btn-icon:has(.chevron-right) {
    display: none;
  }

  .img-fluid.grayscale.opacity-75 {
    max-width: 100px !important;
    min-height: 50px !important;
    object-fit: contain !important;
  }

  .grid-img {
    width: 100% !important;
    left: 0 !important;
    height: 405px;
    transform: none !important;
  }

  .company {
    top: 0.5rem !important;
  }

  .footer-section.px-md-5 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .intro .glide__track::before {
    content: "";
    position: absolute;
    background: transparent !important;
  }

  .main.card {
    border-radius: 12px !important;
    border-color: #d5d5d5 !important;
  }

  .navbar {
    height: 66px !important;
  }

  .yecclogo {
    width: 155px !important;
  }

  .login-btn {
    font-size: 12px !important;
    padding: 3px 6px !important;
  }

  .contact-btn {
    font-size: 12px !important;
    padding: 3px 6px !important;
  }

  .footer-logo {
    max-width: 100% !important;
  }

  .footer-img {
    width: 100%;
  }
}

/* large mobile-view */
@media (min-width: 415px) and (max-width: 585px) {
  .form-control.fs-6 {
    font-size: 1rem !important;
  }

  .company-logos .glide__slide,
  .company-logos .glide__slide--active {
    max-height: 120px;
    max-width: 200px;
  }

  .intro.px-5 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .card .card-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .main .card-body h1 {
    font-size: 24px !important;
  }

  .card-body h2 {
    font-size: 14.5px !important;
  }

  .inner-dep1 h4,
  .inner-dep2 h4,
  .inner-dep3 h4,
  .inner-dep4 h4 {
    margin-top: 4px;
    font-size: 16.5px !important;
  }

  .col-md-6 {
    display: flex;
    justify-content: center;
  }

  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    width: 345px;
    min-height: fit-content;
  }

  .inner-card1 .text-black,
  .inner-card2 .text-black,
  .inner-card3 .text-black,
  .inner-card4 .text-black {
    font-size: 20px !important;
  }

  .inner-dep1 svg,
  .inner-dep2 svg,
  .inner-dep3 svg,
  .inner-dep4 svg {
    width: 22px !important;
    height: 22px !important;
  }

  .glide__bullets {
    bottom: 1.2rem !important;
    left: 11.5% !important  ;
  }

  .btn-icon:has(.chevron-left) {
    display: none;
  }

  .btn-icon:has(.chevron-right) {
    display: none;
  }

  .img-fluid.grayscale.opacity-75 {
    max-width: 100px !important;
    min-height: 50px !important;
    object-fit: contain !important;
  }

  .grid-img {
    width: 100% !important;
    left: 0 !important;
    height: 405px;
  }

  .company {
    top: 0.5rem !important;
  }

  .footer-section.px-md-5 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .intro .glide__track::before {
    content: "";
    position: absolute;
    background: transparent !important;
  }

  .main.card {
    border-radius: 12px !important;
    border-color: #d5d5d5 !important;
  }

  .yecclogo {
    width: 174px !important;
  }

  .login-btn {
    font-size: 12px !important;
  }

  .footer-logo {
    max-width: 100% !important;
  }

  .footer-img {
    width: 90%;
  }
}

/* tab-portrait */
@media (min-width: 585px) and (max-width: 768px) {
  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    width: 385px;
    min-height: fit-content;
  }

  .intro.px-5 {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }

  .img-fluid.grayscale.opacity-75 {
    max-width: 80px !important;
    min-height: 40px !important;
    object-fit: contain !important;
  }

  .btn-icon:has(.chevron-left) {
    display: none;
  }

  .btn-icon:has(.chevron-right) {
    display: none;
  }

  .grid-img {
    width: 100% !important;
    left: 0 !important;
    height: 300px;
  }

  .footer-section.px-md-5 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .intro .glide__track::before {
    content: "";
    position: absolute;
    background: transparent !important;
  }

  .main.card {
    border-radius: 12px !important;
  }

  .card-body h1 {
    font-size: 29px !important;
  }

  .card-body h6 {
    margin-top: 4px;
    font-size: 16.5px !important;
  }

  .yecclogo {
    width: 220px !important;
  }

  .login-btn {
    font-size: 12.5px !important;
  }

  .footer-logo {
    max-width: 100% !important;
  }

  .footer-img {
    width: 80%;
    height: 48px !important;
  }

  .glide__bullets {
    bottom: 1.2rem !important;
    left: 11.5% !important  ;
  }
}

/* tab-landscape */
@media (min-width: 768px) and (max-width: 992px) {
  .intro.px-5 {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

  .main .row {
    flex-direction: column !important;
    align-items: start !important;
  }

  .main .row a {
    display: inline !important;
  }

  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    width: 370px;
    min-height: fit-content !important;
  }

  .btn-icon:has(.chevron-left) {
    bottom: 42rem;
    right: 11rem;
  }

  .btn-icon:has(.chevron-right) {
    bottom: 42rem;
    left: 11rem;
  }

  .footer-section.px-md-5 {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
  }

  .card-body h1 {
    font-size: 29px !important;
  }

  .card-body h6 {
    margin-top: 4px;
    font-size: 16.5px !important;
  }

  .footer-logo {
    max-width: 100% !important;
  }

  .footer-img {
    width: 100%;
    height: 35px !important;
  }

  .glide__bullets {
    bottom: 1.2rem !important;
    left: 5.5% !important  ;
  }
}

/* laptop medium-screen */
@media (min-width: 992px) and (max-width: 1204px) {
  .main .row {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    height: 250px !important;
    flex-grow: inherit;
  }

  .btn-icon:has(.chevron-left) {
    bottom: 29rem;
    right: 19rem;
    color: #7b7c7ce3 !important;
  }

  .btn-icon:has(.chevron-right) {
    bottom: 29rem;
    left: 19rem;
    color: #7b7c7ce3 !important;
  }

  .footer-section .row {
    padding-left: 4rem !important;
    padding-right: 4rem !important;
  }

  .footer-logo {
    max-width: 100% !important;
  }

  .footer-img {
    width: 100%;
  }
}

/* laptop small-screen */
@media (min-width: 1204px) and (max-width: 1515px) {
  .inner-card1,
  .inner-card2,
  .inner-card3,
  .inner-card4 {
    flex-grow: inherit;
  }

  .btn-icon:has(.chevron-left) {
    bottom: 26.5rem;
    right: 29rem;
    color: #7b7c7ce3 !important;
  }

  .btn-icon:has(.chevron-right) {
    bottom: 26.5rem;
    left: 29rem;
    color: #7b7c7ce3 !important;
  }

  .card-body h1 {
    font-size: 32px !important;
    margin-bottom: 10px !important;
  }
}