@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/************* Responsive ****************/

@media screen and (min-width: 320px) and (max-width: 480px) {

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        font-family: 'Poppins', sans-serif;
    }

    body {
        background-color: var(--background-color-primary);
    }

    :root {
        --color-primary: #0D1459;
        --color-secondary: #2C337A;
        --color-text: #000;
        --background-color-primary: #FFFFFF;
        --background-color-secondary: #F5F5F5;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    ul {
        list-style: none;
    }
    
   .row {
       --bs-gutter-x: 1.5rem;
       --bs-gutter-y: 0;
       display: flex;
       flex-wrap: wrap;
       margin-top: calc(-1 * var(--bs-gutter-y));
       margin-right: calc(-.0 * var(--bs-gutter-x));
       margin-left: calc(-.0 * var(--bs-gutter-x));
   }
    /****** ICONS FONTAWESOME *********/

    /* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
    .icon::before {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
    }

    /****** ICONS FONTAWESOME *********/
 
    div.header {
        width: 100%;
        height: 499px;
        border-radius: 4px;
        background-image: url("../img/mobile-1.png");
        background-size: cover;
        background-repeat: no-repeat;
    }

    div.mascara-azul {
        width: 100%;
        height: 499px;
        background: linear-gradient(90deg, rgba(1, 11, 103, 0.35) 6.25%, rgba(1, 90, 179, 0.35) 45.13%, rgba(0, 185, 236, 0.35) 100%);
        /* opacity: 0.6; */
    }

    .dropdown-menu {
        min-width: 100%;
    }

    .title {
        display: flex;
        justify-content: center;
        position: relative;
        margin: -273px 68px 0px 68px;
        width: 241px;
        height: 84px;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 35px;
        line-height: 42px;

        text-align: center;

        color: #FFFFFF;
    }

    .rectangle-azul {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 461px;
        padding: 31px 35px 35px 20px;

        background: #016fc0;
    }

    span.confira-alguns-nmeros-da-marlony {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 250px;
        height: 58px;
        margin: 0px 30px 32px 32px;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 24px;
        line-height: 29px;
        text-align: center;

        color: #F9F9F9;
    }

    span.icon {
        display: flex;
        justify-content: center;
        width: auto;
        height: 39.48px;
    }

    span.number {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: 34.54px;
        margin-top: 20px;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 45px;
        line-height: 58px;
        text-align: center;

        color: #F9F9F9;
    }

    span.text {
        display: flex;
        justify-content: center;
        width: 101%;
        margin-top: 0px;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 19px;
        text-align: center;

        color: #F9F9F9;
    }

    div.inicio {
        display: flex;
        justify-content: center;
        width: 100%;
        height: auto;
        margin: 0px -6px 44px;
    }
    
    .a-mais-de-20-anos-no-mercado-de-jogos {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 58px;
        margin: 32px 16px 24px 0;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 29px;
        text-align: center;

        color: #000000;
    }

    p.parrafo {
        display: flex;
        justify-content: center;
        width: 100%;
        /* height: 132px; */
        margin: 0px 18px 10px 0px;

        font-family: 'Poppins', sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 18px;
        line-height: 22px;
        text-align: center;

        color: #000000;
    }

    .img2 {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 236px;
        margin: 40px 0px 30px 0px;
        background-image: url("../img/img2.png");
        background-size: contain;
        background-repeat: no-repeat;
    }
}