body {
    font-family: "Lato", sans-serif;
    color: #333;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand,
.nav-link {
    font-family: "Poppins", sans-serif;
}

/* Link Hover Primary */
.nav-link:hover {
  color: #00bff2 !important; /* Your primary brand color */
  transition: color 0.3s ease;
}

.btn-primary, .btn-primary:hover,
.bg-primary, .btn-outline-primary:hover {
    background-color: #00bff2 !important;
    color: #ffffff !important;
    border-color: #00bff2 !important;
}

.btn-outline-primary {
    color:#00bff2;
    border-color: #00bff2;
}

.text-primary {
    color: #00bff2 !important;
}

.section-hero {
    position: relative;
    background: url("../img/Layer\ 6.png") no-repeat center center;
    background-size: cover;
    min-height: 550px;
    display: flex;
    align-items: center;
}

.section-contact {
    background: url("../img/Contact.png") no-repeat center center;
    background-size: contain;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
}

.top-bar {
    font-size: 14px;
}

.transition-hover {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.transition-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.contact-sec-icon {
    filter: brightness(0.5);
}

/* typing text */
.typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: .11em solid #00bff2;
    
    /* We use a CSS variable '--chars' which we will set in the HTML */
    width: var(--chars); 
    
    /* steps(var(--chars)) makes the typing 1:1 with letters */
    animation: 
        typing-logic 1s steps(var(--chars)) forwards,
        blink-caret .75s step-end infinite;
}

@keyframes typing-logic {
    from { width: 0; }
    to { width: calc(var(--chars) * 1ch); } 
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #00bff2; }
}