html {
  scroll-behavior: smooth;
}

body {
  font-family: "Work Sans", sans-serif;
  color: #333840;
  /* font-family: 'Inter', sans-serif !important; */
}

p {
  color: #41454d;
}

.mainNav {
  box-shadow: 0 0 20px #0f306a0d;
}

.logo-text {
  font-weight: 500;
  opacity: 1;
  white-space: nowrap;
  overflow: hidden;
}

.nav-menu a {
  display: flex;
  align-items: center;
}

.nav-menu svg {
  fill: #949494;
  transform: rotate(-90deg);
  transform-origin: center;
  display: inline-block;
  margin-top: 2px;
  color: #949494;
}

.hero-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  /* or whatever height you want */
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -1;
  -o-object-fit: cover;
  object-fit: cover;
  /* cover entire area */
  filter: brightness(0.2);
}

#headline .letter {
  display: inline-block;
  white-space: pre;
}

#description {
  transform: translateY(20px);
  opacity: 0;
}

#cta-btn {
  transform: translateY(20px);
  opacity: 0;
}

.perspective {
  perspective: 2000px;
  /* stronger perspective for better depth */
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

#carousel {
  /* fixed width as you want */
  /* center horizontally */
  position: relative;
  width: 100%;
  /* Responsive width (90% viewport width) */
  aspect-ratio: 16 / 9;
  /* keeps height proportional to width */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  cursor: grab;
  transform-style: preserve-3d;
  margin: 0 auto;
}

.card {
  position: absolute;
  width: 100%;
  /* Full width of carousel container */
  height: 100%;
  /* Full height of carousel container */
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
  background: white;
  top: 0;
  left: 0;
  touch-action: pan-y;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  padding: 40px;
  /* Adjust as needed */
}

.card.active {
  padding: 0px;
  z-index: 9;
}

.card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
}

/* Controls container */

.controls {
  display: flex;
  gap: 1rem;
}

.carousel-reveal .letter {
  will-change: transform;
}

.inner-section {
  border-radius: 16px;
}

.nav-link {
  display: block;
  padding: 1rem 1rem;
  border-left: 3px solid transparent;
  transition: all 0.3s ease;
  font-size: 1rem;
  color: #fff;
  border-top: 1px solid #303030;
}

.nav-link.active {
  color: #fff;
  border-left-color: #430d27;
  font-weight: bold;
}

li:nth-of-type(1) .nav-link.active {
  border-left-color: #3d6cb9;
  font-weight: bold;
}

li:nth-of-type(2) .nav-link.active {
  border-left-color: #107a8b;
  font-weight: bold;
}

li:nth-of-type(3) .nav-link.active {
  border-left-color: #fc5c9c;
  font-weight: bold;
}

li:nth-of-type(4) .nav-link.active {
  border-left-color: #a1eafb;
  font-weight: bold;
}

li:nth-of-type(5) .nav-link.active {
  border-left-color: #364f6b;
  font-weight: bold;
}

li:nth-of-type(6) .nav-link.active {
  border-left-color: #775ada;
  font-weight: bold;
}

li:nth-of-type(7) .nav-link.active {
  border-left-color: #3d6cb9;
  font-weight: bold;
}

/* overylay */

/* Apply background color from data attribute to overlay */

[data-overlay-bg] .overlay {
  background-color: attr(data-overlay-bg);
}

/* Apply button background from data attribute */

[data-btn-bg] .btn-bg {
  background-color: attr(data-btn-bg);
}

/* Reset */

footer a {
  color: #fff;
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  display: block;
  margin-bottom: 12px;
}

footer a.bold {
  font-weight: 700;
}

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

footer h4 {
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

footer {
  padding: 40px 60px;
  color: #fff;
}

/* Top nav and social icons */

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 18px;
  margin-bottom: 40px;
}

.footer-menu a {
  margin-right: 30px;
  font-weight: 600;
  display: inline-block;
}

.footer-menu a:last-child {
  margin-right: 0;
}

.social-icons a {
  width: 18px;
  height: 18px;
  margin-left: 20px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  transition: filter 0.3s ease;
}

.social-icons a:hover {
  filter: grayscale(0);
}

.icon-facebook {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><g clip-path="url(%23Facebook_svg__a)"><path fill="%239297A0" d="M16.45 8.296a8 8 0 1 0-9.25 7.903v-5.59H5.17V8.295H7.2V6.533c0-2.005 1.195-3.112 3.022-3.112.875 0 1.79.156 1.79.156v1.969h-1.008c-.994 0-1.304.616-1.304 1.25v1.5h2.219l-.355 2.312H9.7v5.59a8 8 0 0 0 6.75-7.902"></path><path fill="%23fff" d="m11.564 10.608.355-2.312H9.7v-1.5c0-.633.31-1.25 1.304-1.25h1.009V3.577s-.916-.156-1.791-.156C8.395 3.42 7.2 4.528 7.2 6.533v1.763H5.17v2.312H7.2v5.59c.829.13 1.672.13 2.5 0v-5.59z"></path></g><defs><clipPath id="Facebook_svg__a"><path fill="%23fff" d="M.45.296h16v16h-16z"></path></clipPath></defs></svg>');
}

.icon-linkedin {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" fill="none"><rect width="16" height="16" y="0.296" fill="%23fff" rx="4"></rect><path fill="%239297A0" d="M13.633 13.929h-2.37v-3.713c0-.885-.016-2.025-1.234-2.025-1.234 0-1.423.965-1.423 1.96v3.778H6.235V6.294H8.51v1.043h.032a2.5 2.5 0 0 1 2.245-1.233c2.403 0 2.846 1.58 2.846 3.637zM3.56 5.25a1.383 1.383 0 0 1-1.376-1.376c0-.754.62-1.376 1.376-1.376.754 0 1.375.621 1.375 1.376S4.315 5.25 3.56 5.25m1.185 8.679H2.372V6.294h2.373zM14.815.297H1.181A1.173 1.173 0 0 0 0 1.45v13.691c.008.64.54 1.162 1.18 1.155h13.635A1.176 1.176 0 0 0 16 15.14V1.45A1.175 1.175 0 0 0 14.815.296Z"></path></svg>');
}

.icon-x {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17.38"><path d="M10.11 7.37 16.43 0h-1.51L9.44 6.42 5.1 0H0l6.61 9.63L0 17.38h1.51l5.76-6.71 4.63 6.71H17zM8.03 9.73l-.66-.94-5.29-7.66h2.27l4.34 6.14.66.94 5.57 8.03h-2.27L8.02 9.72Z" style="fill:%239297a0;stroke-width:0"></path></svg>');
}

.icon-instagram {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none"><g fill="%239297A0" clip-path="url(%23Instagram_svg__a)"><path d="M8.45 1.736c2.136 0 2.39.008 3.233.047.78.035 1.204.165 1.486.275.348.128.662.333.92.598.266.259.471.573.6.921.109.282.239.706.274 1.486.039.844.047 1.096.047 3.233s-.008 2.389-.047 3.232c-.035.78-.165 1.204-.275 1.486a2.65 2.65 0 0 1-1.518 1.518c-.282.11-.706.24-1.486.276-.843.038-1.096.046-3.232.046s-2.39-.008-3.233-.046c-.78-.036-1.204-.166-1.486-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.921c-.109-.282-.24-.706-.275-1.486-.038-.844-.046-1.096-.046-3.233s.008-2.389.046-3.232c.036-.78.166-1.204.276-1.486.128-.348.332-.663.598-.92.259-.267.573-.471.921-.6.282-.109.706-.24 1.486-.275.844-.038 1.096-.046 3.233-.046H8.45ZM8.452.293c-2.173 0-2.446.01-3.299.048-.853.04-1.434.176-1.942.373a3.9 3.9 0 0 0-1.418.923c-.407.4-.722.884-.923 1.418-.197.508-.333 1.09-.37 1.942-.041.85-.05 1.125-.05 3.297s.01 2.446.049 3.299.174 1.433.371 1.941c.201.534.516 1.017.923 1.417.4.407.883.722 1.418.923.508.198 1.09.333 1.941.372.852.039 1.126.048 3.299.048s2.445-.009 3.298-.048 1.433-.174 1.941-.372a4.09 4.09 0 0 0 2.34-2.34c.198-.508.333-1.09.372-1.942s.048-1.126.048-3.298-.009-2.445-.048-3.299c-.04-.853-.174-1.432-.372-1.94a3.9 3.9 0 0 0-.922-1.417A3.9 3.9 0 0 0 13.69.714C13.182.517 12.6.381 11.748.343 10.897.303 10.623.294 8.45.294h.002Z"></path><path d="M8.45 4.188a4.108 4.108 0 1 0 0 8.216 4.108 4.108 0 0 0 0-8.216m0 6.775a2.668 2.668 0 1 1 0-5.335 2.668 2.668 0 0 1 0 5.335m4.27-5.978a.96.96 0 1 0 0-1.92.96.96 0 0 0 0 1.92"></path></g><defs><clipPath id="Instagram_svg__a"><path fill="%23fff" d="M.45.296h16v16h-16z"></path></clipPath></defs></svg>');
}

.icon-youtube {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="21" height="15" fill="none"><g clip-path="url(%23Youtube_svg__a)"><path fill="%239297A0" d="M20.034 2.48A2.51 2.51 0 0 0 18.266.71C16.705.286 10.45.286 10.45.286s-6.256 0-7.814.419A2.5 2.5 0 0 0 .87 2.479C.451 4.04.451 7.293.451 7.293s0 3.255.418 4.814a2.5 2.5 0 0 0 1.769 1.768c1.559.418 7.813.418 7.813.418s6.256 0 7.815-.418a2.51 2.51 0 0 0 1.768-1.768c.416-1.56.416-4.814.416-4.814s-.005-3.255-.416-4.814ZM8.45 10.292v-6l5.195 3z"></path></g><defs><clipPath id="Youtube_svg__a"><path fill="%23fff" d="M.451.296H20.45v14H.451z"></path></clipPath></defs></svg>');
}

/* Footer link columns */

.footer-links-container {
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.footer-column {
  flex: 1;
  min-width: 130px;
  margin-right: 30px;
}

.footer-column:last-child {
  margin-right: 0;
}

/* Bottom nav */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd;
  padding-top: 18px;
}

.footer-bottom-links a {
  margin-right: 20px;
  font-weight: 700;
  font-size: 14px;
}

.footer-bottom-links a:last-child {
  margin-right: 0;
}

/* Responsive */

@media (max-width: 768px) {
  .footer-top,
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-menu a,
  .footer-bottom-links a {
    margin-right: 15px;
    margin-bottom: 8px;
  }

  .footer-links-container {
    flex-direction: column;
    margin-bottom: 30px;
  }

  .footer-column {
    margin-bottom: 25px;
    margin-right: 0;
  }

  .app-buttons a {
    width: 120px;
    height: 36px;
    margin-bottom: 10px;
  }
}

.sec-bg {
  position: relative;
  /* to position the overlay relative to this */
  background-image: url("../../dist/images/software-dev.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  /* make text visible on dark overlay */
  z-index: 0;
  /* base z-index */
}

.sec-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000000 0%, transparent 100%);
  z-index: 1;
  border-radius: 14px;
}

.sec-bg > * {
  position: relative;
  z-index: 2;
  /* text/content above overlay */
}

.sec-bg:nth-of-type(2) {
  background-image: url("../../dist/images/cyber-security.webp");
}

.sec-bg:nth-of-type(3) {
  background-image: url("../../dist/images/consulting.png");
}

.sec-bg:nth-of-type(4) {
  background-image: url("../../dist/images/web-services.webp");
}

.sec-bg:nth-of-type(5) {
  background-image: url("../../dist/images/backup.webp");
}

.sec-bg:nth-of-type(6) {
  background-image: url("../../dist/images/erp.webp");
}

.sec-bg:nth-of-type(7) {
  background-image: url("../../dist/images/erp.webp");
}

/* contact page */
.contact-banner {
  background-repeat: no-repeat;
  background-size: cover;
  padding: 80px 0;
  position: relative;
  min-height: 60vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.contact-banner::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  background-color: #00000042;
}
.contact-banner .container {
  position: relative;
  z-index: 1;
}
.contact-banner h1 {
  font-size: 52px;
  line-height: 1.2;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}
.contact-banner p {
  font-size: 20px;
  text-align: center;
  color: #fff;
  max-width: 76ch;
  margin-inline: auto;
  line-height: 1.4;
}
.contact-section {
    padding-block: 80px;
    border-bottom: 1px solid #ffffff85;
}
.contact-section h2 {
  color: #ffffff;
  font-size: 42px;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
}
.contact-section p {
  font-size: 18px;
  text-align: center;
  line-height: 1.6;
  color: #ffffff;
  max-width: 74ch;
  margin-inline: auto;
}
.contact-container {
  background: rgba(20, 20, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.354);
  border-radius: 16px;
  padding: 50px 40px;
  width: 100%;
  max-width: 670px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  flex: 1;
}

.contact-section .form-group {
  margin-bottom: 24px;
}

.contact-section .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
.contact-section .social-links a {
    display: block;
    width: 54px;
    height: 54px;
    background: #fff;
    border-radius: 50%;
    padding: 12px;
    transition: all .4s ease-in-out;
}
.contact-section .social-links a:hover svg {
     fill: #ffffff;
}
.contact-section .social-links a svg {
   transition: all .4s ease-in-out;
}
.contact-section .social-links a:hover {
  background: #254fad;
}
.contact-section .social-links  {
    display: flex;
    align-items: center;
    gap: 20px;
}
.social-info h5 {
    font-size: 28px;
    line-height: 1.4;
    color: #fff;
    font-weight: 500;
    margin-bottom: 16px;
}
.contact-section .social-info {
    margin-top: 36px;
}
.contact-section .form-label {
  display: block;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.contact-section .form-input {
    width: 100%;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgb(255 255 255 / 59%);
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-weight: 300;
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.contact-section .submit-button {
    width: 100%;
    padding: 18px;
    background: rgb(255 255 255);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #000000;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
}
.contact-section .submit-button:hover {
  background: #254fad;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
  color: #fff;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
}

.submit-button:active {
  transform: translateY(0);
}
.company-info .contact-icon {
    background: #fff;
    display: flex;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    align-self: baseline;
}
.company-info .contact-icon svg {
  width: 38px;
  height: 38px;
}
.contact-section .info-field {
    display: flex;
    align-items: center;
    gap: 16px;
}
.contact-section .contact-icon-text h5 {
    color: #254fad;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
}
.contact-section .contact-icon-text address ,
.contact-section .contact-icon-text p ,
.contact-section .contact-icon-text a {
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
    font-style: normal;
    text-decoration: none;
}
.contact-section .company-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    justify-content: center;
}
.contact-form-wrapper {
    display: flex;
    gap: 30px;
    margin-top: 40px;
}
/* Responsive design */
@media screen and (max-width:992px){
  .contact-banner h1 {
    font-size: 36px;
}
.contact-banner p {
    font-size: 18px;
}
.contact-section h2 {
    font-size: 30px;
}
.contact-section p , .contact-section .contact-icon-text address, .contact-section .contact-icon-text p, .contact-section .contact-icon-text a {
    font-size: 16px;
}
.company-info .contact-icon {
    width: 60px;
    height: 60px;
}
.company-info .contact-icon svg {
    width: 28px;
    height: 28px;
}
}
@media (max-width: 768px) {
  .contact-section .contact-container {
    padding: 40px 30px;
    max-width: 100%;
  }

 .contact-section .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .contact-section .form-group {
    margin-bottom: 20px;
  }
  .contact-form-wrapper {
    flex-direction: column-reverse;
}
}

@media (max-width: 576px) {
 .contact-section  .contact-container {
    padding: 30px 20px;
  }

  .contact-section .form-input {
    padding: 14px 16px;
  }

  .contact-section .submit-button {
    padding: 16px;
  }
  .contact-banner h1 {
    font-size: 30px;
}
.contact-banner p {
    font-size: 16px;
}
.contact-banner {
    min-height: 54vh;
}
.contact-section {
    padding-block: 40px;
}
.contact-section .contact-icon-text h5 {
    font-size: 20px;
}
.company-info .contact-icon {
    width: 48px;
    height: 48px;
}
.company-info .contact-icon svg {
    width: 22px;
    height: 22px;
}
.contact-section .social-links a {
    width: 36px;
    height: 36px;
    padding: 6px;
}
.social-info h5 {
    font-size: 22px;
    margin-bottom: 10px;
}
.contact-section .social-info {
    margin-top: 12px;
}
.contact-section .submit-button {
  font-size: 16px;
}
}