/* NAVBAR ANIMATION */

header {
    position: relative;
    z-index: 10;
}

.site-title {
    font-size: 30px;
    color: #ffffff;

    transition: color 0.3s ease;
}

.site-title a {
    text-decoration: none;
}

.site-title:hover {
    color: #b0b2c3;
}

.site-subtitle {
    font-size: 58px;
    color: #38a169; /* Green color for subtitle */
    font-weight: bold;
}

/* Navbar Styling */
.navbar {
    width: 100%;
    background: #b0b2c3;
    text-align: center;
}


.navbar-logo {
    display: block;
    position: relative;
    width: 70px;
    margin: 0 auto 12px;
}

.navbar-logo img,
.navbar-logo svg {
    width: 70px;
    height: 70px;
    opacity: 0.8;
}

.navbar-logo span {
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.navbar-logo .navbar-logo-top-label {
    position: absolute;
    top: 30px;
    right: 0;
    font-size: 0.875em;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: all 0.3s ease;
}

.navbar-logo .navbar-logo-top-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    position: relative;
    top: 4px;
}

.navbar-logo .navbar-logo-top-icon svg {
    width: 20px;
    height: 20px;
}

.navbar-logo:hover .navbar-logo-top-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(60px);
    
}

/* Navbar Links Styling */
.navbar-links {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 18px;
    text-align: center;
}

.navbar-links li {
    display: inline-block;
    margin-right: 40px;
}

.navbar-links li:last-child {
    margin-right: 0;
}
.navbar-links a:hover {
    color: white;
}

.navbar-links a {
    display: block;
    padding: 15px 0;
    position: relative;
    color: #b0b2c3;
    font-weight: 600;
    transition: color 0.3s ease;
    text-decoration: none;
}

.navbar-links a:before {
    background-color: #235aa6;
    transition: all 0.25s cubic-bezier(.694, .048, .335, 1) 0.15s;
}

.navbar-links a:after,
.navbar-links a:before {
    content: "";
    position: absolute;
    bottom: 16px;
    right: 0;
    left: auto;
    width: 0;
    /* height: 3px; */
    height: 0.2em;
    
    z-index: 2;
}

.navbar-links a:after {
    background-color: #f25757;
    
    transition: all 0.25s cubic-bezier(.694, .048, .335, 1);
}

.navbar-links a:hover {
   
    text-decoration: none;
}


    .navbar-links a:hover:after,
    .navbar-links a:hover:before {
        width: 100%;
        left: 0;
    }



/* FOOTER ANIMATION */
            .footer {
                width: 100%;
                background: #ffffff; 
            
            }

            .footer,
            .footer a {
                color: #000000;
            }

            .footer-logo {
                display: block;
                position: relative;
                width: 60px;
                top: 15px;   
                margin: 0 auto ; 
            }

           
            .footer-logo span {
                clip: rect(1px, 1px, 1px, 1px); 
                height: 1px;
                overflow: hidden;
                position: absolute;
                width: 1px;
            }

            .footer-logo .footer-logo-top-label {
                position: absolute;
                top: 30px;
                right: 0;
                font-size: 0.875em; 
                opacity: 0; 
                visibility: hidden; 
                transform: translateX(40px); 
                transition: all 0.3s ease;
            }

            .footer-logo .footer-logo-top-icon {
                width: 20px; 
                height: 20px; 
                display: inline-block;
                position: relative;
                top: 4px; 
            }

            .footer-logo .footer-logo-top-icon svg {
                width: 20px; 
                height: 20px; 
            }

            .footer-logo:hover .footer-logo-top-label {
                opacity: 1; 
                visibility: visible; 
                transform: translateX(60px);
            }

            .footer-links {
                display: block;
                list-style: none;
                padding: 0; 
                margin: 0; 
                text-align: center; 
            }

            .footer-links li {
                display: inline-block; 
                margin-right: 40px;
                font-weight: 600;
            }

            .footer-links li:last-child {
                margin-right: 0;
            }

            
            .footer-links a {
                display: block;
                padding: 15px 0; 
            
                position: relative; 
                color: #3a3a3a; 
                transition: color 0.3s ease; 
                text-decoration: none;
            }

            .footer-links a:before {
                background-color: #235aa6; 
                transition: all 0.25s cubic-bezier(.694, .048, .335, 1) 0.15s; 
            }

            .footer-links a:after,
            .footer-links a:before {
                content: "";
                position: absolute;
                bottom: 16px;   
                right: 0;
                left: auto;
                width: 0; 
                height: 3px; 
                z-index: 2; 
            }

            .footer-links a:after {

                background-color: #f25757; 
                transition: all 0.25s cubic-bezier(.694, .048, .335, 1); 
            }

            .footer-links a:hover {
                text-decoration: none; 
                color: #000000; 
                transition: color 0.3s ease; 
            }

            @media only screen and (min-width: 64em) {
                .footer-links a:hover:after,
                .footer-links a:hover:before {
                    width: 100%; 
                    left: 0; 
                }
            }