:root {
  --int-color-black-rgb: 18, 18, 18;
  --int-color-black: #121212;
  --int-color-white-rgba: rgba(255, 255, 255, 1);
  --int-color-white: #fff;
  --int-footer-bg: #f5f5f7;
  --int-modal-bg: #dbdbdb;
  --int-color-tertiary: red;
  --int-color-tertiary-rgb: 255, 0, 0;
  --int-color-light-grey: #fafafa;
  --int-color-medium-grey: #bdc8ce;
  --int-color-grey: #95b2bf;
  --int-color-pink: #e1a5a4;
  --int-color-green: #a09e53;
  --int-color-grey-bg: #efefef;
  --int-color-dark-grey-bg: #232323;

  --int-link-underline-after-color: var(--int-color-tertiary);

  --int-body-font: Gotham;
  --int-h1-font: Avayo;
  --int-header-size: 55px;

  --bs-dark-rgb: var(--int-color-black-rgb);
  --bs-body-color: var(--int-color-white);
  --bs-heading-color: var(--int-color-black);
}

/* Fonts */
@font-face {
  font-family: Avayo;
  src: url(./fonts/Avayo-ExtraLight.woff) format("woff");
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: Avayo;
  src: url(./fonts/Avayo-Light.woff) format("woff");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: Avayo;
  src: url(./fonts/Avayo-Regular.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: Avayo;
  src: url(./fonts/Avayo-DemiBold.woff) format("woff");
  font-style: normal;
  font-weight: 600;
}

@font-face {
  font-family: Avayo;
  src: url(./fonts/Avayo-Bold.woff) format("woff");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-Thin.woff) format("woff");
  font-style: normal;
  font-weight: 100;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-XLight.woff) format("woff");
  font-style: normal;
  font-weight: 200;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-Light.woff) format("woff");
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-Book.woff) format("woff");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-Medium.woff) format("woff");
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: Gotham;
  src: url(./fonts/Gotham-Bold.woff) format("woff");
  font-style: normal;
  font-weight: 700;
}

header {
  height: var(--int-header-size);
}

body {
  font-family: var(--int-body-font);
  font-weight: 400;
}

h1,
h2 {
  font-family: var(--int-h1-font);
}

.btn {
  --bs-btn-focus-box-shadow: none;
  --bs-btn-font-size: 0.8rem;
}
.btn-close:focus {
  --bs-btn-close-focus-shadow: unset;
}

.btn-secondary {
  --bs-btn-bg: var(--int-color-tertiary);
  --bs-btn-border-color: var(--int-color-tertiary);
  --bs-btn-hover-bg: var(--int-color-tertiary);
  --bs-btn-hover-border-color: var(--int-color-tertiary);
  --bs-btn-active-bg: var(--int-color-tertiary);
  --bs-btn-active-border-color: var(--int-color-tertiary);
  --bs-btn-disabled-bg: var(--int-color-tertiary);
  --bs-btn-disabled-border-color: var(--int-color-tertiary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--int-color-tertiary);
  --bs-btn-border-color: var(--int-color-tertiary);
  --bs-btn-hover-color: var(--int-color-white);
  --bs-btn-hover-bg: var(--int-color-tertiary);
  --bs-btn-hover-border-color: var(--int-color-tertiary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--int-color-white);
  --bs-btn-active-bg: var(--int-color-tertiary);
  --bs-btn-active-border-color: var(--int-color-tertiary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--int-color-tertiary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--int-color-tertiary);
  --bs-gradient: none;
}

.navbar-nav {
  --bs-nav-link-hover-color: var(--int-color-white);
}

.navbar-toggler:focus {
  --bs-navbar-toggler-focus-width: 0;
}

.navbar-toggler {
  --bs-navbar-toggler-border-color: var(--int-color-white-rgba);
}

.nav-link {
  --bs-nav-link-color: var(--int-color-white-rgba);
}

.nav-link span {
  display: inline-block;
}

.nav-link span::after,
.dropdown-item::after,
.underline-after::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: var(--int-link-underline-after-color);
  transition: width 0.3s;
}

.nav-link:hover span::after,
.nav-link.active span::after,
.nav-link.dropdown-toggle:has(+ .dropdown-menu.show) > span::after,
.dropdown-item:hover::after,
.underline-after:hover::after,
.underline-after.active::after {
  width: 1rem;
}

.dropdown-item {
  --bs-dropdown-link-color: var(--int-color-white);
  --bs-dropdown-link-hover-color: var(--int-color-white);
}

.dropdown-item:active {
  --bs-dropdown-link-active-bg: var(--int-color-black);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--int-color-black);
  --bs-dropdown-link-hover-bg: transparent;
}

.dropdown-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--int-color-black);
}

.carousel-indicators [data-bs-target] {
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
}

/* Burger Icon */
.icon-burger {
  position: relative;
  display: inline-block;
  width: 19px;
  height: 18px;
  vertical-align: middle;
}

.icon-burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s;
}

button.navbar-toggler[data-int-toggle-state="open"]
  .icon-burger
  > span:nth-child(1) {
  width: 23px;
  transform: rotate(45deg);
}

.icon-burger > span:nth-child(1) {
  transform-origin: top left;
}

.icon-burger > span {
  transition: all 0.3s;
}

.icon-burger span:nth-child(1) {
  top: 0;
}

button.navbar-toggler[data-int-toggle-state="open"]
  .icon-burger
  > span:nth-child(2) {
  display: none;
}

.icon-burger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

button.navbar-toggler[data-int-toggle-state="open"]
  .icon-burger
  > span:nth-child(3) {
  width: 23px;
  transform: rotate(-45deg);
}

.icon-burger > span:nth-child(3) {
  transform-origin: bottom left;
}

.icon-burger span:nth-child(3) {
  bottom: 0;
}

.hide {
  display: none;
}

.z-50 {
  z-index: 50;
}

.z-25 {
  z-index: 25;
}

.text-primary {
  color: var(--int-color-black) !important;
}

.text-secondary {
  --bs-secondary-rgb: var(--int-color-tertiary-rgb);
}

.text-grey {
  color: var(--int-color-grey);
}

.text-pink {
  color: var(--int-color-pink);
}

.text-green {
  color: var(--int-color-green);
}

.bg-light {
  background-color: var(--int-color-light-grey);
}

.bg-medium-light {
  background-color: var(--int-color-medium-grey);
}

.bg-grey {
  background-color: var(--int-color-grey-bg);
}

.bg-dark-grey {
  background-color: var(--int-color-dark-grey-bg);
}

.fs-7 {
  font-size: 0.8rem;
}

.hover-canvas {
  overflow: hidden;
}

.hover-scale .hover-canvas img {
  transition: 0.5s ease transform;
}
.hover-scale:hover .hover-canvas img {
  transform: scale(1.1);
}

.fw-extralight {
  font-weight: 200;
}

/* Seach Panel */
#intSearchPanel {
  --int-search-font-size: clamp(0.8rem, 4vw, 2rem);
  min-height: 100svh;
  z-index: 10;
}

#intrinoSearch {
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: var(--int-search-font-size);
}
#intrinoSearch::placeholder {
  color: var(--int-color-white);
}

#intrinoSearch:focus {
  --bs-body-bg: var(--int-color-dark-grey-bg);
}

#intSearchClear:hover {
  --bs-btn-close-hover-opacity: 1;
  --bs-btn-hover-bg: var(--int-color-dark-grey-bg);
}

#intSearchPanel .input-group-text svg {
  width: var(--int-search-font-size);
}

#intSearchPanel form {
  width: 50%;
}

#intSearchPanel .form-control:focus {
  box-shadow: unset;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#intSearchPanel .btn-close {
  --bs-btn-close-white-filter: brightness(0) invert(1);
  --bs-btn-close-opacity: 1;
}

#searchResults {
  max-height: 50svh;
  overflow-y: auto;
  overflow-x: hidden;
}

.hero .hero-logo {
  left: 5%;
  width: 15%;
}

.hero .hero-background {
  height: calc(100vh - var(--int-header-size));
  height: calc(100dvh - var(--int-header-size));
  object-fit: cover;
  object-position: top;
  width: 100%;
  display: block;
}

.hero .hero-content {
  position: absolute;
  right: 5%;
  width: 50%;
  height: 40%;
  top: 28%;
}
.hero-content .hero-info {
  max-width: 100%;
  position: absolute;
  left: 12%;
  right: 12%;
  top: 18%;
  bottom: 20%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-info .hero-title {
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(1rem, 5vw, 5.5rem);
  font-weight: 700;
}

.hero-info .hero-sub-title {
  text-transform: uppercase;
  font-size: clamp(1rem, 2.5vw, 3rem);
  font-family: Avayo;
  font-weight: 400;
}

.hero-info p {
  font-family: Gotham;
  font-weight: 700;
  font-size: 0.8vw;
  margin-bottom: 0;
}

.hero .hero-bracket {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  mix-blend-mode: multiply;
  height: 100%;
  width: 25%;
  z-index: 5;
  opacity: 0.35;
}

.hero .hero-bracket.inverse {
  transform: scale(-1, 1);
  right: 0;
  left: unset;
}

.hero::before {
  animation: bounce 1s ease infinite;
  bottom: 6rem;
  content: url("../images/scroll.svg");
  height: 4rem;
  left: 50%;
  margin-left: -3rem;
  opacity: 0.8;
  position: absolute;
  width: 6rem;
  z-index: 5;
}

.hero.no-before::before {
  display: none;
}

@keyframes bounce {
  50% {
    transform: translateY(-50%);
  }
}

.tech-serv-btn img {
  height: clamp(50px, 10vw, 125px);
  width: auto;
}

.tech-serv-btn:not(.active) img {
  filter: grayscale(1) invert(1);
}

/* Swiper */
.swiper-pagination-bullet-active {
  --swiper-pagination-color: var(--int-color-tertiary);
}

/* Technologies & Services Page Swiper */
#techServSwiper {
  width: 65%;
}

.tech-serv-swiper-pagination .section-group {
  display: none;
}

.tech-serv-swiper-pagination .section-group.active {
  display: flex;
}

.tech-serv-swiper-pagination .nav-link:not(.active) span {
  color: #c9c9c9;
}

/* Footer */
footer {
  background-color: var(--int-footer-bg);
}

footer h5 {
  font-size: 0.8rem;
}

footer .footer-text {
  font-size: 0.7rem;
  font-weight: 200;
  line-height: 1.5rem;
}

/* Modal */
.modal {
  --bs-modal-bg: var(--int-modal-bg);
}

.modal-content {
  --bs-modal-color: var(--int-color-black);
}

/* Media Queries*/
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
  }

  #intNavbarNavCollapseId {
    height: auto !important;
  }
}

@media (max-width: 992px) {
  #intSearchPanel form {
    width: 75%;
  }

  .hero::before {
    bottom: 5rem;
    height: 2rem;
    margin-left: -2rem;
    width: 4rem;
  }
}

@media (max-width: 576px) {
  #intSearchPanel {
    form {
      width: 100%;
    }
  }

  .hero .hero-logo {
    width: 35%;
  }

  .hero .hero-content {
    width: 100%;
    right: auto;
  }

  .hero .hero-info p {
    font-size: 3vw;
  }

  .hero .hero-sub-title {
    font-size: clamp(1rem, 5vw, 5rem);
  }

  .hero .hero-title {
    font-size: clamp(1rem, 10vw, 5.5rem);
  }
}