/* =============================================================================
   HTML5 CSS Reset Minified - Eric Meyer
   ========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

/* ---- base ---- */
html,body{ 
	width:100%;
	height:100%;
	background:#fff;
}

html{
  -webkit-tap-highlight-color: rgba(255, 0, 255, 1);
  scroll-behavior: smooth;
}

body{
  font:normal 75% 'Nunito', Arial, Helvetica, sans-serif;
}

p {
  font-family: 'Nunito', Arial, Helvetica, sans-serif;
  font-weight: 400 !important;
}

h1, h2 {
  font-family: 'Kanit', sans-serif;
  text-transform: uppercase;
}

/* Navbar styles */
nav.navbar {
   background-color: transparent;
   width: 100%;
   z-index: 10;
   padding: 2rem;
}

nav .navbar-brand {
  color: #fff;
  font-weight: bold;
}

nav .navbar-brand img {
  transition: all 0.3s ease;
}

nav .nav-link {
  color: #fff;
  transition: color 0.3s ease;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
}

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

/* Styles for scrolled state */
.scrolled {
  background-color: rgba(240, 245, 255, 0.9) !important;
  padding: 1rem !important;
}

.scrolled .navbar-brand img {
  content: url('../komo_logo_color.png'); 
}

.scrolled .nav-link {
  color: #000 !important;
}

/* Keep white nav-link color when at the top */
.navbar:not(.scrolled) .nav-link {
  color: #fff;
}

nav .nav-link.active {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
  font-weight: bold;
}

.quienes-somos-color {
  color: #3b3087 !important;
}

.servicios-color {
  color: #e40a5b !important;
}

.clientes-color {
  color: #f2e133 !important; 
}

.contacto-color {
  color: #1d1d1b !important;
}

/* Section-specific nav-link colors */
.quienes-somos-link.active {
  color: #3b3087 !important;
}

.servicios-link.active {
  color: #e40a5b !important;
}

.clientes-link.active {
  color: #f2e133 !important; 
}

.contacto-link.active {
  color: #1d1d1b !important;
}

canvas{
  display:block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */
#particles-js{
  width: 100%;
  height: 100%;
  background-color: #22224a;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.typewriter {
  width: auto; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
}
.typewriter h1 {
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  width: fit-content;
  overflow: hidden; 
  white-space: nowrap; 
  margin: 0 auto;
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(40, end);
}
/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
/* Chevron positioning and styles */
.chevron-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

.chevron-down:hover {
  color: #ccc;
}

.lead {
  font-weight: 400 !important;
}

section h2:after {
  content: "";
  width: 150px;
  height: 22px;
  background-image: url(misc_komo.png);
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-flex;
  text-align: end;
  float: right;
  margin-top: 5px;
}