body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/* Global styles */

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
    margin: 0;
}

h3 {
    font-size: 1.5rem;
    margin: 0;
}

h4  {
    font-size: 1.25rem;
    margin: 0;
}

.no-wrap {
  white-space: nowrap;
}

.super-link {
    color: #E57040;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease;
}
.super-link:hover {
    border-color: #E57040;
}

/* Top banner */
.top-banner {
    background: #1A8DBD;
    border-bottom: #444 2px solid;
    color: #fff;
    align-content: center;

    height: 0;
    padding: 0 20px;
    opacity: 0;
    animation: bannerReveal 1.2s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.5s;
}

@keyframes bannerReveal {
    to {
        height: 200px;
        padding: 20px 20px;
        opacity: 1;
    }
}

.top-banner-button {
    color: #fff;
    border: #fff 2px solid;
    border-radius: 4px;
}

.top-banner-button:hover {
    background: #fff;
    color: #1A8DBD;
    border-color: #fff;
}

/* Navbar */
.navbar {
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #1A8DBD;
}

.navbar-brand img {
    height: 60px;

}

.nav-link {
    color: #1A8DBD;

}

.nav-link:hover {
    color: #444;
}

.nav-button {
    color: #1A8DBD;
    border: #1A8DBD 2px solid;
    border-radius: 4px;
}

.nav-button:hover {
    background: #1A8DBD;
    color: #fff;
    border-color: #1A8DBD;
}

/* Hero */
.hero {
    background: linear-gradient(180deg, rgb(221, 221, 221),#ddd, #ddd, #fff);
    color: #1A8DBD;
    padding: 160px 0;
    text-align: center;
    margin-top: -86px;
}

.contact-link {
    background: linear-gradient(180deg, rgb(221, 221, 221),#ddd, #ddd, #fff);
    color: #1A8DBD;
    padding: 160px 0;
    text-align: center;
}

.hero-get-inspired {
        background: linear-gradient(180deg, #fff, #ddd, #ddd, #ddd);
    color: #1A8DBD;
    padding: 160px 0;
    text-align: center;
    margin-top: -86px;
}

.call-to-action {
    background: #444;
    color: #eee;
    border-radius: 4px;
    border: #444 2px solid;
}

.call-to-action:hover {
    background: #eee;
    color: #444;
    border: #444 2px solid;
}

/* Section spacing */
.section-padding {
    padding: 70px 0;
}

/* Demo cards */
.demo-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.demo-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Footer */
footer {
    background: #444;
    color: #eee;
    padding: 12px 0;
    text-align: center;
}

/* Carousel */

.carousel-item img {
    height: 420px;
    object-fit: cover;
}

.carousel-caption {
    background: #dddddd66;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 2rem;
    right: 0;
    left: 0;
    bottom: 0;

}

.carousel,
.carousel-inner,
.carousel-item,
.carousel img {
    border-radius: 0 !important;
}

/* Get Inspired Section */

.inspire-section {
  padding: 120px 20px;
  background: #fff;
  color: #444;
}

.inspire-btn {
  padding: 12px 28px;
  font-weight: 600;
  transition: all 0.3s ease;
  border-radius: 0;
  background-color: #1A8DBD;
}

.inspire-btn:hover {
  background: #fff;
  color: #444;
}

.border-draw {
  position: relative;
  border: none;
}

/* all four sides */
.border-draw span {
  position: absolute;
  display: block;
  background: currentColor;
}

/* LEFT (start point) */
.border-draw span:nth-child(1) {
  left: 0;
  bottom: 0;
  width: 2px;
  height: 0;
}

/* TOP */
.border-draw span:nth-child(2) {
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
}

/* RIGHT */
.border-draw span:nth-child(3) {
  right: 0;
  top: 0;
  width: 2px;
  height: 0;
}

/* BOTTOM */
.border-draw span:nth-child(4) {
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
}

/* hover animation */
.border-draw:hover span:nth-child(1) {
  height: 100%;
  transition: height 0.2s linear;
}

.border-draw:hover span:nth-child(2) {
  width: 100%;
  transition: width 0.2s linear 0.2s;
}

.border-draw:hover span:nth-child(3) {
  height: 100%;
  transition: height 0.2s linear 0.4s;
}

.border-draw:hover span:nth-child(4) {
  width: 100%;
  transition: width 0.2s linear 0.6s;
}


/* TABS */

.tab-section {
  padding: 50px 0;
  background: linear-gradient(180deg, #fff, #f9f9f9);
}



.tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  width: 100%;
  max-width: 800px;

  margin: 30px auto 0; /* center horizontally */
}

.tab-btn {
  padding: 10px 20px;
  color: #1A8DBD;
  background-color: #1A8DBD10;
  cursor: pointer;
  border: 2px solid #1A8DBD;
  margin-bottom: -2px; /* to cover the border of active content */
  margin-right: -2px; /* small gap between buttons */
  transition: 0.5s;
}

.tab-btn.active {
  border-bottom: #fff;
  background-color: #fff;
}

.tab-btn:hover{
    background-color: #1A8DBD;
    color: #fff;
}

.tab-btn.active:hover {
    background-color: #fff;
    color: #1A8DBD;
}

/* TAB CONTENT */
.tab-content-wrapper {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.tab-content {
  display: none;
  background: white;
  padding: 25px;
  border: #1A8DBD 2px solid;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.25s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Menu Section */

.menu-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10px;
    margin: 20px 0;
    padding: 10px;
    border: #444 1px solid;
    text-align: right;
}

.menu-item img{
    max-width: 20%;
    height: auto;
    object-fit: cover;
}


/* Logo Marquee */

.logo-marquee {
  overflow: hidden;
  width: 100%;
  background-color: #444;
  padding: 40px 0;
  color: #eee;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeScroll 16s linear infinite;
  padding: 40px 0;
}

.marquee-group {
  display: flex;
  gap: 40px;
  padding-right: 40px;
}

.marquee-icons {
  flex-shrink: 0;
  background-color: #1A8DBD;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee-icons i{
    color: #eee;
}

@media (max-width: 767px) {
  .marquee-icons {
    height: 120px;
    width: 120px;
  }
  .marquee-icons i{
    font-size: 100px;
}
}

@media (min-width: 767px) {
  .marquee-icons {
    height: 180px;
    width: 180px;
  }
    .marquee-icons i{
    font-size: 150px;
}
}

@media (min-width: 1440px) {
  .marquee-icons {
    height: 240px;
    width: 240px;
  }
    .marquee-icons i{
    font-size: 200px;
}
}

@media (min-width: 1720px) {
  .marquee-icons {
    height: 320px;
    width: 320px;
    margin: 0 30px;
  }
    .marquee-icons i{
    font-size: 260px;
}
}


/* 🔥 KEY FIX */
@keyframes marqueeScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Contact Section */

.contact-section {
  background: #f8f9fa;
  min-height: 70vh;
}

.contact-section .form-control {
  padding: 12px 14px;
  border-radius: 10px;
}

.contact-section-home {
  background: #444;
  min-height: 70vh;
}

.contact-section-home h1, .contact-section-home p {
  color: #eee;
}