.modal-content {
    background-color: rgb(52, 188, 69) !important;
    padding: 30px 80px;
    border: 1px solid #888;
    /* width: 80%;
    max-width: 800px; */
    border-radius: 30px;
    text-align: center;
}

@media (max-width: 1000px) {
    .modal-content {
        padding: 30px 30px;
        /* Adjust maximum width for small screens */
    }
}

@font-face {
    font-family: 'Agrandir Variable';
    src: url('../fonts/Agrandir-Regular.woff2') format('woff2'),
        url('../fonts/Agrandir-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Agrandir Variable';
    src: url('../fonts/Agrandir-Medium.woff2') format('woff2'),
        url('../fonts/Agrandir-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-body-font-family: 'Agrandir Variable';
    --bs-purple: #ad7ffa;
    --bs-border-radius: 15px;
    --bs-light: #e7e5d9;
    --bs-light-rgb: 231, 229, 217;
    --bs-teal: #44c150;
    --bs-pink: #f39eba;
    --bs-gray-dark: #262424;
    --bs-orange: #e1721b;
}



h2 {
    font-size: 32px;
    letter-spacing: -.2px;
}

h3 {
    font-size: 24px;
}

.mt-80 {
    margin-top: 40px;
}

.mt-100 {
    margin-top: 100px;
}

.max-100 {
    max-width: 100%;
}

.hover\:text-decoration:hover {
    text-decoration: underline !important;
}

.lead {
    font-size: 24px;
    line-height: 30px
}

.bg-purple {
    background-color: var(--bs-purple);
}

.bg-teal {
    background-color: var(--bs-teal);
}

.bg-pink {
    background-color: var(--bs-pink);
}

.bg-gray-dark {
    background-color: var(--bs-gray-dark);
}

.btn {
    --bs-btn-font-size: 16px;
    --bs-btn-padding-x: 24px;
}

.btn-sm {
    font-size: 20px;
}

.left-50 {
    left: 50%;
}


.btn-outline-primary {
    --bs-btn-color: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-black);
    --bs-btn-active-border-color: var(--bs-black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    background-color: var(--bs-purple);
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-black);
    --bs-btn-border-color: var(--bs-black);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: var(--bs-black);
    --bs-btn-hover-border-color: var(--bs-black);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-black);
    --bs-btn-active-border-color: var(--bs-black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.modal .btn {
    padding: 0 0;
}

.modal .form-control-lg  {
    padding: 0.80rem 1rem;
}

.navbar {
    --bs-navbar-color: black;
    --bs-nav-link-font-size: 16px;
    --bs-navbar-padding-y: 16px;
}

@media screen and (min-width: 1280px) {
    .btn {
        --bs-btn-font-size: 37px;
        --bs-btn-padding-x: 34px;
    }


    .navbar {
        --bs-nav-link-font-size: 37px;
    }
}

.navbar-brand {
    width: 200px;
}

@media screen and (min-width: 992px) {
    
    .header .btn:not(.header-desktop-btn) {
        position: fixed;
        z-index: 1000;
    }

    .navbar-nav {
        gap: 30px;
    }

    .header-desktop-btn {
        opacity: 0;
        visibility: hidden;
    }

}

.project {
    padding-top: 50px;
}

/* .project p {
    font-size: 45px;
} */


.history__draw {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* .history__title {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 100%;
} */

.premiere__desc,
.history__desc {
    font-size: 20px;
    line-height: 28px;
}



.premiere {
    padding: 30px;
    border-radius: 30px;
}

.premiere__desc {
    letter-spacing: -.4px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.premiere__img img{
    width: 100%;
    max-width: 600px;
}

.blockquote {
    padding: 30px;
    border-radius: 30px;
    font-size: 16px;
    line-height: 20px;
}

.cta {
    padding: 30px 13px;
    background-color: var(--bs-orange);
}

.cta__box {
    min-height: 300px;
    border: 5px solid var(--bs-gray-dark);
    border-radius: 30px;
    text-decoration:none;
    color: var(--bs-gray-dark);
    transition: all .3s ease;
}

.cta__box:hover {
    background-color: var(--bs-gray-dark);
    color: var(--bs-white);
}


.cta__title {
    font-size: 36px;
    color: inherit;
}

.author {
    padding-top: 50px;
    padding-bottom: 50px;
}

.author__image {
    border-radius: 30px;
    border: 3px solid var(--bs-black)
}

.author__desc {
    font-size: 50px;
}


.author__content {
    margin-top: 60px;
}


.services__bg {
    padding: 30px;
    border-radius: 30px;
}

.services__title {
    font-size: 36px;
}


.service__title,
.service__desc {
    font-size: 20px;
}



.simple {
    padding-top: 50px;
    padding-bottom: 50px;
}

.simple__line {
    bottom: -30px;
    width: 100%;
}

.simple__circle {
    bottom: -880px;
    width: 200px;
    margin-left: 230px;
    z-index: -1;
}


@media screen and (min-width: 992px) {
    .project,
    .author {
        margin-bottom: 50px;
    }
}

.simple__circle2 {
    bottom: -295px;
    width: 200px;
    margin-left: 690px;
    z-index: -1;
}

.simple__desc {
    font-size: 16px;
    line-height: 20px;
}


.simple-box {
    border: 5px solid var(--bs-gray-dark);
    border-radius: 30px;
    padding: 50px;
}

.simple-box--sm {
    padding: 30px;
    margin-bottom: 40px;
}



.simple-box span::after {
    position: absolute;
    left: -15px;
    top: -15px;
    content: '';
    width: 70px;
    height: 70px;
    z-index: -1;
    background-repeat: no-repeat;
    background-image: url('../svgs/draw-line-sm.svg');
    background-size: contain;
    background-position: center;
}


.footer {
    padding-top: 70px;
    padding-bottom: 50px;
    background-color: var(--bs-gray-dark);
}

.footer__bottom {
    margin-top: 30px;
    font-size: 22px;
}

.footer__menu {
    font-size: 20px;
    color: white;
    display: inline-;
}

.footer__link {
    color: inherit;
    border-color: inherit;
}

@media screen and (max-width: 991.98px) {
    .hero {
        padding-bottom: 50px;
    }

}



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

    h2,
    .h2 {
        font-size: 70px;
        letter-spacing: -.2px;
    }


    h3,
    .h3 {
        font-size: 56px;
    }

    .mt-80 {
        margin-top: 80px;
    }

    .lead {
        font-size: 45px;
        line-height: 52px
    }


    .premiere {
        padding: 80px;
    }

    .project {
        padding-top: 50px;
    }


    .navbar-brand {
        width: 386px;
    }


    .author {
        padding-top: 100px;
        padding-bottom: 40px;
    }


    .history__draw {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .premiere__desc,
    .history__desc {
        font-size: 40px;
        line-height: 48px;
    }

    .blockquote {
        font-size: 27px;
        line-height: 30px;
    }


    .services__bg {
        padding: 40px;
    }


    .simple {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .simple__desc {
        font-size: 36px;
        line-height: 40px;
    }

    .simple-box--sm {
        padding: 150px 60px;
        margin-bottom: 0;
    }

    .simple-box span::after {
        left: -35px;
        top: -65px;
        width: 200px;
        height: 200px;
    }
    
    .cta__title {
        font-size: 100px;
    }
    

    .cta {
        padding: 60px 0;
    }
    
    .cta__box {
        min-height: 600px;
    }

    .footer__bottom {
        margin-top: 70px;
    }
    
}

@media screen and (min-width: 1280px) {
    h2,
    .h2 {
        font-size: 95px;
    }
}