@import url('colors.css');

body {
    font-family: 'Shabnam', sans-serif;
    font-weight: 200;
    -webkit-tap-highlight-color: rgba(22, 28, 45, 0);
    background-color: #fff;
    color: #161c2d;
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0;
    -webkit-text-size-adjust: 100%;
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container, .container-md, .container-sm {
        max-width: 720px;
    }

    .pt-md-11 {
        padding-top: 6rem !important;
    }

    .py-md-11 {
        padding-bottom: 6rem !important;
        padding-top: 6rem !important;
    }

    .py-md-8 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important;
    }

    .w-md-150 {
        width: 150% !important;
    }
}

@media (min-width: 992px) {
    .container, .container-lg, .container-md, .container-sm {
        max-width: 960px;
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .mb-lg-8 {
        margin-bottom: 3rem !important;
    }

    .w-lg-130 {
        width: 130% !important;
    }
}

@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1040px;
    }
}

/* custom scrollbar */
::-webkit-scrollbar {
    width: 20px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #d6dee1;
    border-radius: 20px;
    border: 6px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a8bbbf;
}

.navbar {
    padding: 1.25rem 0 !important;
}

.brand {
    font-weight: 900;
    color: #335EEA !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #506690;
    font-weight: 350;
}

.nav-item :hover {
    color: #335EEA !important;
}

.display-3 {
    font-size: 2.5rem;
    font-weight: 200;
}

.welcome-title {
    font-weight: normal;
}

.welcome-subtitle {
    font-size: 75%;
}

.h1, .h2, h1, h2 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 2rem !important;
}

.btn-pd {
    padding: .8125rem 1.25rem;
}

.pt-8 {
    padding-top: 3rem !important;
}

.form-label.required:after {
    content: ' *';
    color: var(--bs-danger);
}

.icon {
    font-size: 3rem;
    color: #335EEA;
}

.py-8 {
    padding-bottom: 3rem !important;
    padding-top: 3rem !important;
}

.border-bottom {
    border-bottom: 1px solid #f1f4f8 !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
}

.gray-image-70 {
    -webkit-filter: grayscale(100%) contrast(70%);
    filter: grayscale(100%) contrast(70%);
}

.bg-gradient-light-white {
    background-image: linear-gradient(
            180deg, #f9fbfd 0, #fff);
}

.icon-secondary {
    font-size: 2rem;
    color: #C1CEF8;
}

.img-skewed-start {
    perspective-origin: 0;
}

.img-skewed {
    perspective: 1500px;
    transform-style: preserve-3d;
}

.screenshot {
    border-radius: .625rem;
    box-shadow: 25px 60px 125px -25px rgb(80 102 144 / 10%), 16px 40px 75px -40px rgb(0 0 0 / 20%);
}

.img-skewed-start .img-skewed-item {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: rotateY(-35deg) rotateX(15deg);
}