@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');


.bg-white {
    background-color: #FFF6F0;
}

.bg-white-darker {
    background-color: #E2D9D2;
}

.bg-black {
    background-color: #000000;
}

.bg-brown-ish {
    background-color: #3E3A38;
}

.bg-trans {
    background: linear-gradient(198deg, #B7E5F6 0.39%, #f8f8f8 42.14%);
}

::placeholder {
    color: #C5BAB5;
}

.logo-size-nav {
    width: 30px;
}

.navbar {
    min-height: 80px;
}

.nav-link:hover {
    opacity: 0.7;
}

.space-font {
    font-family: 'Space Grotesk', sans-serif;
}

h1 {
    font-family: 'Space Grotesk', sans-serif;
}

h2 {
    font-family: 'Space Grotesk', sans-serif;
}

h3 {
    font-family: 'Space Grotesk', sans-serif;
}

p {
    font-family: 'Inter', sans-serif;
}

.display-1 {
    font-weight: 400;
}

.display-3 {
    font-weight: 400;
}

.display-6 {
    font-weight: 400;
}

.form-control::placeholder {
    color: #8b8b8b;
    opacity: 1;
}

.form-control:focus {
    background: transparent;
    color: white;
}

.bigger-bottom-padding {
    padding-bottom: 367px;
}

.bigger-top-padding {
    padding-top: 250px;
}

.index-custom-color {
    background: linear-gradient(180deg, #7383F8 -16.36%, #E2B0FF 2.1%, #9B99F2 36.88%, rgba(255, 255, 255, 0.00) 100%);
}

.contact-custom-color {
    background: linear-gradient(180deg, #FCBCFF 0%, #C5D8FD 15.87%, #ffffff 90.87%);
}

.prices-custom-color {
    background: linear-gradient(180deg, #FFCDCE 0%, #FFD4F9 25.96%, #ffffff 98.55%);
}

.features-custom-color {
    background: linear-gradient(180deg, #B7ACFF 1.58%, #F0AEE9 15.64%, #E2F8FE 35.95%, #E2F8FE 66.67%, #FFF 100%);
}

.foot-divider {
    height: 2px;
    background-color: #C5BAB5;
}

.card-size {
    width: 22em;
}

.contact-border {
    border: 1px solid #3E3A38;
}

.pin-image {
    width: 50px;
}

.phone-image {
    width: 35px;
    margin-left: 10px;
}

.mail-image {
    width: 35px;
    margin-left: 10px;
}

.pricing-slider {
    display: flex;
    gap: 24px;

    overflow-x: auto;            /* this is the part that does the scroll thing, in another words the thing ive been looking for for the past 1 and a half hour, and scroll smooth is just what i found is commonly used with it */
    scroll-behavior: smooth;

    padding-bottom: 20px;
}

.pricing-slider::-webkit-scrollbar {
    height: 10px;
}

.pricing-slider::-webkit-scrollbar-thumb {
    background: #b6aaa3;
    border-radius: 20px;
}

.pricing-card {
    min-width: 380px;
    max-width: 380px;
    min-height: 620px;

    flex-shrink: 0;
}

.display-5 {
    font-size: 24px;
    font-weight: 400;
}