@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Inter&family=Sanchez&display=swap');

* {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    color: #e9ecef;
}
body {
    --bg-1: #091421;
    --bg-2: #0E1D2E;
    --purple: #1C395A;
    --input: #093D78;
    --grey: #A0A1B5;
    --white: #e9ecef;
    --blue: #0679FC;
    --blue-hover: #0665D1;
    --blue-2:#0078FF;
    --dark-navy:#043267;
    --accent-info: #21A9FF;
    --bg-navy-1: #002F64;
    --bg-navy-2: #0E1D2E;
    --disabled: #343E5B;
    --breadcrumb: #1C395A;
    --locked: #343E5B;
    --lang-en: #012F60;
    --lang-sp: #F08022;
    --lang-encfk: #FBE0CF;
    --secondary: #07468E;
    --secondary-hover: #14345a;
    --bg-light: #f8f9fa;
    --bg-blue: #07468ea8;
    --logo: #A0A1B5;
    background-color: var(--bg-2);
}

.bg-radial {
    background: transparent radial-gradient(90% 50% at 50% 45%, #0078FF73 0%, var(--bg-2) 100%);
}
.bg-radial-2 {
    background: transparent radial-gradient(150% 40% at 50% 40%, #0078FF73 0%, var(--bg-2) 100%);
}
.bg-img-1 {
    position: relative;
}
.bg-img-1::before {
    background-image: url('https://assets.callan.app/callanapp/bg-app-1.png');
    content: "";
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 300%;
    position: absolute;
    height:100%;
    width: 100%;
    mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0,0,0,0) 100%);
}
.bg-img-2 {
    position: relative;
}
.bg-img-2::before {
    background-image: url('https://assets.callan.app/callanapp/bg-app-2.png');
    content: "";
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: -7rem;
    height:100%;
    width: 100%;
    opacity: .35;
}

.navbar-brand svg{
    min-width: 7.5rem;
}

a span {
    color: inherit;
}
.container-fluid {
    height: max-content;
    padding: 0;
}

/* navbar */

.nav-link {
    color: var(--grey);
}

.nav-link:hover {
    color: var(--blue);
}

.active {
    color: var(--white);
}

.border-secondary {
    --bs-border-opacity: .3 !important;
}

/* buttons */
.btn-primary{
    background-color: var(--blue)!important;
    border-color: var(--blue)!important;
}
.btn-primary:hover{
    background-color: var(--blue-hover)!important;
    border-color: var(--blue-hover)!important;
}

.btn-outline-primary {
    border: 2px solid var(--blue)!important;
}

.btn-secondary {
    background-color: var(--secondary)!important;
    border-color: var(--secondary)!important;
}

.btn-secondary:hover {
    background-color: var(--secondary-hover)!important;
    border-color: var(--secondary-hover)!important;
}

.btn-outline-secondary {
    color: var(--white)!important;
    border: 2px solid var(--purple);
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
    background: var(--purple)!important;
    border: 2px solid var(--purple)!important;
}

.btn-sm {
    padding: .5rem .75rem;
}

.btn-lg {
    padding: 0.9rem;
}

.btn {
    color: #FFFFFF;
}
.btn:focus, .btn:focus-visible {
    box-shadow: none!important;
}

.btn-link {
    color: var(--blue);
}

.btn-close:hover {
    scale: 1.3;
    transition: ease-in .15s;
}

/*fonts*/
.text-muted{
    color: var(--grey)!important;
}

.f-12 {
    font-size: .7rem;
}

.f-14 {
    font-size: .8rem;
}
.list-dots {
    list-style: none;
    padding-left: 1.75rem;
}

.banner-images img{
    max-width: 5rem;
}

.dropdown-menu {
    background-color: var(--bg-1);
    box-shadow: 0 0 10px #0f7ef886;
    right: 0;
    left: unset !important;
}
.dropdown-menu-down {
    top: 3.2rem !important;
}
.dropdown-menu-up {
    bottom: 1.3rem !important;
}

.dropdown-menu::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 20px solid transparent;

}
.dropdown-menu-up::after {
    border-top-width: 20px;
    top: 5.8rem;
    left: 50%;
    margin-left: -20px;
    margin-bottom: 120px;
    border-bottom-color: transparent;
    border-bottom-style: solid;
    border-top-color: transparent;
    border-top-color: var(--bg-1);
}
.dropdown-menu-down::after {
    border-top-width: 20px;
    border-top: 0;
    top: -1rem;
    left: 50%;
    margin-left: -20px;
    margin-bottom: 120px;
    border-top-color: transparent;
    border-top-style: solid;
    border-bottom-color: transparent;
    border-bottom-color: var(--bg-1);
}
.dropdown-item {
    color: var(--grey);
}
.dropdown-item:hover {
    color: var(--grey);
    background-color: var(--purple);
}

.phone-size {
    max-width: 14rem;
    z-index: 10;
}

.list-dots li {
    font-size: large; /* 18px */
}
.list-dots li::before {
    content: "\2022";
    color: #084993;
    font-weight: bold;
    display: inline-block;
    width: .5rem;
    margin-left: -.5em;
    translate: -250% 0%;
}

/* assets in exercises */
.btn-exercises-1 {
    position: absolute;
    z-index: -1;
    left: -2.8rem;
    bottom: 3.5rem;
}
.btn-exercises-2 {
    position: absolute;
    left: -.5rem;
    bottom: 8rem;
}
.btn-exercises-3 {
    position: absolute;
    left: -1.5rem;
    bottom: -.5rem;
}
.btn-exercises-4 {
    position: absolute;
    right: -1.5rem;
    bottom: 3rem;
}
.btn-exercises-5 {
    position: absolute;
    right: -1.5rem;
    bottom: 7.5rem;
}
.img-exercises-1 {
    position: absolute;
    right: -1rem;
    top: 8rem;
    max-width: 1.5rem;
    z-index: 1;
}
.img-exercises-2 {
    position: absolute;
    left: 2rem;
    top: 6.5rem;
    max-width: 14rem;
}

/* assets in lessons */
.img-lesson {
    height: 34rem;
}
.img-lesson-1 {
    position: absolute;
    max-height: 45rem;
    right: -5.5rem;
    top: -5rem;
}
.img-lesson-2 {
    position: absolute;
    max-width: 13.5rem;
    right: 5rem;
    bottom: -2rem;
}
.img-lesson-3 {
    position: absolute;
    max-width: 9rem;
    right: 7rem;
    bottom: -2.75rem;
}
.img-lesson-4 {
    position: absolute;
    max-width: 26rem;
    right: -2rem;
    top: 1rem;
}

/*assets in ebooks*/
.img-ebooks-1 {
    position: absolute;
    max-width: 7.5rem;
    left: -2.8rem;
    bottom: -3.75rem;
    z-index: -1;
}
.img-ebooks-2 {
    position: absolute;
    max-width: 7.5rem;
    right: -2.8rem;
    bottom: 4.2rem;
}
.img-ebooks-3 {
    position: absolute;
    max-width: 11rem;
    top: -3rem;
    left: -2.3rem;
}

.btn-download {
    width: 12rem;
}

.link-apk {
    color: var(--white);
    margin-bottom: 6rem;
}

@media only screen and (min-width: 768px) {

    .bg-img-1::before {
        background-size: cover;
    }
    .bg-radial {
        background: transparent radial-gradient(90% 70% at 50% 38%, #0078FF73 0%, #0078FF36 30%, transparent 90%);
    }
    .bg-radial-2 {
        background: transparent radial-gradient(50% 50% at 50% 50%, #0078FF73 0%, #0E1D2E00 100%);
    }
    .container, .container-lg {
        padding: 0 3rem;
        margin-bottom: 0;
    }

    .img-exercises-1 {
        right: -4rem;
        top: 6rem;
    }
    .img-exercises-2 {
        left: 5rem;
        top: 4.5rem;
    }
    .img-lesson-2 {
        right: 0rem;
    }
    .img-lesson-3 {
        right: 2rem;
    }
    .border-md-0 {
        border: 0 !important;
    }
}
@media screen and (min-width: 992px) {

    .container, .container-lg {
        padding: 0 6rem;
    }

    h1 {
        font-size: calc(1.5rem + 1.5vw) !important;
    }

    .img-exercises-1 {
        right: -8.5rem;
        top: 6rem;
    }

    .img-lesson-2 {
        right: -3rem;
    }
    .img-lesson-3 {
        right: -1rem;
    }
    .img-lesson-4 {
        right: -5rem;
    }
}
@media screen and (min-width: 1400px) {
    .bg-img-2::before {
        background-size: contain;
    }
}