/* ----------------------------------------------------- ROOT STYLES ---------------------------------------------------- */

:root {
  /* Icon Sizes */
  --navbar-menu-icon-size: 30px;
  --navbar-logo-size: 40px;
  --footer-logo-size: 130px;
  --footer-socials-size: 20px;
  --Logo-3YC-size: 12px;

  /* Project Colours */
  --primary-colour: #567c8d;
  --primary-colour-hover: #638696;
  --primary-colour-active: #4e6e7c;
  --primary-colour-light: #f1faff;

  --secondary-colour: #2f4156;
  --secondary-colour-hover: #3c526b;
  --secondary-colour-active: #27394d;
  --secondary-colour-light: #eff6ff;

  --third-colour: #f5efeb;
  --third-colour-hover: #fff8f4;
  --third-colour-active: #e9ddd5;
  --third-colour-light: #fffcfa;

  --fourth-colour: #c8d9e6;
  --fourth-colour-hover: #cfe1ee;
  --fourth-colour-active: #bbccd8;
  --fourth-colour-light: #f0f8ff;

  --fifth-colour: #ffffff;
  --fifth-colour-hover: #ffffff;
  --fifth-colour-active: #ffffff;

  --sub-colour: #ffffff;

  --navbar-bg-color: rgb(4, 21, 32);
  --footer-bg-color: var(--navbar-bg-color);

  /* Scrool transition timing */
  --scroll-animation-transition-time: 0.8s;
}

* {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

html,
body {
  overflow-x: hidden;
}

body {
  position: relative;
}

/* ----------------------------------------------------- NAVBAR STYLES ---------------------------------------------------- */

nav {
  background-color: var(--navbar-bg-color);
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.nav-link {
  color: var(--sub-colour);
}

.nav-link:hover {
  color: var(--secondary-colour-hover);
}

.nav-link:active,
.nav-link:focus {
  color: var(--secondary-colour-active) !important;
}

.navbar-toggler,
.navbar-toggler:focus {
  border: none;
  box-shadow: none;
}

.nav-menu-icon {
  width: var(--navbar-menu-icon-size);
  height: var(--navbar-menu-icon-size);
}

.nav-logo {
  width: auto;
  height: var(--navbar-logo-size);
}

/* ----------------------------------------------------- FOOTER STYLES ---------------------------------------------------- */

footer {
  background-color: var(--footer-bg-color);
}

footer a {
  text-decoration: none;
  color: inherit;
}

footer a:hover {
  text-decoration: underline;
}

.footer-logo {
  width: auto;
  height: var(--footer-logo-size);
}

/* ----------------------------------------------------- BUTTON STYLES ---------------------------------------------------- */

/* btn-outline-primary styles */
.btn-outline-primary {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-primary:hover {
  border-color: var(--primary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--primary-colour-hover);
}

.btn-outline-primary:active {
  border-color: var(--primary-colour-active) !important;
  color: var(--sub-colour);
  background-color: var(--primary-colour-active) !important;
}

/* btn-outline-secondary styles */
.btn-outline-secondary {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-secondary:hover {
  border-color: var(--secondary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--secondary-colour-hover);
}

.btn-outline-secondary:active {
  border-color: var(--secondary-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--secondary-colour-active) !important;
}

/* btn-outline-third styles */
.btn-outline-third {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-third:hover {
  border-color: var(--third-colour-hover);
  color: var(--sub-colour);
  background-color: var(--third-colour-hover);
}

.btn-outline-third:active {
  border-color: var(--third-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--third-colour-active) !important;
}

/* btn-outline-fourth styles */
.btn-outline-fourth {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-fourth:hover {
  border-color: var(--fourth-colour-hover);
  color: var(--sub-colour);
  background-color: var(--fourth-colour-hover);
}

.btn-outline-fourth:active {
  border-color: var(--fourth-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--fourth-colour-active) !important;
}

/* btn-outline-fifth styles */
.btn-outline-fifth {
  border-color: var(--sub-colour);
  color: var(--sub-colour);
}

.btn-outline-fifth:hover {
  border-color: var(--fifth-colour-hover);
  color: var(--sub-colour);
  background-color: var(--fifth-colour-hover);
}

.btn-outline-fifth:active {
  border-color: var(--fifth-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--fifth-colour-active) !important;
}

/* btn-primary styles */
.btn-primary {
  border-color: var(--primary-colour);
  color: var(--sub-colour);
  background-color: var(--primary-colour);
}

.btn-primary:hover {
  border-color: var(--primary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--primary-colour-hover);
}

.btn-primary:active {
  border-color: var(--primary-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--primary-colour-active) !important;
}

/* btn-secondary styles */
.btn-secondary {
  border-color: var(--secondary-colour);
  color: var(--sub-colour);
  background-color: var(--secondary-colour);
}

.btn-secondary:hover {
  border-color: var(--secondary-colour-hover);
  color: var(--sub-colour);
  background-color: var(--secondary-colour-hover);
}

.btn-secondary:active {
  border-color: var(--secondary-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--secondary-colour-active) !important;
}

/* btn-third styles */
.btn-third {
  border-color: var(--third-colour);
  color: var(--sub-colour);
  background-color: var(--third-colour);
}

.btn-third:hover {
  border-color: var(--third-colour-hover);
  color: var(--sub-colour);
  background-color: var(--third-colour-hover);
}

.btn-third:active {
  border-color: var(--third-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--third-colour-active) !important;
}

/* btn-fourth styles */
.btn-fourth {
  border-color: var(--fourth-colour);
  color: var(--sub-colour);
  background-color: var(--fourth-colour);
}

.btn-fourth:hover {
  border-color: var(--fourth-colour-hover);
  color: var(--sub-colour);
  background-color: var(--fourth-colour-hover);
}

.btn-fourth:active {
  border-color: var(--fourth-colour-active) !important;
  color: var(--sub-colour) !important;
  background-color: var(--fourth-colour-active) !important;
}

/* btn-fifth styles */
.btn-fifth {
  border-color: var(--fifth-colour);
  color: var(--sub-colour);
  background-color: var(--fifth-colour);
}

.btn-fifth:hover {
  border-color: var(--fifth-colour-hover);
  color: var(--sub-colour);
  background-color: var(--fifth-colour-hover);
}

.btn-fifth:active {
  border-color: var(--fifth-colour-active) !important;
  color: var(--sub-colour);
  background-color: var(--fifth-colour-active) !important;
}

#backToTop {
  display: none;
}

.back-to-top-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  transition: 0.15s ease-in-out;
}

.back-to-top-button.onScreen {
  animation-name: slideUp;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.back-to-top-button.offScreen {
  animation-name: slideDown;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes slideUp {
  from {
    transform: translateY(100px);
    opacity: 0;
  }

  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(100px);
  }
}

/* ----------------------------------------------------- BACKGROUND STYLES ---------------------------------------------------- */

.bg-img-hero {
  background-image: url("../Assets/projects/11.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.411);
  background-blend-mode: overlay;
}

.bg-img {
  background-image: url("../Assets/Backgrounds/hero-services.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 80vh;
  background-color: rgba(0, 0, 0, 0.829);
  background-blend-mode: overlay;
}

@media (min-width: 992px) {
  .bg-img.fixed {
    background-attachment: fixed;
  }
}

.fade-black {
  background: linear-gradient(135deg, rgb(196, 182, 182) 0%, rgba(224, 224, 235, 0.473) 30%, rgba(134, 194, 218, 0.5) 70%, rgb(22, 67, 73) 100%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.bg-primary {
  background-color: var(--primary-colour) !important;
}

.bg-primary-light {
  background-color: var(--primary-colour-light) !important;
}

.bg-secondary {
  background-color: var(--secondary-colour) !important;
}

.bg-secondary-light {
  background-color: var(--secondary-colour-light) !important;
}

.bg-third {
  background-color: var(--third-colour) !important;
}

.bg-third-light {
  background-color: var(--third-colour-light) !important;
}

.bg-fourth {
  background-color: var(--fourth-colour) !important;
}

.bg-fourth-light {
  background-color: var(--fourth-colour-light) !important;
}

.bg-fifth {
  background-color: var(--fifth-colour) !important;
}

.bg-fifth-light {
  background-color: var(--fifth-colour-light) !important;
}

.bg-sub {
  background-color: var(--sub-colour) !important;
}

.bg-fade-primary {
  background: linear-gradient(to bottom, rgb(255, 255, 255) 10%, #acc7da 90%);
}

.custom-shape-divider-top-services {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
  margin-top: -1px;
}

.custom-shape-divider-top-services svg {
  position: relative;
  display: block;
  width: calc(200% + 1.3px);
  height: 60px;
  transform: rotateY(180deg) translateY(1px);
}

.custom-shape-divider-top-services .shape-fill {
  fill: var(--third-colour);
}

.custom-shape-divider-bottom-services {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
}

.custom-shape-divider-bottom-services svg {
  position: relative;
  display: block;
  width: calc(200% + 1.3px);
  height: 60px;
  transform: rotateY(180deg) translateY(1px);
}

.custom-shape-divider-bottom-services .shape-fill {
  fill: #ffffff;
}

/* ------------------------------------------------- ICONS/IMAGES STYLES ------------------------------------------------- */

/* 3 Yellow Circles Icon (SVG) */
.logo3YC {
  height: var(--Logo-3YC-size);
  width: var(--Logo-3YC-size);
  display: inline-block;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1512' height='1512' fill='%23ffde58' %3E%3Cpath d='M580.601 373.739l10.664-.007c24.476-.067 48.707 1.308 72.985 4.518l2.478.323C731.135 387.043 793.067 406.787 851 436l3.136 1.574c46.92 23.665 89.864 54.281 128.34 90.015l4.809 4.415c8.626 7.889 17.141 15.849 24.746 24.746 2.046 2.339 4.152 4.61 6.274 6.881 4.963 5.316 9.748 10.708 14.301 16.385l5.383 6.594c62.778 75.868 102.896 169.383 117.762 266.453l.602 3.921c2.588 17.554 3.969 34.902 3.984 52.645l.02 5.783.014 12.053.041 12.113c.54 80.761-17.244 159.619-52.412 232.421l-1.519 3.166c-12.381 25.691-26.375 51.286-43.497 74.174-1.904 2.553-3.751 5.138-5.589 7.739-7.788 11.01-15.987 21.58-24.762 31.819-2.338 2.734-4.582 5.535-6.82 8.352-10.254 12.539-21.887 23.916-33.312 35.375l-1.553 1.561c-5.802 5.825-11.674 11.495-17.947 16.814l-3.352 2.922a525.32 525.32 0 0 1-22.972 18.78l-4.743 3.716c-15.605 12.217-32.037 23.241-48.934 33.582l-2.914 1.803c-70.879 43.727-152.289 71.428-330.898 83.447l-2.565-.128c-72.33-3.699-142.328-19.915-208.623-49.122l-5.391-2.34c-11.493-5.033-22.589-10.67-33.609-16.66l-2.16-1.158c-20.017-10.731-39.466-22.569-57.641-36.201l-7.137-5.243c-8.561-6.238-16.976-12.552-25.062-19.398l-3.129-2.605c-6.902-5.764-13.587-11.72-20.174-17.841l-3.892-3.503c-6.051-5.378-11.863-10.952-17.574-16.689l-4.283-4.277c-5.193-5.201-10.171-10.501-14.947-16.084l-4.375-4.812c-4.731-5.249-9.194-10.684-13.625-16.187l-2.812-3.434C115.013 1258.508 99.448 1235.607 86 1212l-1.144-2.001L76 1194l-1.435-2.641c-30.515-56.467-49.423-118.495-58.378-181.921l-.301-2.092c-3.411-24.019-4.268-48.047-4.199-72.283l.007-4.191c.044-21.081.48-41.955 3.306-62.872l.301-2.258C23.711 803.283 41.749 743.354 70 687l1.452-2.911C81.889 663.271 93.68 643.112 107 624l2.27-3.277c10.101-14.429 20.756-28.563 32.289-41.879 2.382-2.774 4.664-5.609 6.941-8.469 3.942-4.854 8.235-9.238 12.727-13.574 2.139-2.161 4.131-4.331 6.113-6.629 3.69-4.262 7.601-8.261 11.598-12.234l2.014-2.025c3.945-3.938 8-7.688 12.22-11.329 2.428-2.102 4.782-4.279 7.141-6.458 5.402-4.921 10.989-9.553 16.688-14.125l3.359-2.738c72.819-59.168 159.352-97.972 288.516-123.137l2.229-.295c5.291-.691 10.588-1.286 15.896-1.83l2.695-.28c16.967-1.708 33.872-2.035 50.906-1.98zM1399 68l1.582 1.233c6.818 5.346 6.818 5.346 9.418 7.767v2l1.613.629c3.352 1.926 5.884 4.573 8.574 7.309l1.747 1.766c5.046 5.162 9.637 10.597 14.065 16.297l2.457 3.082c25.496 32.207 41.681 70.5 48.543 110.918l.377 2.186c.761 4.588 1.266 9.18 1.623 13.814l.203 2.606c2.423 33.865-1.353 67.218-12.203 99.394l-.772 2.343c-10.803 32.462-29.43 62.147-53.228 86.657l-1.809 1.887c-8.334 8.669-16.817 16.747-26.513 23.875l-4.854 3.676c-23.733 17.937-51.273 29.798-79.824 37.563l-2.254.632c-31.934 8.849-67.22 8.752-99.746 3.368l-2.412-.374c-42.585-6.79-82.57-28.242-114.588-56.626l-1.653-1.461C1042.382 396.757 1013.858 336.676 1010 274c-2.24-60.961 14.075-118.781 52-167l1.4-1.793c11.143-14.133 24.262-27.333 38.6-38.207l3.484-2.777C1115.995 55.95 1127.191 49.252 1139 43l2.55-1.352C1224.52-1.622 1326.132 11.171 1399 68zm57.223 644.512c15.374 13.774 26.191 28.705 34.777 47.488l1.238 2.629c9.984 22.782 11.65 54.547 4.762 78.371l-.586 2.11c-8.7 30.766-29.116 59.161-57.263 74.926-31.156 17.022-66.282 22.272-100.71 12.217-16.01-5.072-30.493-12.511-43.44-23.252l-1.569-1.295c-26.862-22.495-40.986-53.866-44.083-88.338-.398-4.83-.673-9.525-.348-14.367l.242-3.859c1.332-16.86 5.911-33.15 13.758-48.141l1.359-2.773c5.528-10.84 13.785-21.827 22.641-30.227h2v-2c2.023-1.802 4.047-3.473 6.188-5.125l1.926-1.491c47.058-35.886 113.664-35.51 159.109 3.128z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.x,
.facebook,
.instagram,
.linkedIn {
  height: var(--footer-socials-size);
  width: var(--footer-socials-size);
  display: inline-block;
  vertical-align: text-bottom;

  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: white;
  transition: background-color 0.2s ease-in-out, transform 0.5s ease-in-out;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.x:hover,
.instagram:hover,
.facebook:hover,
.linkedIn:hover {
  background-color: var(--secondary-colour-hover);
  transform: rotateY(360deg) scale(1.3);
}

/* X Icon (SVG) */
.x {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 40 40'%3E%3Cpath d='M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 5 40 40'%3E%3Cpath d='M 5.9199219 6 L 20.582031 27.375 L 6.2304688 44 L 9.4101562 44 L 21.986328 29.421875 L 31.986328 44 L 44 44 L 28.681641 21.669922 L 42.199219 6 L 39.029297 6 L 27.275391 19.617188 L 17.933594 6 L 5.9199219 6 z M 9.7167969 8 L 16.880859 8 L 40.203125 42 L 33.039062 42 L 9.7167969 8 z'/%3E%3C/svg%3E");
}

/* facebook Icon (SVG) */
.facebook {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='-5 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Efacebook %5B%23176%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-385.000000, -7399.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M335.821282,7259 L335.821282,7250 L338.553693,7250 L339,7246 L335.821282,7246 L335.821282,7244.052 C335.821282,7243.022 335.847593,7242 337.286884,7242 L338.744689,7242 L338.744689,7239.14 C338.744689,7239.097 337.492497,7239 336.225687,7239 C333.580004,7239 331.923407,7240.657 331.923407,7243.7 L331.923407,7246 L329,7246 L329,7250 L331.923407,7250 L331.923407,7259 L335.821282,7259 Z' id='facebook-%5B%23176%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='-5 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Efacebook %5B%23176%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-385.000000, -7399.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M335.821282,7259 L335.821282,7250 L338.553693,7250 L339,7246 L335.821282,7246 L335.821282,7244.052 C335.821282,7243.022 335.847593,7242 337.286884,7242 L338.744689,7242 L338.744689,7239.14 C338.744689,7239.097 337.492497,7239 336.225687,7239 C333.580004,7239 331.923407,7240.657 331.923407,7243.7 L331.923407,7246 L329,7246 L329,7250 L331.923407,7250 L331.923407,7259 L335.821282,7259 Z' id='facebook-%5B%23176%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* instagram Icon (SVG) */
.instagram {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20.00 20.00' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Einstagram %5B%23167%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-340.000000, -7439.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M289.869652,7279.12273 C288.241769,7279.19618 286.830805,7279.5942 285.691486,7280.72871 C284.548187,7281.86918 284.155147,7283.28558 284.081514,7284.89653 C284.035742,7285.90201 283.768077,7293.49818 284.544207,7295.49028 C285.067597,7296.83422 286.098457,7297.86749 287.454694,7298.39256 C288.087538,7298.63872 288.809936,7298.80547 289.869652,7298.85411 C298.730467,7299.25511 302.015089,7299.03674 303.400182,7295.49028 C303.645956,7294.859 303.815113,7294.1374 303.86188,7293.08031 C304.26686,7284.19677 303.796207,7282.27117 302.251908,7280.72871 C301.027016,7279.50685 299.5862,7278.67508 289.869652,7279.12273 M289.951245,7297.06748 C288.981083,7297.0238 288.454707,7296.86201 288.103459,7296.72603 C287.219865,7296.3826 286.556174,7295.72155 286.214876,7294.84312 C285.623823,7293.32944 285.819846,7286.14023 285.872583,7284.97693 C285.924325,7283.83745 286.155174,7282.79624 286.959165,7281.99226 C287.954203,7280.99968 289.239792,7280.51332 297.993144,7280.90837 C299.135448,7280.95998 300.179243,7281.19026 300.985224,7281.99226 C301.980262,7282.98483 302.473801,7284.28014 302.071806,7292.99991 C302.028024,7293.96767 301.865833,7294.49274 301.729513,7294.84312 C300.829003,7297.15085 298.757333,7297.47145 289.951245,7297.06748 M298.089663,7283.68956 C298.089663,7284.34665 298.623998,7284.88065 299.283709,7284.88065 C299.943419,7284.88065 300.47875,7284.34665 300.47875,7283.68956 C300.47875,7283.03248 299.943419,7282.49847 299.283709,7282.49847 C298.623998,7282.49847 298.089663,7283.03248 298.089663,7283.68956 M288.862673,7288.98792 C288.862673,7291.80286 291.150266,7294.08479 293.972194,7294.08479 C296.794123,7294.08479 299.081716,7291.80286 299.081716,7288.98792 C299.081716,7286.17298 296.794123,7283.89205 293.972194,7283.89205 C291.150266,7283.89205 288.862673,7286.17298 288.862673,7288.98792 M290.655732,7288.98792 C290.655732,7287.16159 292.140329,7285.67967 293.972194,7285.67967 C295.80406,7285.67967 297.288657,7287.16159 297.288657,7288.98792 C297.288657,7290.81525 295.80406,7292.29716 293.972194,7292.29716 C292.140329,7292.29716 290.655732,7290.81525 290.655732,7288.98792' id='instagram-%5B%23167%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20.00 20.00' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23000000' stroke='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Ctitle%3Einstagram %5B%23167%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-340.000000, -7439.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M289.869652,7279.12273 C288.241769,7279.19618 286.830805,7279.5942 285.691486,7280.72871 C284.548187,7281.86918 284.155147,7283.28558 284.081514,7284.89653 C284.035742,7285.90201 283.768077,7293.49818 284.544207,7295.49028 C285.067597,7296.83422 286.098457,7297.86749 287.454694,7298.39256 C288.087538,7298.63872 288.809936,7298.80547 289.869652,7298.85411 C298.730467,7299.25511 302.015089,7299.03674 303.400182,7295.49028 C303.645956,7294.859 303.815113,7294.1374 303.86188,7293.08031 C304.26686,7284.19677 303.796207,7282.27117 302.251908,7280.72871 C301.027016,7279.50685 299.5862,7278.67508 289.869652,7279.12273 M289.951245,7297.06748 C288.981083,7297.0238 288.454707,7296.86201 288.103459,7296.72603 C287.219865,7296.3826 286.556174,7295.72155 286.214876,7294.84312 C285.623823,7293.32944 285.819846,7286.14023 285.872583,7284.97693 C285.924325,7283.83745 286.155174,7282.79624 286.959165,7281.99226 C287.954203,7280.99968 289.239792,7280.51332 297.993144,7280.90837 C299.135448,7280.95998 300.179243,7281.19026 300.985224,7281.99226 C301.980262,7282.98483 302.473801,7284.28014 302.071806,7292.99991 C302.028024,7293.96767 301.865833,7294.49274 301.729513,7294.84312 C300.829003,7297.15085 298.757333,7297.47145 289.951245,7297.06748 M298.089663,7283.68956 C298.089663,7284.34665 298.623998,7284.88065 299.283709,7284.88065 C299.943419,7284.88065 300.47875,7284.34665 300.47875,7283.68956 C300.47875,7283.03248 299.943419,7282.49847 299.283709,7282.49847 C298.623998,7282.49847 298.089663,7283.03248 298.089663,7283.68956 M288.862673,7288.98792 C288.862673,7291.80286 291.150266,7294.08479 293.972194,7294.08479 C296.794123,7294.08479 299.081716,7291.80286 299.081716,7288.98792 C299.081716,7286.17298 296.794123,7283.89205 293.972194,7283.89205 C291.150266,7283.89205 288.862673,7286.17298 288.862673,7288.98792 M290.655732,7288.98792 C290.655732,7287.16159 292.140329,7285.67967 293.972194,7285.67967 C295.80406,7285.67967 297.288657,7287.16159 297.288657,7288.98792 C297.288657,7290.81525 295.80406,7292.29716 293.972194,7292.29716 C292.140329,7292.29716 290.655732,7290.81525 290.655732,7288.98792' id='instagram-%5B%23167%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* linkedIn Icon (SVG) */
.linkedIn {
  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Elinkedin %5B%23161%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-180.000000, -7479.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M144,7339 L140,7339 L140,7332.001 C140,7330.081 139.153,7329.01 137.634,7329.01 C135.981,7329.01 135,7330.126 135,7332.001 L135,7339 L131,7339 L131,7326 L135,7326 L135,7327.462 C135,7327.462 136.255,7325.26 139.083,7325.26 C141.912,7325.26 144,7326.986 144,7330.558 L144,7339 L144,7339 Z M126.442,7323.921 C125.093,7323.921 124,7322.819 124,7321.46 C124,7320.102 125.093,7319 126.442,7319 C127.79,7319 128.883,7320.102 128.883,7321.46 C128.884,7322.819 127.79,7323.921 126.442,7323.921 L126.442,7323.921 Z M124,7339 L129,7339 L129,7326 L124,7326 L124,7339 Z' id='linkedin-%5B%23161%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Elinkedin %5B%23161%5D%3C/title%3E%3Cdesc%3ECreated with Sketch.%3C/desc%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Dribbble-Light-Preview' transform='translate(-180.000000, -7479.000000)' fill='%23FFFFFF'%3E%3Cg id='icons' transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M144,7339 L140,7339 L140,7332.001 C140,7330.081 139.153,7329.01 137.634,7329.01 C135.981,7329.01 135,7330.126 135,7332.001 L135,7339 L131,7339 L131,7326 L135,7326 L135,7327.462 C135,7327.462 136.255,7325.26 139.083,7325.26 C141.912,7325.26 144,7326.986 144,7330.558 L144,7339 L144,7339 Z M126.442,7323.921 C125.093,7323.921 124,7322.819 124,7321.46 C124,7320.102 125.093,7319 126.442,7319 C127.79,7319 128.883,7320.102 128.883,7321.46 C128.884,7322.819 127.79,7323.921 126.442,7323.921 L126.442,7323.921 Z M124,7339 L129,7339 L129,7326 L124,7326 L124,7339 Z' id='linkedin-%5B%23161%5D'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------- TEXT STYLES ------------------------------------------------- */

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

.text-secondary {
  color: var(--secondary-colour) !important;
}

.text-third {
  color: var(--third-colour) !important;
}

.text-fourth {
  color: var(--fourth-colour) !important;
}

.text-fifth {
  color: var(--fifth-colour) !important;
}

.text-sub {
  color: var(--sub-colour) !important;
}

.tiny {
  font-size: 13px;
  transition: 1s ease-in-out;
}

@media (max-width: 768px) {
  .lead {
    font-size: 1rem;
    font-weight: 400;
  }
}

/* ------------------------------------------------- ANIMATIONS ------------------------------------------------- */

.scroll-up {
  opacity: 0;
  transform: translateY(100px);
  transition: var(--scroll-animation-transition-time) ease-in-out;
}

.scroll-up.active {
  opacity: 1;
  transform: translateY(0);
}

.scroll-left {
  opacity: 0;
  transform: translateX(-300px);
  transition: var(--scroll-animation-transition-time) ease-in-out;
}

.scroll-left.active {
  opacity: 1;
  transform: translateX(0);
}

.scroll-right {
  opacity: 0;
  transform: translateX(300px);
  transition: var(--scroll-animation-transition-time) ease-in-out;
}

.scroll-right.active {
  opacity: 1;
  transform: translateX(0);
}

@keyframes slideInLeft {
  0% {
    transform: translateX(800px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 1.3s;
  animation-delay: 0.5s;
  opacity: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes slideInRight {
  0% {
    transform: translateX(-500px);
    opacity: 0;
  }
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
.slideInRight {
  animation-name: slideInRight;
  animation-duration: 1s;
  opacity: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-delay: 0s;
  opacity: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes appearDown {
  0% {
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
.appearDown {
  animation-name: appearDown;
  animation-duration: 1.5s;
  animation-delay: 0.5s;
  opacity: 0;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
}
.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  margin: 0 0 15px 15px;
  --c: #0000 calc(100% / 3), #046d8b 0 calc(2 * 100% / 3), #0000 0;
  --c1: linear-gradient(90deg, var(--c));
  --c2: linear-gradient(0deg, var(--c));
  background: var(--c1), var(--c2), var(--c1), var(--c2);
  background-size: 300% 4px, 4px 300%;
  background-repeat: no-repeat;
  animation: l12 1s infinite linear;
}
.loader:after {
  margin: 15px 15px 0 0;
  transform: scale(-1, -1);
}
@keyframes l12 {
  0% {
    background-position: 50% 0, 100% 100%, 0 100%, 0 0;
  }
  25% {
    background-position: 0 0, 100% 50%, 0 100%, 0 0;
  }
  50% {
    background-position: 0 0, 100% 0, 50% 100%, 0 0;
  }
  75% {
    background-position: 0 0, 100% 0, 100% 100%, 0 50%;
  }
  75.01% {
    background-position: 100% 0, 100% 0, 100% 100%, 0 50%;
  }
  100% {
    background-position: 50% 0, 100% 0, 100% 100%, 0 100%;
  }
}

/* ------------------------------------------------- #PRODUCTS STYLES ------------------------------------------------- */

.shadow-big {
  box-shadow: inset 0px 0px 20px 0px rgba(128, 128, 128, 0.685);
}

#products img {
  height: 100px;
  object-fit: contain;
}

/* ------------------------------------------------- #ABOUT STYLES ------------------------------------------------- */

#about img {
  transition: 0.2s ease-in-out;
}

#about img:hover {
  transform: rotate(2deg) scale(1.03);
}

/* ------------------------------------------------- #SERVICES STYLES ------------------------------------------------- */

@media (min-width: 768px) {
  #services {
    --service-image-height: 300px;
  }
}

@media (max-width: 576px) {
  #services {
    --service-image-height: 250px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #services {
    --service-image-height: 200px;
  }
}

.serviceImage {
  height: var(--service-image-height);
  object-fit: cover;
}

#services .card {
  transition: transform 0.18s ease-in-out;
}

#services .card:hover {
  transform: scale(1.02);
}

/* ------------------------------------------------- #PROJECTS STYLES ------------------------------------------------- */

@media (max-width: 768px) {
  .carouselContainer {
    height: 300px !important;
  }

  .carouselItem img {
    width: 300px !important;
  }

  .carouselItem h3 {
    font-size: 25px !important;
  }
}

.carouselContainer {
  --picture-size: 500px;

  width: 100%;
  height: var(--picture-size);
}

.carouselBody {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  height: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: auto;
}

.carouselItem {
  height: 100%;
  flex: 0 0 auto;
  position: relative;
}

.carouselItem:hover img {
  filter: grayscale(1) brightness(0.6);
}

.carouselItem:hover h3 {
  color: rgba(255, 255, 255, 1);
}

.carouselItem img {
  width: var(--picture-size);
  height: 100%;
  object-fit: cover;
  transition: 0.3s ease-in-out;
}

.carouselBody::-webkit-scrollbar {
  display: none; /* hide scrollbar in Chrome/Safari */
}

.carouselItem h3 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  color: rgba(255, 255, 255, 0);
  transition: 0.3s ease-in-out;
  font-size: 40px;
  font-weight: 300;
  white-space: nowrap;
}

/* ------------------------------------------------- #TESTIMONIALS STYLES ------------------------------------------------- */

.review-bg {
  --bg-color: rgb(247, 247, 247);

  background-color: var(--bg-color);
}

.googleReviewProfilePic {
  --circleDia: 45px;
  --circleRad: calc(var(--circleDia) / 2);

  width: var(--circleDia);
  height: var(--circleDia);
  object-fit: cover;
  clip-path: circle(50% at 50% 50%);

  transition: 1s ease-in-out;
  border: 2px solid rgba(255, 255, 255, 0);
  border-radius: 50%;
}

.googleSymbol {
  position: absolute;
  bottom: 0;
  right: 0px;
  height: 20px;
  width: auto;
  background-color: var(--bg-color);
  clip-path: circle(50% at 50% 50%);
  /* border: 2px solid var(--bg-color); */
}

.verified {
  vertical-align: text-top !important;
}

.reviewCard {
  transition: 0.5s ease-in-out;
}

.reviewCard:hover {
  transform: rotateY(360deg);
  background-color: var(--primary-colour);
  color: rgb(255, 255, 255);
}

.reviewCard:hover .tiny {
  color: rgb(255, 255, 255) !important;
}

.reviewCard:hover .googleReviewProfilePic {
  border-color: var(--bg-color);
}

/* ------------------------------------------------- #CONTACT STYLES ------------------------------------------------- */

#contact textarea {
  resize: none;
}

#contact form input::placeholder,
#contact form textarea::placeholder {
  color: rgb(206, 206, 206);
}

.form-control:focus {
  border: 1px solid rgb(184, 184, 184);
}