*,

*::after,

*::before {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: "Nunito Sans", sans-serif;

    font-optical-sizing: auto;

    font-style: normal;

    --prime: #3E243C;

    --sec: #FF6F5E;

    scroll-behavior: smooth;

}
.form-icon-right {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.businesscard h3{
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* min-height: 30px; */
    display: -webkit-box;
}
.businesscard p{
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
        min-height: 50px;
    display: -webkit-box;
}


body {

    background: #FBF6FA;

    overflow-x: hidden;

}



a {

    text-decoration: none;

    color: inherit;

}



button {

    border: none;

    background: none;

}



.text-prime {

    color: var(--prime);

}



.bg-prime {

    background: var(--prime);

}



.bg-sec {

    background: var(--sec);

}



.btn-prime {

    background: var(--prime);

    display: flex;

    justify-content: center;

    align-items: center;

    width: fit-content;

    color: #fff;

    min-height: 42px;

    padding: 7px 16px;

    border: none;

    border-radius: 6px;

}



.btn-sec {

    border: 1px solid var(--prime);

    background: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    width: fit-content;

    color: var(--prime);

    min-height: 42px;

    padding: 7px 16px;

    border-radius: 6px;

}



.w-fit {

    width: fit-content;

}



.mw-750 {

    max-width: 750px;

}





.fs-7 {

    font-size: 14px;

}



header {

    background: #fff;

    position: sticky;

    top: 0;

    box-shadow: 0px 4px 4px 0px #0000001F;

    z-index: 999;

}



header .navbar-nav .nav-link {

    color: #000;

}



header .navbar-nav .nav-link.active {

    color: var(--prime);

    font-weight: 600;

}



#navbar-toggler:checked~.collapse {

    display: block;

}



footer {

    background: #fff;

}



footer .pages {

    display: grid;

    grid-template-columns: 2fr 3fr;

}



footer .contact,

footer .pages>div {

    display: flex;

    flex-direction: column;

    gap: 16px;

}



footer p,

footer .contact a,

footer .pages a {

    color: #000;

    transition: all .3s ease-in-out;

    font-size: 14px;

}



footer .pages a:hover {

    transform: translateX(6px);

    transition: all .3s ease-in-out;

}



footer .contact a img {

    filter: invert(100%);

}



footer .contact a {

    display: grid;

    grid-template-columns: 25px 1fr;

    gap: 8px;

}



footer .social-media a {

    height: 30px;

    width: 30px;

}



footer .social-media,

footer .pages,

footer .contact {

    margin-bottom: 20px;

}



.footer-credit {

    background: #F9FAFB;

    color: #000;

    padding: 15px;

    text-align: center;

    font-size: 14px;

}





/* Forms */



form.column {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



form label {

    margin: 16px 0px 12px;

}



select,

input,

textarea {

    border: 1px solid transparent;

    outline: none;

    border-radius: 5px;

    padding: 8px 18px;

    background: #EEF0F2;

    width: 100%;

}



select {

    padding: 11px 20px;

}



select:focus,

input:focus,

textarea:focus {

    border: 1px solid var(--prime);

    background: #fff;

}



.form-range {

    -webkit-appearance: none;

    appearance: none;

    outline: none;

}



.form-range::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 16px;

    height: 16px;

    background: var(--prime);

    border: none;

    border-radius: 50%;

    cursor: pointer;

}



.form-range:focus {

    outline: none;

    border: none;

}



.listing {

    display: grid;

    grid-template-columns: 1fr;

    gap: 12px;

}



/* @media (max-width:678px) {

    .listing {

        grid-template-columns: 1fr;

    }

} */



.businesscard {

    background: #fff;

    height: fit-content;

    padding: 6px;

    border-radius: 8px;

    margin-bottom: 8px;

    box-shadow: 0px 4px 60px 0px #0001;

    display: grid;
    width: 100%;
    /* grid-template-columns: 2fr 3fr; */

}



.businesscard:hover {

    box-shadow: 0px 4px 60px 0px #0002;

}



.businesscard img.img-fluid {
    border-radius: 8px;
    height: 200px;
    object-fit: cover;
    width: 100%;
}





/* onload animation with animation timeline */

@media (prefers-reduced-motion: no-preference) {



    .animate-this {

/*        opacity: 0;*/

        transform: translateY(0px);

    }



    .animate-this.animated {

        animation: fade-in 0.8s ease-in-out forwards;

    }



    @keyframes fade-in {

        to {

            opacity: 1;

            transform: translateY(0px);

        }

    }

}





/* How does it work section */

.howdoeswork {

    display: flex;

    flex-wrap: nowrap;

    gap: 10px;

    overflow-x: auto;

    padding: 20px 0;

}



.howdoeswork::-webkit-scrollbar {

    height: 6px;

    background: #ccc;

}



.bg-sec .howdoeswork::-webkit-scrollbar {

    background: #ccc5;

}



.howdoeswork::-webkit-scrollbar-thumb {

    background: var(--prime);

    cursor: pointer;

}



.bg-sec .howdoeswork::-webkit-scrollbar-thumb {

    background: #fff;

}



.howdoescard {

    background: #fff;

    padding: 6px;

    border-radius: 10px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

    min-width: 680px;

}



@media (max-width:768px) {

    .howdoescard {

        min-width: 320px;

        grid-template-columns: 1fr

    }

}