body {
    font-family: "Inter", sans-serif;
}

/* "Log in to see your recent activity" button on Home Section */
.login-btn::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 26px;
    height: 1px;
    width: 0;
    transition: all ease-out .2s;
}

/* Hero or Home Section */
.login-btn:hover::after {
    background-color: black;
    width: 245px;
}

/* Login Section */
.login-btn-2:hover::after {
    width: 140px;
}

/* Drive Section */
.login-btn-3:hover::after {
    width: 251px;
}

/* Business Section */
.login-btn-4:hover::after {
    width: 176px;
}

/* To add background into Plan Section */
.plan-r-container {
    background: #9cced6 url('assets/images/plan-bg.png') no-repeat right center;
}

/* Right arrow into App Section */
.a-ss-container:hover .r-a-sign {
    right: 20px;
}

/* Footer */
.f-vhc-btn::after {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    height: 2px;
    width: 126px;
    background-color: white;
    opacity: 0;
    transition: all ease-out .3s;
}

.f-vhc-btn:hover::after {
    opacity: 1;
}

@media screen and (max-width: 1280px) {

    /* Home image container */
    .h-img-container {
        display: none;
    }
}

@media screen and (max-width: 640px) {

    /* Home location arrow icon */
    .h-l-arrow {
        right: 20px;
    }

    /* Plan section background image */
    .plan-r-container {
        background: #9cced6;
    }
}

@media screen and (max-width: 430px) {

    /* Two input on home home section */
    .t-inputs input {
        width: 100%;
    }

    /* Home two buttons container */
    .home-btn-container {
        flex-direction: column;
        align-items: start;
        gap: 15px;
        margin-top: 20px;
    }

    .login-btn {
        margin-left: 3px;
    }

    .login-pos {
        left: 0;
    }

    /* Plan section input container */
    .ps-i-container {
        flex-direction: column;
    }

    .ps-i-c-sub {
        width: 100%;
    }
}