@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


    :root {
        --color-primary: #014685;
        --color-secundary: #1FACF8;
        --background-degradate: linear-gradient(89.02deg, #014685 0.73%, #1FACF8 98.64%);
        --background-degradate-2: linear-gradient(94.69deg, #1FACF8 8.24%, #014685 94.42%);
        --background-degradate-3: linear-gradient(234.31deg, #014685 14.32%, #1FACF8 84.44%);
        --font-size-title: 50px;
        
        --font-size-title-small: 25px;
        --font-size-content: 16px;
        --font-family-title: "Montserrat", sans-serif;
        --font-family-content: "League Spartan", sans-serif;
    }
    @media(max-width: 768px) {
          :root {
            --font-size-title: 35px;
        }
    }

   @media(max-width: 425px) {
          :root {
            --font-size-title: 25px;
        }
    }

    body,
    p {
        font-size: var(--font-size-content);
    }

    .title-section {
        color: var(--color-secundary);
        font-size: var(--font-size-title);
        text-wrap: balance;
        text-transform: capitalize;
        line-height: 2.5rem;
    }
    @media (max-width: 600px) {
        .title-section {
            text-align: center;
            line-height: 2rem;
        }
    }
    .subtitle-section {
        font-weight: bold;
        font-size: var(--font-size-content);
    }
    .bg-dark-blue {
        background: #002B61
    }

    .text-orange {
        color: #F9B33A!important;
    }

    .btn-1 {
        background: linear-gradient(94.69deg, var(--color-secundary) 8.24%, var(--color-primary) 94.42%);
        border-radius: 50px 0 50px 50px;
        padding: 5px 10px;
        color: #fff;
        font-weight: bold;
        position: relative;
        overflow: hidden;
    }
        
    .btn-1::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 50px;
        transition: all .6s ease-in;
        border-radius: 100%;
        background-color: var(--primary-dark);
        left: -100%;
        top: 0;
    }
    .btn-1:hover::before {
        width: calc(100% + 20px);
        height: calc(100% + 20px);
        border-radius: 60px;
        left: 0;
        top: -9px;
        transform: translateX(0);
        transition: all .5s ease;
    }

    .btn-1 img,
    .btn-1 span {
        position: relative;
        z-index: 1;
    }
    .btn-1:hover span {
        color: #fff;
    }