html {
    scroll-behavior: smooth;
}

/* Navbar */
.navbar {
    min-height: 8vh;
}

.logo {
    width: 130px;
    height: auto;
}

.navbar-text {
    font-size: 1.2rem;
    color: #333;
}

.nav-item a {
    font-size: 20px;
    font-weight: bold;
}

/* For small screens, remove the fixed-top */
@media (max-width: 991px) {
    .navbar.fixed-top {
        position: static;
        top: auto;
    }
}

/* Apply fixed-top for lg screens and above */
@media (min-width: 992px) {
    .navbar.fixed-top {
        position: fixed;
        top: 0;
        width: 100%;
    }
}

/* Main Pages */
section {
    min-height: 100vh;
    padding-top: 120px;
}


#home {
    background-image: url("background-image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
}

#contact {
    background-color: #e9ecef;
}

#about {
    background-color: #dee2e6;
}


.c-fw {
    font-size: 18px;
}

.c-bg-white {
    background-color: white;
}

.col img {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.col:hover img {
    transform: scale(1.05);

}

.sip-img {
    height: 250px;
    width: auto;
}

/* Apply this for screens below 950px */
@media (max-width: 950px) {
    .sip-img {
        height: 100px;
    }
}

#scrollArrow {
    position: fixed;
    bottom: 55px;
    right: 20px;
    cursor: pointer;
    transition: opacity 0.5s;
}

#scrollArrow i {
    font-size: 40px;
    color: #000;
}

.hidden {
    opacity: 0;
    pointer-events: none;
}

@media (min-width: 300px) and (max-width: 767px) {
    #scrollArrow {
        bottom: 35px;
    }
}