/* ==========================================================================
   TOTAL COMPUTER SOLUTIONS — Design Tokens
   Concept: "The Network Hub" — TCS as the central node connecting every
   IT service. Motifs: node dots, connector lines, terminal/status labels.
   ========================================================================== */

:root{
  /* Color */
  --navy-950:#050D18;
  --navy-900:#0A1B32;
  --navy-800:#122A4D;
  --navy-700:#1B3A66;
  --blue-600:#2563EB;
  --blue-500:#3B82F6;
  --cyan-400:#22D3EE;
  --cyan-300:#67E8F9;
  --green-500:#10B981;
  --amber-400:#FBBF24;
  --slate-900:#0F172A;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-300:#CBD5E1;
  --slate-100:#F1F5F9;
  --white:#FFFFFF;

  /* Type */
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
/*  --font-mono:'JetBrains Mono', monospace;*/

  --radius:14px;
  --shadow-glow:0 0 40px rgba(34,211,238,.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--slate-900);
  background:var(--white);
  overflow-x:hidden;
}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);}
.font-mono{font-family:var(--font-mono);}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- Utility tokens ---------- */
.bg-navy{background:var(--navy-900);}
.bg-navy-950{background:var(--navy-950);}
.text-cyan{color:var(--cyan-400);}
.text-slate{color:var(--slate-500);}
.section-pad{padding:clamp(64px,4vw,110px) 0;}
.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan-400);
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.eyebrow::before{
  content:"";
  width:8px;height:8px;border-radius:50%;
  background:var(--cyan-400);
  box-shadow:0 0 0 0 rgba(34,211,238,.6);
  animation:node-pulse 2s infinite;
}
@keyframes node-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,211,238,.55);}
  70%{box-shadow:0 0 0 9px rgba(34,211,238,0);}
  100%{box-shadow:0 0 0 0 rgba(34,211,238,0);}
}

/* status pill (used for AMC / uptime / support messaging) */
.status-pill{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.35rem .75rem;
  border-radius:999px;
  background:rgba(16,185,129,.1);
  color:#0f9c72;
  border:1px solid rgba(16,185,129,.35);
}
.status-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--green-500);animation:node-pulse 1.8s infinite;}

/* ---------- Navbar ---------- */
.tcs-navbar{
/*  background:rgb(5 13 24);*/
      background: #edecea;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.06);
/*  padding:.7rem 0;*/
  transition:background .3s ease;
  padding-top: 0;
  padding-bottom: 0;
}
.tcs-navbar .navbar-brand{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.28rem;
  color:var(--white) !important;
  display:flex;align-items:center;gap:.6rem;
}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--blue-600),var(--cyan-400));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;color:#031225;font-size:.85rem;
}
.tcs-navbar .nav-link{
/*  color:var(--slate-300) !important;*/
color: black;
  font-size:.92rem;font-weight:bold;
  margin:0 .95rem;
  position:relative;
  padding:.5rem .2rem !important;
}
.tcs-navbar .nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--cyan-400),var(--blue-500));
  transition:width .25s ease;
}
.tcs-navbar .nav-link:hover::after,
.tcs-navbar .nav-link.active::after{width:100%;}
.tcs-navbar .nav-link.active{color: black;}
.btn-cta{
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.03em;
  background:linear-gradient(135deg,var(--blue-600),var(--cyan-400));
  border:none;color:#04101f;font-weight:700;
  padding:.55rem 1.25rem;border-radius:9px;
  transition:transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(34,211,238,.35);color:#04101f;}
.btn-outline-cyan{
  border:1px solid rgba(103,232,249,.5);color:var(--white);
  font-family:var(--font-mono);font-size:.82rem;border-radius:9px;padding:.55rem 1.25rem;
  transition:.2s ease;
  text-decoration: none;
}
.btn-outline-cyan:hover{background:rgba(34,211,238,.1);border-color:var(--cyan-400);color:var(--white);}

/* ---------- Hero / network canvas ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 120% at 15% 10%, #0E2445 0%, var(--navy-950) 62%);
  color:var(--white);
  padding-top:110px;
  padding-bottom:80px;
  overflow:hidden;
  isolation:isolate;
  background: #0E2445;
}
#network-canvas{
  position:absolute;inset:0;z-index:0;opacity:.55;
}
.hero .container{position:relative;z-index:2;}
.hero-title{
  font-size:clamp(2.3rem,2.5vw,3.6rem);
  line-height:1.08;
  font-weight:700;
  letter-spacing:-.01em;
}
.hero-title .accent{
  background:linear-gradient(90deg,var(--cyan-300),var(--blue-500));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{color:var(--slate-300);
/*  font-size:1.08rem;*/
  font-size: 1rem;
  text-align: justify;
  max-width:520px;}

/* Service slider (hero) */
.service-slider{
  position:relative;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:1.6rem;
  backdrop-filter:blur(6px);
  min-height:300px;
}
.service-slide{display:none;animation:slide-in .5s ease forwards;}
.service-slide.active{display:block;}
@keyframes slide-in{from{opacity:0;transform:translateX(14px);}to{opacity:1;transform:translateX(0);}}
.service-slide .num{
  font-family:var(--font-mono);color:var(--cyan-400);font-size:.8rem;letter-spacing:.1em;
}
.service-slide h3{font-size:1.5rem;margin:.4rem 0 .6rem;}
.service-slide p{color:var(--slate-300);font-size:.95rem;}
.slide-dots{display:flex;gap:.5rem;margin-top:1.2rem;}
.slide-dots button{
  width:34px;height:4px;border-radius:2px;border:none;background:rgba(255,255,255,.18);
  cursor:pointer;transition:.25s;padding:0;
}
.slide-dots button.active{background:linear-gradient(90deg,var(--cyan-400),var(--blue-500));width:44px;}
.slide-icon{
  width:56px;height:56px;border-radius:12px;
  background:linear-gradient(135deg,rgba(37,99,235,.25),rgba(34,211,238,.25));
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--cyan-300);
  border:1px solid rgba(103,232,249,.25);
}

/* Pure image slider (hero) — images only, no text content, dots for nav */
.image-slider{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  aspect-ratio:4/3.1;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.image-slider::before{
  content:"";position:absolute;inset:-1px;z-index:-1;border-radius:23px;
  background:linear-gradient(135deg,var(--cyan-400),var(--blue-600));
  opacity:.6;filter:blur(3px);
}
.image-slider .service-slide{
  display:block;position:absolute;inset:0;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease;
  animation:none;
}
.image-slider .service-slide.active{
  opacity:1;visibility:visible;
}
.image-slider .service-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.image-slider::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(5,13,24,0) 55%, rgba(5,13,24,.65) 100%);
}
.image-slider .slide-dots{
  position:absolute;left:50%;bottom:1.1rem;z-index:2;
  transform:translateX(-50%);
  margin-top:0;
}


/* ---------- Section headers ---------- */
.section-title{font-size:clamp(1.8rem,2.4vw,2.5rem);font-weight:700;margin-top:.5rem;}
.section-intro{color:var(--slate-600);max-width:640px;}

/* ---------- Service cards (grid) ---------- */
.svc-card{
  border-radius:16px;
  border:1px solid #E7ECF3;
  padding:2rem 1.6rem;
  height:100%;
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  background:var(--white);
}
.svc-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--blue-600),var(--cyan-400));
  transform:scaleX(0);transform-origin:left;transition:transform .35s ease;
}
.svc-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(15,23,42,.09);border-color:transparent;}
.svc-card:hover::before{transform:scaleX(1);}
.svc-icon{
  width:52px;height:52px;border-radius:12px;
  background:var(--navy-900);color:var(--cyan-400);
  display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  margin-bottom:1.1rem;
}
.svc-card .tag{
  font-family:var(--font-mono);font-size:.7rem;color:var(--slate-500);
  letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- Connector / node divider ---------- */
.node-divider{
  display:flex;align-items:center;gap:10px;color:var(--slate-300);margin:2.6rem 0;
}
.node-divider .line{flex:1;height:1px;background:repeating-linear-gradient(90deg,#D6DEE9 0 6px,transparent 6px 12px);}
.node-divider .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan-400);}

/* ---------- Stats strip ---------- */
.stat{
  text-align:center;
}
.stat .num{
  font-family:var(--font-mono);font-weight:700;font-size:clamp(1.8rem,3vw,2.5rem);
  color:var(--white);
}
.stat .label{color:var(--slate-300);font-size:.85rem;letter-spacing:.03em;}

/* ---------- Timeline / process (only real sequences) ---------- */
.step{position:relative;padding-left:2.6rem;}
.step .marker{
  position:absolute;left:0;top:0;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--navy-900);color:var(--cyan-400);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;
}
.step::after{
  content:"";position:absolute;left:.94rem;top:1.9rem;bottom:-2.2rem;width:1px;
  background:#D6DEE9;
}
.step:last-child::after{display:none;}

/* ---------- Testimonials ---------- */
.testi-card{
  background:var(--slate-100);border-radius:16px;padding:1.8rem;height:100%;
  border:1px solid #E7ECF3;
}
.testi-card .quote{font-size:.98rem;color:var(--slate-600);}
.avatar{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue-600),var(--cyan-400));
  display:flex;align-items:center;justify-content:center;color:#04101f;font-weight:700;font-family:var(--font-mono);
}

/* ---------- CTA band ---------- */
.cta-band{
  background:radial-gradient(120% 160% at 80% 0%, #0E2445 0%, var(--navy-950) 60%);
  color:var(--white);border-radius:24px;
  padding:clamp(40px,6vw,70px);
  position:relative;overflow:hidden;
}

/* ---------- Footer ---------- */
footer.tcs-footer{background:var(--navy-950);color:var(--slate-300);padding:60px 0 24px;}
footer.tcs-footer h6{color:var(--white);font-family:var(--font-display);letter-spacing:.02em;}
footer.tcs-footer a{color:var(--slate-300);text-decoration:none;font-size:.92rem;}
footer.tcs-footer a:hover{color:var(--cyan-400);}
.social-ic{
  width:36px;height:36px;border-radius:9px;border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;color:var(--white);
  transition:.2s;
}
.social-ic:hover{background:var(--cyan-400);color:#04101f;border-color:var(--cyan-400);}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{
  background:radial-gradient(120% 140% at 85% 0%, #0E2445 0%, var(--navy-950) 60%);
  color:var(--white);padding:30px 0 30px;position:relative;overflow:hidden;
}
.breadcrumb-mono{font-family:var(--font-mono);font-size:.8rem;color:var(--slate-300);letter-spacing:.04em;}
.breadcrumb-mono a{color:var(--slate-300);text-decoration:none;}
.breadcrumb-mono a:hover{color:var(--cyan-400);}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- Misc ---------- */
.badge-soft{
  background:rgba(37,99,235,.08);color:var(--blue-600);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
  padding:.3rem .7rem;border-radius:8px;text-transform:uppercase;
}
.table-compare th, .table-compare td{vertical-align:middle;}
.form-control:focus,.form-select:focus{
  border-color:var(--cyan-400);box-shadow:0 0 0 .2rem rgba(34,211,238,.18);
}
.back-to-top{
  position:fixed;right:22px;bottom:22px;z-index:999;
  width:46px;height:46px;border-radius:50%;
  background:var(--navy-900);color:var(--cyan-400);border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:.3s;
}
.back-to-top.show{opacity:1;visibility:visible;}

/* ==========================================================================
   VISUAL UPGRADE — HD imagery, vector patterns, richer motion
   ========================================================================== */

/* ---------- Media layers behind hero / page-hero ---------- */
.hero-bg-media, .page-hero-bg-media{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-bg-media img, .page-hero-bg-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.34; filter:saturate(1.15) contrast(1.05);
  transform:scale(1.04);
}
.hero-bg-media::after, .page-hero-bg-media::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(14,36,69,.55) 0%, rgba(5,13,24,.94) 62%),
    linear-gradient(180deg, rgba(5,13,24,.2) 0%, rgba(5,13,24,.96) 100%);
}
.hero canvas#network-canvas{z-index:1;}
.hero .container, .page-hero .container{position:relative; z-index:2;}

/* ---------- Circuit / node vector pattern (light sections) ---------- */
.circuit-pattern{
  position:relative; overflow:hidden;
}
.circuit-pattern::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23CBD5E1' stroke-width='1'%3E%3Cpath d='M10 10h60v60M170 10v60h-60M10 210v-60h60M170 210v-60h-60'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%2322D3EE' stroke='none'/%3E%3Ccircle cx='170' cy='70' r='3' fill='%2322D3EE' stroke='none'/%3E%3Ccircle cx='10' cy='150' r='3' fill='%232563EB' stroke='none'/%3E%3Ccircle cx='170' cy='150' r='3' fill='%2322D3EE' stroke='none'/%3E%3Cpath d='M110 0v220M0 110h220' stroke-dasharray='2 6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:220px 220px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.35));
}
.circuit-pattern > .container{position:relative; z-index:1;}

/* dark variant of the circuit pattern, for navy sections */
.circuit-pattern-dark{position:relative; overflow:hidden;}
.circuit-pattern-dark::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.35;
/*  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2322D3EE' stroke-width='1'%3E%3Cpath d='M10 10h60v60M170 10v60h-60M10 210v-60h60M170 210v-60h-60'/%3E%3Ccircle cx='10' cy='10' r='3' fill='%2367E8F9' stroke='none'/%3E%3Ccircle cx='170' cy='70' r='3' fill='%233B82F6' stroke='none'/%3E%3Ccircle cx='10' cy='150' r='3' fill='%2367E8F9' stroke='none'/%3E%3Ccircle cx='170' cy='150' r='3' fill='%233B82F6' stroke='none'/%3E%3C/g%3E%3C/svg%3E");*/
  background-repeat:repeat; background-size:220px 220px;
  mask-image:radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,.8), rgba(0,0,0,.15));
}
.circuit-pattern-dark > .container{position:relative; z-index:1;}

/* ---------- Full-bleed image band (parallax-style) ---------- */
.img-band{
  position:relative;
  min-height:200px;
  display:flex; align-items:center;
  background-attachment:fixed;
  background-position:center;
  background-size:cover;
  isolation:isolate;
}
@media (max-width:992px){ .img-band{ background-attachment:scroll; } }
.img-band::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg, rgba(5,13,24,.94) 0%, rgba(5,13,24,.82) 45%, rgba(10,27,50,.75) 100%);
}
.img-band .container{position:relative; z-index:1;}

/* ---------- Glass card (used over imagery) ---------- */
.glass-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-radius:18px;
  color:var(--white);
}

/* ---------- Feature image frame (rounded, shadow, glow ring) ---------- */
.img-frame{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -20px rgba(10,27,50,.35), 0 0 0 1px rgba(15,23,42,.04);
}
.img-frame img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
.img-frame:hover img{ transform:scale(1.05); }
.img-frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,13,24,0) 55%, rgba(5,13,24,.5) 100%);
  pointer-events:none;
}
.img-frame .frame-tag{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white);
  background:rgba(5,13,24,.55);
  border:1px solid rgba(255,255,255,.2);
  padding:.35rem .7rem; border-radius:999px;
}
.img-frame.accent-ring::before{
  content:""; position:absolute; inset:-1px; z-index:-1; border-radius:21px;
  background:linear-gradient(135deg, var(--cyan-400), var(--blue-600));
  opacity:.55; filter:blur(2px);
}

/* ---------- Image reveal on scroll ---------- */
.img-reveal{ clip-path:inset(0 0 0 0); }
.reveal.img-reveal{ transform:scale(1.06); opacity:0; }
.reveal.img-reveal.in{ transform:scale(1); opacity:1; }

/* ---------- Floating decorative blobs ---------- */
.blob{
  position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none;
  opacity:.35;
  animation:blob-float 9s ease-in-out infinite;
}
@keyframes blob-float{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(14px,-18px) scale(1.08); }
}

/* ---------- Animated gradient text ---------- */
.hero-title .accent, .gradient-text{
  background:linear-gradient(100deg, var(--cyan-300), var(--blue-500), var(--cyan-300));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradient-shift 6s ease infinite;
}
@keyframes gradient-shift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

/* ---------- Button shine sweep ---------- */
.btn-cta{ position:relative; overflow:hidden; }
/*.btn-cta::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}*/
.btn-cta:hover::before{ left:120%; }

/* ---------- Logo marquee ---------- */
.marquee-wrap{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track{ display:flex; gap:3.5rem; width:max-content; animation:marquee 26s linear infinite; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-item{
  font-family:var(--font-mono); font-size:.95rem; letter-spacing:.04em;
  color:var(--slate-500); white-space:nowrap; display:flex; align-items:center; gap:.5rem;
  opacity:.75; transition:.25s;
}
.marquee-item:hover{ color:var(--blue-600); opacity:1; }

/* ---------- Elevated svc-card polish ---------- */
.svc-card{ background:linear-gradient(180deg, #fff 0%, #fff 100%); }
.svc-card:hover{ box-shadow:0 24px 48px -12px rgba(15,23,42,.16), var(--shadow-glow); }

/* ---------- Section eyebrow line accent ---------- */
.eyebrow-rule{ display:flex; align-items:center; gap:.6rem; }
.eyebrow-rule .bar{ width:34px; height:2px; background:linear-gradient(90deg,var(--cyan-400),var(--blue-600)); }

/* ---------- Responsive: ease off heavy backdrop blur on small screens ---------- */
@media (max-width:576px){
  .glass-card{ backdrop-filter:blur(8px); }
  .img-band{ min-height:340px; }
}

.fixed-top{
  position: sticky;
}


/* =========================================
   TCS Floating Contact Buttons
   ========================================= */

.tcs-floating-contact {
    position: fixed;
    left: 20px;
    bottom: 30px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Button */

.tcs-float-btn {
    position: relative;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;
    text-decoration: none;

    font-size: 24px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .20);

    transition: all .35s ease;

    animation: tcsFloat 3s ease-in-out infinite;
}


/* WhatsApp */

.tcs-whatsapp {
    background: #25D366;
    animation-delay: 0s;
}


/* Call */

.tcs-call {
    background: #0066d6;
    animation-delay: .5s;
}


/* Hover */

/*.tcs-float-btn:hover {
    width: 135px;
    border-radius: 30px;

    color: #fff;

    transform: translateX(8px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}*/


/* Text */

.tcs-float-btn span {
    position: absolute;

    left: 65px;

    white-space: nowrap;

    font-size: 14px;
    font-weight: 600;

    opacity: 0;

    transform: translateX(-10px);

    transition: all .3s ease;
}


.tcs-float-btn:hover span {
    opacity: 1;
    transform: translateX(0);
}


/* Floating Animation */

@keyframes tcsFloat {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }

    100% {
        transform: translateY(0);
    }

}


/* Pulse Ring */

.tcs-float-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 2px solid currentColor;

    opacity: .5;

    animation: tcsPulse 2s infinite;
}


@keyframes tcsPulse {

    0% {
        transform: scale(1);
        opacity: .6;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}


/* Mobile */

/* ==========================================
   TCS MOBILE NAVBAR - UP TO 767px
   ========================================== */

/* ==========================================
   TCS NAVBAR - MOBILE / IPAD
   ========================================== */

@media (max-width: 767px) {

    /* Main navbar container */
    .tcs-navbar .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        padding: 8px 12px !important;
    }

    /* Logo */
    .tcs-navbar .navbar-brand {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .tcs-navbar .navbar-brand img {
        width: 210px !important;
        height: auto !important;
        display: block !important;
    }


    /* Hamburger */
    .tcs-navbar .navbar-toggler {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 42px !important;
        height: 38px !important;

        margin-left: auto !important;
        padding: 5px !important;

        border: 1px solid #777 !important;
        border-radius: 5px !important;

        background: transparent !important;
    }


    /* Hamburger icon */
    .tcs-navbar .navbar-toggler-icon {
        width: 22px !important;
        height: 22px !important;

        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;

        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;
    }


    /* IMPORTANT:
       Menu must occupy the complete next row
    */

    .tcs-navbar .navbar-collapse {
        display: none;
        flex-basis: 100% !important;
        width: 100% !important;
        flex-grow: 1 !important;
        margin-top: 10px !important;
    }

    /* Bootstrap adds .show when hamburger is clicked */
    .tcs-navbar .navbar-collapse.show {
        display: block !important;
    }


    /* Menu */
    .tcs-navbar .navbar-nav {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px 0 !important;
        text-align: center !important;
        align-items: center !important;
    }


    .tcs-navbar .nav-item {
        width: 100% !important;
    }


    .tcs-navbar .nav-link {
        display: block !important;
        padding: 9px 10px !important;
/*        text-align: center !important;*/
            text-align: left !important;
    }


    /* Dropdown */
    .tcs-navbar .dropdown-menu {
        position: static !important;
        width: 100% !important;
        text-align: left !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /* Get Quote button */
    .tcs-navbar .nav-item .btn-cta {
        display: inline-block !important;
        margin-top: 8px !important;
    }

}


/* Small mobile */

@media (max-width: 480px) {

    .tcs-navbar .navbar-brand img {
        width: 210px !important;
    }

    .tcs-navbar .navbar-toggler {
        width: 40px !important;
        height: 36px !important;
    }

}