.subtitle,
.navbar-item,
h2 {
    font-family: 'Platypi', serif;
}

h1,
#connect-text {
    font-family: 'Electrolize', serif !important;
}

.responsive-table td {
    width: 33%;
}

.button {
    background-color: white !important;
    color: black !important;
}

.navbar-item:hover {
    background-color: #A6D9FF !important;
}

.navbar-item.nav-btn:hover {
    background-color: transparent !important; /* disable hover background for this item */
}

.is-link:hover {
    background-color: #3273dc !important; /* keep blue hover for the button */
    color: white !important;
}

.banner-photo {
    background-position: center;
}

#profile-pic {
    float: right;
}

.navbar-item {
    font-size: medium;
    color: white;
}

.home-page-img {
    margin: auto; 
    display: block; 
    width: 35%;
}

#contact {
    padding: 0 3rem;
}

@media screen and (max-width: 1020px) {
    #company-name {
        display: none;
    }

    .banner-photo {
        background-position: bottom;
    }

    #profile-pic {
        float: none;
        margin: auto;
        display: block;
    }

    .navbar-item {
        color: black !important;
    }

    .nav-btn {
        display: none;
    }

    .navbar-burger {
        color: white;
    }
    
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr {
        display: block;
        width: 100%;
    }

    .responsive-table td {
        display: block;
        width: 100%;
        padding: 1rem 0;
        border: none; /* Optional: remove borders on mobile */
        border-bottom: 1px solid #ccc;
    }

    .responsive-table td:last-child {
        border-bottom: none;
    }

    .home-page-img {
        width: auto;
    }
}

@media screen and (min-width: 1500px) {
    .page-title {
        font-size: 3.5rem;
    }
}

@media screen and (max-width: 1200px) {
    .page-title {
        display: none;
    }
}

@media screen and (max-width: 1500px) {
    .page-title {
        font-size: 1.5rem;
    }
    
}