:root {
    --black: #000000;
    --light-gray: #cfcfcf;
    --lime-yellow: #e3f87d;
    --blush: #f2e9ea;
    --near-black: #090909;
    --charcoal-gray: #504d4a;
    --gray-dark: #3a3836;
    --gray-mid: #6a6764;
    --gray-light: #8a8784;
}

html, body {
    height: 100%;
    background: linear-gradient(
        to left,
        var(--gray-dark) 0%,
        var(--charcoal-gray) 35%,
        var(--gray-mid) 70%,
        var(--gray-light) 100%
    );
    font-family: 'TeXGyreAdventor', sans-serif;
    margin: 0;
    padding: 0;
}


body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: linear-gradient(
        to left,
        var(--gray-dark) 0%,
        var(--charcoal-gray) 35%,
        var(--gray-mid) 70%,
        var(--gray-light) 100%
    );
}

/* Navigation section */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--near-black);
    font-weight: 100;
    z-index: 1000;
}

/* Ensure main content does not overlap with the fixed header */
main {
    flex: 1 0 auto;
    background: linear-gradient(
        to left,
        var(--gray-dark) 0%,
        var(--charcoal-gray) 35%,
        var(--gray-mid) 70%,
        var(--gray-light) 100%
    );
    margin-top: 100px; /* Adjust this value based on the actual height of your header */
}


/* Footer section */
footer {
    background-color: var(--near-black);
    font-weight: 100;
    font-size: 0.6rem;
    width: 100%;
}

.logo {
    max-height: 100px;
    height: auto;
    width: auto;
    display: block;
}

/* Logo blink */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.logo-blink {
    animation: blink 0.5s linear 3;
}

/* Contact Pulse Animation */
.contact-pulse {
    transform: scale(1);
    color: inherit;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

.contact-pulse:hover {
    animation: contactPulse 2s infinite;
    color: var(--lime-yellow) !important;
}

@keyframes contactPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@media (max-width: 768px) {
    .contact-pulse:not(.mobile-off) {
        animation: contactPulseMobile 2.5s infinite;

    }

    @keyframes contactPulseMobile {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.6);
        }
    }
}

/* end Contact Pulse Animation */

/* Scroll-top-button */
.scroll-top-button {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    cursor: pointer;
}

.triangles-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #333;
    display: inline-block;
    margin: 5px 0;
}

.triangle:nth-child(1) {
    animation: scrollAnimation 1s infinite 0.4s;
}

.triangle:nth-child(2) {
    animation: scrollAnimation 1s infinite 0.2s;
}

.triangle:nth-child(3) {
    animation: scrollAnimation 1s infinite 0s;
}

@keyframes scrollAnimation {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* end Scroll-top-button r */

.icon-link {
    display: inline-flex;
    align-items: center;
}

.icon-link:hover .icon-hover {
    color: var(--lime-yellow)
}

.lime-yellow-hover-bg:hover {
    background-color: var(--lime-yellow);
}

.lime-yellow-hover-text:hover {
    color: var(--lime-yellow) !important;
}

.text-justify {
    text-align: justify;
}

.icon-button {
    text-decoration: none;
    outline: none;
}

.icon-button:focus {
    outline: none;
    box-shadow: none;
}

.btn-close:focus {
    outline: none;
    box-shadow: none;
}

.offcanvas-body .dropdown-item:hover {
    background-color: var(--lime-yellow);
    border-radius: 15px;
}

/* Scrollbar styles for WebKit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 16px; /* width of the scrollbar track */
}

::-webkit-scrollbar-track {
    background: var(--charcoal-gray); /* color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--charcoal-gray); /* color of the thumb */
    border-radius: 15px; /* roundness of the thumb */
    border: 4px solid var(--light-gray); /* makes the thumb appear narrower */
}

/* Scrollbar styles for Firefox */
* {
    scrollbar-width: thin; /* thickness of the scrollbar */
    scrollbar-color: var(--light-gray) var(--charcoal-gray); /* colors of the thumb and track */
}